Question

I have a jquery confirmation dialog. When the user presses OK I execute an Ajax call that will take a few seconds. During this delay I want to display on the dialog a gif animation so the user knows we are processing their data. However, I cannot seem to get the gif to appear in the dialog.

The html is :

<div id="dlgReleaseConfirmation" title="ConfirmRelease" style="display : none"  >
    <div id="release-in-progress" style="display:none">
            <img src="images/ajax-loader.gif" ></img>
    </div>
</div>

The code in the js file is:

       $("#dlgReleaseConfirmation").dialog({
        modal: true,
        buttons: {
            "Release": function () {
                $("#release-in-progress").show();       // show the busy div - not working, blocked by dialog?
                Release();   // release assays
                loadTable();           // refresh datatable
                $("#release-in-progress").hide();       // hide the busy div
                $(this).dialog("close");    // close this dialog
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }

Can anyone see what I am doing wrong?

Update with solution.

Alexander sent me down the correct road. The bottom line is that you have to do the Ajax calls async so the dialog is updated to show the busy indicator. But, if just do this then the issue becomes that the code will continue and close the screen while the ajax calls proceed async thus providing the user no feedback.

To fix this I added calls to ajaxStart() and ajaxStop() to hide and show the busy indicator while the async Ajax calls where proceeding. Here is the release button handler code that works:

"Release": function () {
    $(this).ajaxStart(function () {
        $("#release-in-progress").show();   
    });
    $(this).ajaxStop(function () {
        $("#release-in-progress").hide();
        $(this).dialog("close");    // close this dialog
    });
    Release();   // release assays
    loadTable();           // refresh datatable
 };

Answer 1

By executing a synchronous AJAX call (async: false) in the loadTable() function you are freezing the execution until the request is completed and the image resource is not being loaded. You need to use an asynchronous call to achieve what you want.