Bootstrap Confirmation only firing events on first datatables page

Bootstrap Confirmation only firing events on first datatables page

shinyhoundoomshinyhoundoom Posts: 3Questions: 1Answers: 0
edited February 2016 in Free community support

I'm having an issue when using DataTables alongside the Bootstrap confirmations. (found here: http://mistic100.github.io/Bootstrap-Confirmation/ ) Basically, I initiate the confirmations and the table on document load, and everything works fine on the first page of the datatable. However, after the first page, the confirmations still work visually, but no events (onConfirm/onCancel) ever fire.

This is fairly simple to replicate. With all the necessary js included, simply make a datatable that extends for a few pages. In each row, put something like this:

<button class="update-button" data-toggle="confirmation" data-btn-ok-label="Resume"><i class="fa fa-play"></i></button>

And in your onload jquery, something like this:

$("[data-toggle=confirmation]").confirmation({container:"body",btnOkClass:"btn btn-sm btn-success",btnCancelClass:"btn btn-sm btn-danger",onConfirm:function(event, element) { alert('triggered'); }});

At first I thought it might be an issue with the load function not being called at all on elements past the first page, so I did this to call the initialization function any time the page was changed:

$('#tableid').on('page.dt', function() {
        setTimeout(
            function() {
                $("[data-toggle=confirmation]").confirmation({container:"body",btnOkClass:"btn btn-sm btn-success",btnCancelClass:"btn btn-sm btn-danger",onConfirm:function(event, element) { alert('triggered'); }});
            }, 500);
    });

To no avail. Has anyone had similar issues? This is pretty majorly limiting functionality for my setup, so I'd like to get it resolved.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 52,498Questions: 1Answers: 8,012 Site admin

    See second top FAQ. If Bootstrap doesn't have the option of a delegated event, then try using rows().nodes() to get all rows from the table and then apply the plug-in to that.

    Allan

  • shinyhoundoomshinyhoundoom Posts: 3Questions: 1Answers: 0

    I just did some more tampering with your suggestions, allan.

    I tried applying a click event handler to a specific class I pass to the 'btnOkClass' parameter for the confirmation plugin. However, this event is not attached at all on confirmation buttons after the first datatables page, as evidenced by the visual event tool. (which, speaking of, I will get a ton of use out of, thanks for pointing me in that direction)

    It seems as though the buttons created are not triggering any custom event handlers at all. This isn't a huge deal, at least for the first page, because the 'onConfirm' parameter works just fine. But after the first page the confirm action just stops being sent. The plugin initializes the confirmation elements just fine and they get the correct classes, etc. as expected. All that is different is that they don't fire the confirm event.

  • allanallan Posts: 52,498Questions: 1Answers: 8,012 Site admin
    Answer ✓

    What you could do perhaps is use a delegated event handler:

    $('#myTable').on( 'click', '.confirmation', function () {
      $(this).confirmation(options);
      $(this).confirmation( 'show' );
    } );
    

    It doesn't appear to have a built in delegated option itself, which I think is a feature that would be useful to be added to that library.

    Allan

  • shinyhoundoomshinyhoundoom Posts: 3Questions: 1Answers: 0
    edited February 2016

    I'd like to start off by saying thanks a ton for your help. I actually learned quite a bit from resolving this issue.

    As it turns out, it wasn't that the onConfirm from the Bootstrap confirmations wasn't firing. It was that the confirm event I was pointing to wasn't being attached to the parent button when switching datatables pages. By using delegated events to apply the event to the table itself and then checking for the confirm class, I was able to catch the event and everything is functioning as expected now.

    Thank you again for your help. I look forward to using delegated events in my projects in the future. Until now I had no idea they existed and thought that the direct events worked fine in every scenario.

    Also, thank you for pointing me to the FAQ page which directed me towards the visual event tool, which I will now be using very often in my projects.

    For anyone finding this thread in the future, here is some code to reference. The button:

    <button class="update-button" data-toggle="confirmation" data-btn-ok-label="Pause"><i class="fa fa-pause"></i></button>
    

    The onload Bootstrap confirmation initialization:

    $("[data-toggle=confirmation]").confirmation({container:"body",btnOkClass:"btn btn-sm btn-success",btnCancelClass:"btn btn-sm btn-danger",onConfirm:function(event, element) { element.trigger('confirm'); }});
    

    Which needs to be run again every time the table is either reordered or changed to a different page due to how the datatables plugin interacts with the dom:

    $('#statstable').on('page.dt', function() {
      setTimeout(
        function() {
          $("[data-toggle=confirmation]").confirmation({container:"body",btnOkClass:"btn btn-sm btn-success",btnCancelClass:"btn btn-sm btn-danger",onConfirm:function(event, element) { element.trigger('confirm'); }});
        }, 500);
    });
    
    $('#statstable').on('order.dt', function() {
      setTimeout(
        function() {
          $("[data-toggle=confirmation]").confirmation({container:"body",btnOkClass:"btn btn-sm btn-success",btnCancelClass:"btn btn-sm btn-danger",onConfirm:function(event, element) { element.trigger('confirm'); }});
        }, 500);
    });
    

    And then the 'confirm' event handler for the original button, which needs to be delegated rather than direct:

    $('#statstable').on('confirm', '.update-button', function() {
      //Ajax, etc.
    });
    
  • allanallan Posts: 52,498Questions: 1Answers: 8,012 Site admin

    Fantastic - really pleased to hear you have a solution for this and thanks for posting your solution.

    I wish that plug-ins would offer a delegated initialisation as standard - it would really help with a lot of dynamic pages (not just DataTables), but because using static data-* selectors is the method that is used in the Bootstrap documentation I'm not holding out too much hope.

    Instead, everyone can refer to your above solution :-)

    Allan

This discussion has been closed.