Question

So I have built a custom dialog JQuery Plugin, but am having issues with the callback function.
I am trying to reload the page after the dialog closes, but my problem is the page reloads pretty much right away, so I only see the dialog for a split second, when it should actually be displayed for 5 seconds before fading away.
Any ideas what I am doing wrong? I want the message to fade out prior to the page reloading.

Here is my call to the plugin:

    $('.messages').myPlugin({
        'message' : 'Testing'
},function(){location.reload()})

And Here is the plugin script:

(function( $ ){

$.fn.myPlugin = function( options, callback ) {  
    if (typeof callback == 'function') { // make sure the callback is a function
            callback.call(this); // brings the scope to the callback
    }
    var settings = {
        //DEFAULT OPTIONS
        ...OPTIONS IN HERE....

    };
    if ( options ) { 
        $.extend(settings, options);
    };
    return this.each(function() { 
         .....BUILD THE DIALOG....
    });
    return this;//Leave this to allow chaining
};

})
( jQuery );

Answer 1

The plugin init code calls the provided callback immediately. It’s this line:

callback.call(this);

If you still don’t understand why/how the callback is being called, use a debugger to put a breakpoint inside of the callback and step through the code — look at the call stack and it should be pretty clear.