Hi everyone! I am using Laravel 5.2 for a web application. Within this app, the user can upload files. When the user wants to upload a file, but hasn't selected one they are Redirect::to the upload page with the message status saying something about choosing a file to upload. The web page used to have this code to show the message:
#if (session('status'))
<div class="alert alert-warning">
×
{{ session('status') }}
</div>
#endif
Which works great! But due to CSS and JQuery mocking, I would like to have a pop up window with the message. I went to search a few things and I found that a Bootstrap Modal would be the best. I adjusted my code to:
#if (session('status'))
<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>{{ session('status') }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endif
But now, nothing is shown! Could someone help explain to me why the modal isn't visualized?
So I have tried Mayank Pandeyz answer. And then inspected the browser. Which does show that the Modal is called with the right status message!
Consule error is: Uncaught ReferenceError: $ is not defined
try this:
#if (session('status'))
<div class="modal fade" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>{{ session('status') }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$('#myModal').modal('show'); // You have to initialize it as a modal
</script>
#endif
Related
I have content from a loop and I'm displaying title and image in a grid boxes.
In addition, in every box of content I have View more button and when a user clicks on, it shows the full content (title, image, body) in popup.
I have tested with Bootstrap modal and the popup functionality works but when I click the View more from the first box or the second, the popup always shows the content from the first box.
How can I fix this, so when a user clicks on the "View more" from the second box, to show the full content from the second box?
Every content has also ID parameter from the database, for example the first box has ID 1 and the second box has ID 2, so how can I filter that popup by the ID of the content?
Here's my code:
#foreach($drivings as $driving)
<div class="col-sm-3">
<div class="box-inner">
<div class="image">
<img class="img-fluid" src="{{ Storage::url($driving->image) }}" />
</div>
<div class="title">
{{ $driving->title }}
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
View more
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">{{ $driving->title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="image">
<img class="img-fluid" src="{{ Storage::url($driving->image) }}" />
</div>
<div class="modal-body">
{!! $driving->body !!}
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
You are targeting same id in each iteration #exampleModal. So, every button have same target with id #exampleModal.
So the solution is to append it with current driving id.
Assuming that you are using id for toggling modal, You can do something like this in button:
data-target="#exampleModal{{driving->id}}"
And in modal:
id="#exampleModal{{driving->id}}"
It's a pretty common problem when using foreach in blade
The problem is all your modal div have the same id so your code detects only the first one with it. You have to give different id to all your modal div and the button view more.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal-{{ $driving->id }}">
View more
</button>
<div class="modal fade" id="exampleModal-{{ $driving->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel-{{ $driving->id }}">{{ $driving->title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="image">
<img class="img-fluid" src="{{ Storage::url($driving->image) }}" />
</div>
<div class="modal-body">
{!! $driving->body !!}
</div>
</div>
</div>
EDIT! LATEST CODE UPDATED, NEW ERROR^
I am currently designing a website which has a feature for users to create an account.
I am encountering problems trying to get the user to be deleted first of all, then for the user to be deleted whilst logged in.
My Users controller looks like so:
public function destroy(Request $request)
{
$user = Auth::user();
Auth::logout();
if ($user->delete())
{
return Redirect::route('\home')->with('global', 'Your account has been deleted!');
}
}
My Modal bootstrap window that opens from a form looks like this;
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Are you sure?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<form action="{{route('users.delete', ['user' => Auth::id()])}}" method="Post">
<span aria-hidden="true">×</span>
</button>
</div>
#csrf
#method('delete')
<div class="modal-body">
Are you sure you want to permanetly delete your account?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">No, cancel</button>
<button type="submit" class="btn btn-danger">Yes, delete my account</button>
</div>
</div>
</div>
</div>
The form the modal opens from:
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<img src="{{ asset('/uploads/avatars/' . $user->avatar ) }}" style="width:100px; height:100px; float:left;
margin-right:25px ">
<strong>Delete {{$user->name}}'s account?</strong></div>
<div class="card-body">
<form action="delete" method="POST" enctype="multipart/form-data">
{{csrf_field()}}
<div class="form-group">
<label for="name">Account Email:</label>
<input type="text" name ="email" value="{{$user -> email}}" class="form-control" readonly>
<div class="form-group">
<div class="text-centre">
<p></p>
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
Delete
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And finally my route looks like this;
Route::post('/users/delete', 'Admin\UsersController#destroy')->name("delete-account");
Any ideas on how to firstly get this working and secondly implement it are welcome. thank you
Please tell us the error you are getting.
The first thing I recognize seeing your code is, that you return on the second line of your method. But after the return, you are still expecting code to run. Unfortunately, this will not work. Code after a return is ignored.
Try to split the methods:
Route::delete('/users/destroy', ['uses' =>'Admin\UsersController#destroy', 'as' => 'users.destroy']);
Route::get('/users/delete', ['uses' =>'Admin\UsersController#delete', 'as' => 'users.delete']);
Form method and request should be like this:
<form action="{{route(users.destroy)}}" method="delete">
Actual problem was the mismatch of route types. You have defined a route of GET type while the form is submitted to a route of DELETE type.
Please replace your code with this one and check:
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Are you sure?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<form action="{{route('users.delete', ['user' => Auth::id()])}}" method="Post">
<span aria-hidden="true">×</span>
</button>
</div>
#csrf
#method('delete')
<div class="modal-body">
Are you sure you want to permanetly delete your account?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">No, cancel</button>
<button type="submit" class="btn btn-danger">Yes, delete my account</button>
</div>
</div>
</div>
</div>
And change your route to this
Route::delete('/users/{user}', 'Admin\UsersController#destroy')->name("users.delete");
Your controller lacks an IF-THEN statement
public function destroy(User $user)
{
if($user->id !== Auth::id()) return view('admin.users.delete')->with('user', Auth::user());
Auth::logout();
if ($user->delete())
{
return Redirect::route('\home')->with('global', 'Your account has been deleted!');
}
}
Please replace your code with this one and check:
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Are you sure?</h5>
<form action="{{route('delete-account'}}" method="Post">
#csrf
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</form>
</div>
<div class="modal-body">
Are you sure you want to permanetly delete your account?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">No, cancel</button>
<button type="submit" class="btn btn-danger">Yes, delete my account</button>
</div>
</div>
</div>
</div>
And change your route to this
Route::post('/users/delete', 'Admin\UsersController#destroy')->name("delete-account");
Your controller lacks an IF-THEN statement
public function destroy(Request $request)
{
$user = Auth::user();
Auth::logout();
if ($user->delete())
{
return Redirect::route('\home')->with('global', 'Your account has been deleted!');
}
}
I have button in my blade View. What i wish is onclick, I want let the verified users to go to dashboard otherwise open a Modal Popup and ask them to register or login first.
I've created a popup modal with dummy data that works fine for guest users but don't know the logic or code for verified users to let them navigate to their dashboard page.
Any suggestion please.
Blade
<main id="main">
#section('content')
<!-- Page Content -->
<section class="py-5 product_1">
<div class="container">
<div class="align-self-center mx-auto text-center py-5">
<span>Generate A Dynamic QR CODE for Sellers</span>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn buy-button" data-toggle="modal" data-target="#exampleModalCenter">
Generate Security
</button>
#guest
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
#endguest
<script>window.location = "/dashboard";</script>
</div>
</section>
#endsection
</main>
You used #guest and #endguest there's also #auth and #endauth for when you have a logged in user.
I figured it out myself.
I created 2 buttons.
I wrapped one button into #guest and the other one into #auth and it worked for me.
#guest
<!-- Button trigger modal -->
<button type="button" class="buy-button" data-toggle="modal" data-target="#myModel">
Generate Security
</button>
#endguest
and
#auth
<button type="button" class="buy-button"
onclick="window.location='{{route('createCode',['code'=> 'dashboard']) }}';" >
Generate Security
</button>
#endauth
I want to edit in Modal, but the data does not come through to opgaveRet.blade.php containing Modal :-( Here is my code:
Can anyone help me to see what I am doing wrong?
// route.php
Route::resource('/admin/opgave', 'Admin\OpgaveController');
// OpgaveController.php
public function edit($id)
{
$tasks = Tasks::findOrFail($id);
return view('admin.opgaver.opgaveRet', ['tasks' => $tasks ]);
// also tried :-(:
//return view('admin.opgave', compact('tasks'));
}
// opgave.blade.php
#foreach ($opgaver as $opgave)
// here is a table, and then comes the Action
<a href="{{ route('opgave.edit', $opgave->id) }}"
data-toggle="modal"
data-target="#RetOpgave"
class="btn btn-primary btn-xs">Edit</a>
#endforeach
// in bottom of opgave.blade.php
// #include('admin.opgaver.opgaveRet')
<div class="modal fade" id="RetOpgave" tabindex="-1" role="dialog" aria-labelledby="RetOpgave">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="RetOpgave">Ret opgave</h4>
</div>
<div class="modal-body" >
#if(!empty($tasks))
// Here i want to build a FORM::
// But there is nothing in $tasks ???????
{{ dd($tasks) }}
#endif
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Luk</button>
</div>
</div>
</div>
</div>
You have to call the edit function in AJAX.
this one may help you:
https://tutorials.kode-blog.com/laravel-5-ajax-tutorial
I have this link where i open modal:
<li><i class="fa fa-times"></i></li>
And i have modal in seperate page modals.blade.php
<div class="modal fade modal_form" id="deleteProperty{{$property->id}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel5" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel5">Are you sure you want to delete this property?</h4>
</div>
<div class="modal-body">
<form method="POST" action="{{ route('user.property.delete',[$user->id,$property->id])}}">
<div class="form-group">
<div class="left-btn">
<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>
</div>
<div class="right-btn">
<button type="submit" class="btn btn-primary">Yes</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
How can i pass this parameter ($property->id) to modal so when user click on specific property, to delete that property?
You need to pass the variables you want to use in the included views.
Example:
#include('standardUser.includes.modals', [ "property" => $property ])