ASP.NET MVC 3 Jquery Modal Popup - Display Loading Icon

Question

Folks,

I have ASP.NET MVC 3 Application and I have the following JQuery script below to show modal pop up windows. The following script is able to show modal dialog. However, I would like to load loading icon while the modal dialog is opening. do you have any idea how can I do it?

<%= Html.ActionLink("Details", "ProductShipping", "OnlineStore", new { ProductGUID = Html.Encode(Model.GUID) }, new { @class = "EditShippinglink", title = "Edit Product Shipping", data_dialog_id = "EditProductShipping", data_dialog_title = "Shipping Method" })%>

JQuery

$(".EditShippinglink").live("click", function (e) {
            $.ajaxSetup({ cache: false });
            e.preventDefault();
            var $loading = $('<img src="/Content/ajax-loader.gif" alt="loading" class="ui-loading-icon">');
            $("<div></div>")
                    .addClass("dialog")
                    .attr("id", $(this)
                    .attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        width: 900,
                        modal: true,
                        minHeight: 500,
                        show: 'fade',
                        hide: 'fade',
                        resizable: 'false'
                    })
                    .load(this.href);
        });

Answer 1

Set the initial HTML of the modal dialog to be what you want to show until the ajax request completes and changes the content of the popup's window.

Rather than having an empty div to start with, $('<div></div>'), use a div that is loaded with the html you want to show while the load is occurring.

@Html.ActionLink("Item Details", "Details", "Home", new { id = 1 }, new { @class = "EditShippinglink", title = "Edit Product Shipping", data_dialog_title = "Shipping Method" })
<div id="my-dialog" style="display:none;">
    <div id="my-dialog-content"></div>
    <div id="my-dialog-progress" style="display:none;"><img src="@Url.Content("~/Content/ajax-loader.gif")" alt="loading" class="ui-loading-icon"></div>
</div>

<script type="text/javascript">
    var theDialog = $('#my-dialog').dialog({
        autoOpen: false,
        modal: true,
        closeOnEscape: false,
        width: 900,
        modal: true,
        minHeight: 500,
        show: 'fade',
        hide: 'fade',
        resizable: 'false'
    });
    var myDialogProgress = $('#my-dialog-progress');
    var myDialogContent = $('#my-dialog-content');
    $(".EditShippinglink").on("click", function (e) {
        $.ajaxSetup({ cache: false });
        e.preventDefault();

        myDialogProgress.show();
        theDialog.dialog('open');
        theDialog.dialog('option', 'title', $(this).attr("data-dialog-title"));

        //clear content before showing again
        myDialogContent.html('');

        $.ajax({
            type: 'get',
            url: this.href,
            dataType: 'html',
            error: function (jqXHR, textStatus, errorThrown) {
                //do something about the error
            },
            success: function (data) {
                //hide the progress spinner and show the html
                myDialogProgress.hide();
                myDialogContent.html(data);
            },
            complete: function () {
                //do some other completion maintenance
            }
        });
    });

</script>

Then when the dialog is shown but still waiting for the load to complete, the loading gif will be shown. Once the operation is complete, the load will overwrite the animated loading gif html.