ajax loadend,jquery - Modal Forms - AjaxStart and End - .load and .ajax() calls

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 = $('

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!!