6

I am using DataTable's with dynamic content generated on page load. In table I have used bootstrap confirmation. To load it below script. 

$( document ).ajaxStop(function() {
    $(document).find('[data-toggle="confirmation"]').confirmation();
});

It opens confirmation box, but when clicking on "Yes" or "No" , it's not working.

This is not working

I have below code to detect 'Confirmed' event. 

$(document).ready(function(){
    $(document).find('.delete-record').on('confirmed.bs.confirmation', function() {
        var thisEl = $(this);
        deleteForm($(this).attr('data-delid'));
    });
});

This is working

$(document).ajaxStop(function(){
    $(document).find('.delete-record').on('confirmed.bs.confirmation', function() {
        var thisEl = $(this);
        deleteForm($(this).attr('data-delid'));
    });
});

What's wrong with document.ready ?

enter image description here

Edit :

I have same code with document.ready working on other page, but there is no DataTable, it's HTML DIV structure.

shyammakwana.me
  • 5,562
  • 2
  • 29
  • 50

4 Answers4

9

Try changing your event binding slightly so it's bound for every existing and future .delete-record element using the alternate $.on syntax.

$(document).ready(function(){
    $('body').on('confirmed.bs.confirmation', '.delete-record', function() {
        deleteForm($(this).attr('data-delid'));
    });
});

Not knowing your page structure I opted to bind to body, but you can bind it to any parent element of your table.

temporalslide
  • 957
  • 6
  • 9
  • OMG ! How I forgot to use event-delegation? every time I use this, I just haven't noticed it. Thank you very much. It worked, I have bind it to `document` – shyammakwana.me May 09 '15 at 08:00
  • I seem to be having the same problem despite adopting the event binding suggested above. jQuery 1.11.2 and Bootstrap Confirmation 2.1.3 My jsfiddle https://jsfiddle.net/p98ajtbm/2/ – Martin Oct 27 '15 at 11:33
  • My issue was actually the popover not being displayed at all. Got it working by reinitiating the plugin after the new DOM is generated https://jsfiddle.net/apphancer/2vvgq6yw/ – Martin Oct 27 '15 at 14:43
  • my prob was slight diff, but `deleteForm($(this).attr('data-delid'));` this line turn on my bulb!!! :D :D Thank you so much. – Pran Dec 13 '15 at 14:13
0

I think it because the elements dynamically generated by dom manipulation after document ready

How about use .delegate instead of .ready ?

$(document).delegate('.delete-record', 'confirmed.bs.confirmation', function() {
    deleteForm($(this).attr('data-delid'));
});
shyammakwana.me
  • 5,562
  • 2
  • 29
  • 50
Lafif Astahdziq
  • 3,788
  • 29
  • 38
  • both are same, just version issue. in 1.4.3 delegate was there, but in versions above 1.7 `.delegate()` has been superseded by the `.on()` method. which is same as above correct answer. Though, thanks for pointing. – shyammakwana.me May 09 '15 at 08:20
0

a more simple solution: you have an initialization like

$('[data-toggle="confirmation"][data-target="service"]').confirmation({});

put this inside a function before $(document).ready(function(){}); and call it after the dynamic content is loaded

function confirm(){
    $('[data-toggle="confirmation"][data-target="service"]').confirmation({
        your options come here
    });
}
$(document).ready(function(){
    confirm();
});
Konya Istvan
  • 41
  • 1
  • 4
-3

The same problem...
Spend a little time to understand plugin!
It's very simple:

my_new_dynamic_element.on('confirmed.bs.confirmation', function(){alert('ok')}).confirmation();
סטנלי גרונן
  • 2,917
  • 23
  • 46
  • 68
Виктор Феликсович Янковский
  • 1