DataTables not initialising correctly with Bootstrap modals

Question

I'm having two problems with DataTables and Bootstrap modals.

Can't use dynamically built buttons after page 1

(Solved by Yuri)

I have this table, It is built dynamically by an AJAX request, the data loads correctly and builds up the table as it should, the buttons 'Manage' and 'Delete' have classes set on them, when clicked it should open another modal on top of the current one, on the 1st page of the table it works fine, if I go to page 2 it doesn't action anything as if there is no listener on it.

Datatables not initialising on the 2nd modal (Could be related to issue 1)

I have the below jQuery to initialise another DataTables on the modal that the 'Manage' button should open up. When it does open it should initialise another DataTables and get data from the AJAX request but in my network tab in Chrome developer tools it isn't being ran.

I have discovered the problem is, the DataTables isn't being initialized for some reason? the jQuery works up to there I can't understand what I'm doing wrong here?

$(document).ready(function(){

      $('.valid-tags').on('click', '.manageAutofixes', function(){
          $('.autofixes-modal').modal('show');
          $('.autofixes-modal').on('shown.bs.modal', function () {
            var table = $('.autofixes-table').DataTable({
                "ajax": {
                  "url": "/ajax/getValidTags.php",
                  "type": "POST",
                  "data": {
                    ruleID: ruleID,
                    type: 'autofixes'
                  },
                },
                "columnDefs": [{
                   "targets": 2,
                   "render": function(data, type, full, meta){
                      return '<button class="btn btn-default btn-sm manageAutofixes" type="button">Manage</button> <button class="btn btn-danger btn-sm deleteValid">Delete</button>';
                   }
                }],
                destroy: true     
            });         
          })    
      })


    });

My modals HTML (included on the page)

 <div class="modal fade autofixes-modal" tabindex="-1" role="dialog" aria-labelledby="LargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

    <div class="modal-dialog modal-wide">

        <div class="modal-content">

            <div class="modal-header modal-header-custom">
            <input class="ruleID" type="hidden"></input>     
                <button type="button" class="close destroyTable" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title">Autofixes</h4>
            </div>

            <div class="modal-body">
            <div class="topBar">                       
                <div>
                    <input type="text" class="autofix inputTextStyling">                    
                </div>
            </div>
            <hr>
                <table class="table table-striped table-condensed autofixes-table" style="width:100%;">
                    <thead>
                        <tr>
                            <th>Autofix</th>
                            <th>Manage</th>
                        </tr>
                    </thead>
                    <tbody class="autoFixesTable">
                    </tbody>                    
                </table>                           
            </div>
            <div class="modal-footer">                
                <button type="button" class="btn btn-default destroyTable" data-dismiss="modal">Close</button>
            </div>

        </div>

    </div>

</div>

@Yuri The modal is in the same page, it is in its own file to keep the page clean. — Kieron606
– Kieron606, Commented Apr 12, 2016 at 12:07
You include it at load time or make an ajax request to fill the modal container? — Yuri
– Yuri, Commented Apr 12, 2016 at 12:08

Yuri · Accepted Answer · 2016-04-12 13:06:59Z

4

To solve you buttons' problem, just use this kind of delegation:

$('#datatable').on('click', '.btn_class', function(){...});

It will match any click event occurring inside #datatable container on .btn_class elements, and it will solve your issue for dinamically added elements.

For what concerns Datatable inside your modal, I usually solve this by using a remote modal. That means that you put both your <div class="modal-body">..</div> html code and the relative JS code (that code to init the Datatable) on a (php) file, and load it with:

$("#myModal").on("show.bs.modal", function(e) {
    var link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
});

EDIT: Remember to use $(document).ready(); in your remote php file too, so that code will run only when modal-body is fully loaded

edited Apr 12, 2016 at 13:06

answered Apr 12, 2016 at 12:11

Yuri

3,3043 gold badges30 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Kieron606 Over a year ago

Thanks Yuri, this fixed the buttons part. The only problem is that its opening one modal as it should but then one behind the modal with the buttons on, so it goes when the 'manage' button is clicked, it opens the correct modal, I close this modal, close the modal with the 'manage' buttons on and there is the 'correct' modal again?

Yuri Over a year ago

I don't understand. It opens twice?

Kieron606 Over a year ago

Okay the modal structure goes like this - Modal 1 , Modal 2, Modal 3. When I click modal 1, modal 2 opens. When I click modal 2 'manage', modal 3 opens. When I close modal 3 and modal 2, another modal 3 is under them.

Yuri Over a year ago

You have to keep only one <div class="modal">...</div> in your code, and load everything inside it, so give same data-target="#myModal" to all your buttons and just work with different href attr. By doing so, you are sure that you wont have more than one modal at a time

Kieron606 Over a year ago

I am only using one modal.

|

Nan1488 · Accepted Answer · 2016-04-12 13:20:21Z

1

The problem is that the buttons for the page 2 are loaded after you bind the action "click". You have to re-bind the action each time you load the results(by ajax)

you can use the datatable option fnDrawCallback

fnDrawCallback: function( oSettings ) {
  $('.manageAutofixes').on('click', function(){
      $('.autofixes-modal').modal('show');
      alert('hi');
  }
}

answered Apr 12, 2016 at 13:20

Nan1488

2093 silver badges6 bronze badges

Collectives™ on Stack Overflow

DataTables not initialising correctly with Bootstrap modals

2 Answers 2

15 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related