All geek questions in one place

Bootstrap modal not showing after using pagination from datatable

I am using Bootstrap 3 and data table 1.9. The modal is open when I click the anchor tag on the first page of the data table, but I have a problem displaying Bootstrap modal after using the Pagination data table. 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

 $(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') }); });
+6
source share
1 answer

The problem is that you $(".prod-view").click() only initializes the visible content, that is, the rows on page # 1. dataTables inserts and deletes table rows in the DOM and from the DOM to display the pages. So you should use a delegated event handler:

 $("#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 the commentary, modals are not included in the system, you do not need to open them programmatically. While 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">&times;</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 automatically initialized 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); });
+8
source

Source: https://habr.com/ru/post/988463/

More articles:


All Articles