Question

I am working on an .NET MVC 3 project where I have made all the form based views load in a modal dialog using jQuery.

All of my views are loaded using ajax throughout the project.

I have a jQuery function I call for any link click event which fetches the given url (of a form based view like edit, add, etc) and displays it in a modal dialog as follows:

function getFormInModal(url_location, modalWidth, modaltitle, tab) {
    var url = url_location;
    var dialogDiv = $('<div style="display: none;"></div>').appendTo('body');
    dialogDiv.load(url, function () {
        //Enable the client side validation
        var $form = $('form', dialogDiv);
        $.validator.unobtrusive.parse($form);
        var buttons = {
            "Submit": function () {
                //Create a validation summary container
                var valSummary = ModalForms.validationSummary();
                valSummary.setup($form);
                if ($form.valid()) {
                    var postUrl = $form.attr('action');
                    var formData = $form.serialize();
                    jQuery.ajax({
                        url: postUrl,
                        type: 'POST',
                        data: formData,
                        complete: function (data) {
                            dialogDiv.dialog('close');
                            refresh(tab);
                            $.jGrowl("Submitted Successfully.", { life: 2000 });
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            var data = jQuery.parseJSON(jqXHR.responseText);
                            if (data && data.errors) {
                                valSummary.addErrors(data.errors);
                            }
                        }
                    });
                }
            },
            Cancel: function () {
                dialogDiv.dialog('close');
                $("html,body").css("overflow", "auto");
            }
        };
        //Load up the dialog
        dialogDiv.dialog({
            autoOpen: true,
            modal: true,
            title: modaltitle,
            draggable: false,
            resizable: false,
            buttons: buttons,
            width: modalWidth,
            close: function () {
                $(this).remove();
            },
            open: function (event, ui) {
                $("html,body").css("overflow", "hidden");
            }
        });
    });
}

My problem is in the success function of the submit button of the modal.

It does 3 things:
1. Closes the modal form dialog
2. Notifies the user that the POST was successful
3. Refreshes the content in a particular DIV via a call to another simple function refresh().

function refresh(tabname) {
    if (tabname == "dashboard") {
        $("#dashboard-tab").load("/Sales/Home/Reports");
        $("#tabs").tabs("select", 0);
    }
    if (tabname == "leads") {
        $("#leads-tab").load("/Sales/Lead/Index");
        $("#tabs").tabs("select", 1);
    }
    if (tabname == "retail") {
        $("#retail-tab").load("/Sales/Retail/Index");
        $("#tabs").tabs("select", 2);
    }
    if (tabname == "corporate") {
        $("#corporate-tab").load("/Sales/Corporate/Index");
        $("#tabs").tabs("select", 3);
    }
}

Now, separately I have hooked up some events on DOM ready which handle my ajax call status as follows:

$("#loading").dialog({
    autoOpen: false,
    modal: true,
    width: '450px',
    title: 'Patience is a virtue!',
    resizable: false,
    draggable: false
});

$("#loading").ajaxStart(function () {
    $("#loading").dialog('open');
    $("html,body").css("overflow", "hidden");
});

$("#loading").ajaxSuccess(function () {
    $("#loading").dialog('close');
    $("html,body").css("overflow", "auto");
});

$("#loading").ajaxError(function (event, jqXHR, ajaxSettings, thrownError) {
    $("#loading").dialog('close');
    $.jGrowl(html(thrownError.toString()), { life: 2000 });
});

Everything works perfectly –
– I click on a link
– I see the #loading modal dialog
– It loads and the #loading closes and the dialogDiv modal opens
– I click submit and the #loading opens up on top of the dialogDiv
– When it is done both close and i get the jGrowl notification

The final step which is the loading of the content again also happens, however once my POST is done, and the .load() call is made to refresh content the #loading modal does not show again.

Basically, .ajaxStart() is not firing. I do not know why.

First I had written an success function for the ajax post made in the submit button’s click event. Then I realized that complete might be better.

Even now, thou I am calling the refresh() and hence the .load() after the completion of the only other live .ajax() call, the .ajaxStart() is not working.

Can someone please HELP!!

Answer 1

The only thing I can see would be the current ajax request is still being processed when you call the refresh function, which is causing your ajaxStart method to not fire. Try editing your ready() method to add a beforeSend method to your ajax settings. I have found ajaxStart to always act weird, which is why usually the beforeSend is a little more reliable (imo).

$(document).ready({
   $.ajaxSetup({
      beforeSend: function()
      {
         $('#loading').open();
         $('html,body').css('overflow', 'hidden');
      }
   });
   /* Rest of your initialization here */
});

Hope this helps and will work for you.