"Open" callback executing too fast

Question

I'm using MagnificPopup to popup a form. The form has datepicker fields. However, the code to invoke datepicker on the date fields in my main page doesn't apply to the date fields in the external popup form as it isn't in the DOM on page load:

$(function(){
   $(".datepicker").datepicker();
}

To circumvent this I added the code to invoke datepicker on the date fields in the "open" callback of the MagnificPopup:

$('#myForm').magnificPopup({
    type: 'ajax',
    preloader: false,
    // add callback so we can apply datepicker to date fields
    callbacks:{
        open: function(){
            $(".datepicker").datepicker();  
        }   
    }
});

However, the "open" callback seems to be running too fast, before the popup is fully open. The datepicker functionality is not applying to the fields. However, when I walk through the code with a debugger, it slows it down enough for the datepicker code to actually apply. Similarly, if I add an alert to the callback function, the datepicker code runs properly.

I can code around this by adding a small delay using setTimeOut:

open: function(){
    window.setTimeout(function() {
       $(".datepicker").datepicker();
    }, 800);
}

But this feels hacky. Is there any straightforward way to accomplish this? (I don't see an "afterOpen" callback in the MagnificPopup docs)

Answer 1

There is ajaxContentAdded for that http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax-type