Answers

• allan Posts: 63,534Questions: 1Answers: 10,475 Site admin

  February 2016

  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
• shinyhoundoom Posts: 3Questions: 1Answers: 0

  February 2016

  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.
• allan Posts: 63,534Questions: 1Answers: 10,475 Site admin

  February 2016 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
• shinyhoundoom Posts: 3Questions: 1Answers: 0

  February 2016 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.
  });
  
• allan Posts: 63,534Questions: 1Answers: 10,475 Site admin

  February 2016

  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