Show "Please wait" modal while function runs

Question

Hi. I'm trying to add a jQuery UI modal dialog to show when a function starts, which says "Please wait". Then have it close when the function is done. I've tried the following:

function flashFallback(){
  $('#dialog').dialog({
    modal:true,
    autoOpen:false
  });
  $("#dialog").dialog("open");

  /* Other code goes here... 

  */

  $('#dialog').dialog("destroy");
}

I know the function runs successfully but the dialog never closes. I also tried "close" instead of "destroy" with no luck. Help!

UPDATE: Here's the full function:

function flashFallback(){
    $('#dialog').dialog({
        modal:true,
        autoOpen:false
    });
    $("#dialog").dialog("open");

    var el = "";
    var vidFileName = "";
    var posterPath = "";
    var videoTag = "";
    var boxId = "";
    var so = "";
    var flashId = "";
    var flashVars = "";
    var params = "";
    var attributes = "";
    var anchorId = "";
    var dotPosition = "";

    $("[id^='vid-']").each(function(){
        el = "";
        vidFileName = "";
        posterPath = "";
        videoTag = "";
        flashId = "";
        flashVars = "";
        params = "";
        attributes = "";
        anchorId = "";

        el = $(this);

        boxId = this.id + "_flashBox";
        flashId = this.id + "_flashPlayer";
        anchorId = this.id + "_anchor";

        el.parent().parent().find("div:first").attr("id",boxId);

        el.parent().find("source").each(function(){
            if ($(this).attr("src").indexOf("m4v") != -1 || 
                $(this).attr("src").indexOf("mp4") != -1){
                vidFileName = $(this).attr("src").substring($(this).attr("src").lastIndexOf("/")+1);
            }
        });

        /*
            IE uses the Flash player, which overlays a 'Play' button
            on the poster image by default; so we use a poster image
            that doesn't have a play button. Otherwise we'd end up 
            with a play button on top of a play button.
        */

        dotPosition = el.parent().find("img").attr("src").lastIndexOf(".");
        posterPath = el.parent().find("img").attr("src").substring(0,dotPosition) + "-ie" + el.parent().find("img").attr("src").substring(dotPosition);

        el = $("[id="+boxId+"]");
        el.empty();
        el.append("<a id='" + anchorId +"'></a>");

        flashvars =
        {
            file:                 vidFileName,
            autostart:            'false',
            image:            posterPath
        };

        params =
        {
            allowfullscreen:      'true', 
            allowscriptaccess:    'always',
            wmode:            'opaque',

        };

        attributes =
        {
            id:                   flashId, 
            name:                 flashId
        };

        swfobject.embedSWF('global/vid/player-licensed.swf', anchorId, '372', '209', '9.0.124', 'global/js/swfobject/expressInstall.swf', flashvars, params, attributes);

    });
     $('#dialog').dialog("destroy");

}

Answer 1

Javascript is single threaded, so that function runs serially. It opens the dialog (but doesn't refresh the page yet), then runs your code and then then closes the dialog before re-painting the web-page.

What you need to do is open the dialog and run the function asynchronously, and when done you want to close the dialog.

Answer 2

I am not sure what your function is supposed to be doing or why it would take long enough that a 'Please Wait' modal would be needed so I am going to assume its some sort of request (AJAX, image loading, etc).

If that is the case, the destroy needs to be inside part of the callback of your function.