Search code examples
jqueryajaxtwitter-bootstrapdatetimepicker

Bootstrap 3 datetimepicker doesn't trigger after container is get by ajax


I'm using bootstrap 3 datetimepicker component. I'm using construction:

$('.datetimepickerbutton').datetimepicker({
    format: 'DD.MM.YYYY'
});

And it's working fine, until I will send content by ajax. Ajax form is inside .myDate div and it's targer id. How should I use jquery's "on" method to has my code working for ajax also? Im' tried use:

$(".dataPoczatku").on("load", function () {
    $('.datetimepickerbutton').datetimepicker({
        format: 'DD.MM.YYYY'
    });
});

But now my datetime picker never is showing....

My question look like analogic to topic Get Bootstrap datetimepicker to work after ajax loaded but all my stript links are in head and it didn't help in this case.


Solution

  • Why don't you initialize datepicker after ajax success. Like following instance:

    $.ajax({
      url: "test.html",
      context: document.body
    }).done(function() {//success function now you can initialize datepicker
      $('.datetimepickerbutton').datetimepicker({
        format: 'DD.MM.YYYY'
      });
    });
    

    If your ajax call happening more then one times then you might have to use $('.datetimepickerbutton').datetimepicker('remove'); before initialize. I suggest you to use ID instead of Class(.datetimepickerbutton), so that it will effect only specific element.