Menu
I am using Bootstrap 3 and Data Table 1.9. Modal is open when i click the anchor tag in the first page of the data table but I have a problem on showing Bootstrap modal after use the Data table Pagination. How to Resolve this. Here is my code
<html>
<body>
<table id=prodlist class="table table-bordered table-striped">
<thead>
<tr>
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td> <a href="http://localhost/admin/product/viewProduct/15" class="prod-view" data-target="#modal" data-toggle="modal">edit</a>
</td>
</tr>
<tr><td>
<a href="http://localhost/admin/product/viewProduct/15" class="prod-view" data-target="#modal" data-toggle="modal">edit</a>
</td></tr>
<tr><td>
<a href="http://localhost/admin/product/viewProduct/15" class="prod-view" data-target="#modal" data-toggle="modal">edit</a>
</td> </tr>
</tbody>
</table>
</body>
</html>
my javascript for datatable is
$(function() {
$("#prodlist").dataTable({
"bAutoWidth": false,
"aoColumnDefs": [{
"sWidth": "5%",
"aTargets": [0],
"bSearchable": false,
"bSortable": false,
"bVisible": true
}, ]
});
});
if ($(".alert-success, .alert-error").length > 0) {
setTimeout(function() {
$(".alert-success, .alert-error").fadeOut("slow");
}, 1000);
}
$(document).ready(function(){
$(".prod-view").click(function(){
var href = $(this).attr('href');
$( ".modal-body" ).load( href );
$('#myModal').modal('toggle')
});
});
879
The problem is that you by $(".prod-view").click() only initialises visible content, i.e the rows on page #1. dataTables injects and removes table rows to and from the DOM in order to show pages. So you must use a delegated event handler instead :
$("#prodlist").on("click", ".prod-view", function() {
var href = $(this).attr('href');
$( ".modal-body" ).load( href );
$('#myModal').modal('show') //<-- you should use show in this situation
});
But as suggested in comment, modals are not opt-in, you dont have to open them programmatically. As long as you have
<a href="#" data-target="#modal" data-toggle="modal">edit</a>
and a #modal on the page
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">This is a modal</h4>
</div>
<div class="modal-body">
<p>modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="submit">submit</button>
</div>
</div>
</div>
</div>
The modal will be initialised automatically, on all pages. See demo -> http://jsfiddle.net/9p5uq7h3/
If your only concern is the content of the modal, then simply
$('body').on('show.bs.modal', function() {
$(".modal-body").load(url/to/modal/template);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
