Would DataTables prevent custom modals to be shown?

Would DataTables prevent custom modals to be shown?

kuharcekkuharcek Posts: 5Questions: 1Answers: 0

Hi all,

I've implemented DataTables and I really love it, but is it possible that DataTables DOM manipulation causes my custom modals not to be shown after clicking a button?

I have Delete buttons which trigger custom modal display and prevent default actions until the user decides.
When landing on the page these work, but after pagination or filtering these actions are not triggered. The records simply gets deleted, which is really dangerous.

Am I doing something wrong?

thank you.
seba

This question has an accepted answers - jump to answer

Answers

  • kuharcekkuharcek Posts: 5Questions: 1Answers: 0

    I think I've localized this to pagination. After filtering, the modals work. After paginating, it doesn't.

  • kuharcekkuharcek Posts: 5Questions: 1Answers: 0

    I think this will solve my problems:
    http://stackoverflow.com/questions/34858738/datatables-jquery-click-event-not-working-after-pagination

    Will post here after I can confirm it.

  • allanallan Posts: 63,535Questions: 1Answers: 10,475 Site admin

    We'd need to be able to see your code to be able to understand what is causing the issue. Possibly you aren't using a delegated jQuery event?

    Allan

  • kuharcekkuharcek Posts: 5Questions: 1Answers: 0
    edited February 2017

    I apologize. Here's the code:

    var ConferenceForCancel = {};
    //Script for modal dialog for conference deletion
    $(document).ready(function() {
      $('.confDelConf').click(function(event){
        ConferenceForCancel.conference_form_id = this.id;
        event.preventDefault();
        document.getElementById('mod-dialog').style.display='block';
      });
    
      $('.mod-close').click(function(event){
        //event.preventDefault();
        document.getElementById('mod-dialog').style.display='none';
      });
    
      $('.mod-yes').click(function(event){
        //event.preventDefault();
        $('#ConfFormDel_' + ConferenceForCancel.conference_form_id).submit();
        document.getElementById('mod-dialog').style.display='none';
      });
    
      $('.mod-no').click(function(event){
        //event.preventDefault();
        document.getElementById('mod-dialog').style.display='none';
      });
    
    });
    

    After pagination the click event on '.confDelConf' is no longer triggered.
    However I think I need to change it to:

    $("#myTableId").on("click", ".confDelConf", function(event){
       // code
    });
    
  • allanallan Posts: 63,535Questions: 1Answers: 10,475 Site admin
    Answer ✓

    Yes, the change looks good to me. The jQuery docs about event delegation are good.

    If that isn't working, it suggests that there is no .confDelConf class element inside the myTableId element.

    Allan

  • kuharcekkuharcek Posts: 5Questions: 1Answers: 0

    I confirm that the specified change has solved my issue.
    Thank you for your confirmation.

This discussion has been closed.