Level 51
- Get id with jQuery
- Pass it to controller via Ajax
- Get your result back
2 likes
Jun 3, 2016
52
Level 1
How to get dynamic data in bootstrap modal?
Hello, I am developing an app which requires options like view, edit and delete details. So for viewing details I am using bootstrap modal to show the details. The problem is how to display data in to bootstrap modal according to id. Thanks in advance.
Level 1
@tomo_pongrac Any example with code?
Level 51
Post your code so i can see what exactly you need
In this link you have some example with code...
Level 1
@tomo_pongrac I am displaying table using for loop to display 4-5 fields from all the fields. When user clicks on "View All Details" modal should open and it should display all the data specific to that ID. Code:
<table class="table no-margin text-center">
<thead>
<tr>
<th>Society ID</th>
<th>Society Name</th>
<th>Address</th>
<th>Secretary Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach($societydetails as $sd)
<tr>
<td>{{ $sd->societyid }}</td>
<td>{{ $sd->societyname }}</td>
<td>{{ $sd->address }}</td>
<td>{{ $sd->secretaryname }}</td>
<td><button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#societydetails">View All Details</button></td>
</tr>
@endforeach
</tbody>
</table>
And basic modal code to display data
<div class="modal-body">
<!-- <p>One fine body…</p> -->
<table class="table table-striped">
<tr>
<td>Society ID</td>
<td >Example</td>
</tr>
<tr>
<td>Society Name</td>
<td >Example</td>
</tr>
.... some other data also
</table>
</div><!-- modal body -->
Level 15
Looks like a good use case for vuejs/vue
3 likes
Level 51
Try this
data-target-id - id from database
"/controller/ " + id ... you controller which returns html controller must return view. View is what is inside the .modal-body and controller must return in this format
$returnHTML = view('modal-body-view',[' variable_name'=> $variable_name])->render();
return response()->json( 'html'=>$returnHTML);
I hope that will be work ... i did't tested
<script>
$(document).ready(function(){
$("#myModal").on("show.bs.modal", function(e) {
var id = $(e.relatedTarget).data('target-id');
$.get( "/controller/" + id, function( data ) {
$(".modal-body").html(data.html);
});
});
});
</script>
your view
<table class="table no-margin text-center">
<thead>
<tr>
<th>Society ID</th>
<th>Society Name</th>
<th>Address</th>
<th>Secretary Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach($societydetails as $sd)
<tr>
<td>{{ $sd->societyid }}</td>
<td>{{ $sd->societyname }}</td>
<td>{{ $sd->address }}</td>
<td>{{ $sd->secretaryname }}</td>
<td><button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target-id="1" data-target="#myModal">View All Details</button></td>
</tr>
@endforeach
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Level 56
How would you dynamically change the content of a html div? Wel, it is exactly the same with a modal, you just have to open it at the end.
Level 48
Take a look at the example from the documentation.
2 likes
Level 1
@tomo_pongrac Hey thanks for this much help. Can you just tell me about the controller part.
Level 65
Bet you can't wait until v4 comes out with model data support ;) http://v4-alpha.getbootstrap.com/components/modal/#varying-modal-content-based-on-trigger-button
Level 80
@bashy That’s not new to v4, you can already do that with Bootstrap 3 modals: http://getbootstrap.com/javascript/#modals-related-target
Level 51
you need to create normal controller with the information that you want to display only with the difference that you return json format ...
Level 65
@martinbean Ah they added that in, nice :)
Level 1
@tomo_pongrac I tried your code but getting this error: http://prntscr.com/bcxohx for
$returnHTML = view('modal-body-view',[' variable_name'=> $variable_name])->render();
return response()->json( 'html'=>$returnHTML);
Level 51
Try this approach
$view = View::make('author_view', ['name' => 'Arjun']);
$contents = $view->render();
// or
$contents = (string) $view;
but then in javascript you must write
$(".modal-body").html(data);
Level 1
@tomo_pongrac That worked but can u tell me what to write in
$.get( "/controller/" + id, function( data )
This "/controller/" url?
Level 51
there you put route link which will generate html for ajax call
Level 1
@tomo_pongrac This is proper?
$.get( {{ route('viewmodal',$sd->societyid) }}, function( data )
Because in modal nothing is coming.
Level 51
No, because that is javaScript so you can use laravel functions. You must manually write link without id because id is generated by javaScript
Level 1
@tomo_pongrac Ok I added the link manually but still the modal body is empty.
<script>
$(document).ready(function(){
var base_url = window.location.origin;
$("#societydetails").on("show.bs.modal", function(e) {
var id = $(e.relatedTarget).data('target-id');
$.get(base_url + '/admin' + '/society/' + id, function( data ) {
$(".modal-body").html(data);
});
});
});
</script>
Level 51
Try this
<script>
$(document).ready(function(){
var base_url = window.location.origin;
$("#societydetails").on("show.bs.modal", function(e) {
var id = $(e.relatedTarget).data('target-id');
$.get('/admin/society/' + id, function( data ) {
$(".modal-body").html(data);
});
});
});
</script>
And you can open console and look if shows some errors https://developer.chrome.com/devtools/docs/console
Level 1
@tomo_pongrac I tried your code also and mine also. Both give me 500 internal server error in console.
Level 51
Can you post link for ajax call which you can see in console
I think that you have php error in controller...
Level 1
@tomo_pongrac Here is the code for controller:
public function viewmodal($societyid)
{
$view = View::make('admin.modalview', ['societyid'=> $societyid]);
$contents = $view->render();
}
and here is the error in console: http://prntscr.com/bcymjz
Level 51
@ jeetdholakia
Does the "KPCP" is valid societyid?
in view you have attribute data-target-id="societyid"
Level 1
@tomo_pongrac Ya its a valid society id. in data-target-id="{{ $sd->societyid }}" I am getting value from database.
Level 51
And you have route
Route::get('admin/society/{id}', 'Controller@viewmodal');
You can try for test open link localhost:8000/admin/society/KPCP
where you modigy controller
public function viewmodal($societyid)
{
return view('admin.modalview', ['societyid'=> $societyid]);
}
Level 1
@tomo_pongrac If I open localhost:8000/admin/society/KPCP it gives me blank page with nothing on it. The routes and controller are exact same like you have mentioned.
Level 51
then it looks like view is not correct
Also, now i see that you must create $sd object in controller something like this (where Society is name of you model)
public function viewmodal($societyid)
{
$sd = Society::find(societyid);
return view('admin.modalview', ['sd'=> $sd]);
}
Level 1
@tomo_pongrac I changed the controller code according to the above mentioned code by you, still the modal shows no data and I am getting following internal server error: http://prntscr.com/bcyzxf modalview.blade.php:
<table class="table table-striped">
<tr>
<td>Society ID</td>
<td></td>
</tr>
<tr>
<td>Society Name</td>
<td></td>
</tr>
</table>
PS: I am sorry for asking this much and thanks a lot for helping me.
Please or to participate in this conversation.