Howdy, I have the following function that uses jQuery "get" to perform an ajax call to an MVC controller.
function updateTables(firstMonth, getReduced) {
$.each([cContactType_Email, cContactType_SMS, cContactType_EmailSMS, cContactType_Telephone],
function(index, value) {
var toUpdate = $("#" + value);
$.get(gBaseUrl + "Communications/GetCommsTable", {
contactType: value,
firstMonth: firstMonth,
getReduced: getReduced
},
function(data) {
toUpdate.replaceWith(data);
}
) // get
} // array function
);
}
now with this i want to add a jQuery model dialog window that will show when the function is funning then close once the ajax has got a reply from the MVC controller, updated the interface then close the dialogue. I amended the code as such:
function updateTables(firstMonth, getReduced) {
var $dialog = $('<div id="dynamicDiv"></div>')
.html('Loading... <img src="../ajax-loader2.gif" alt="Loading" />')
.dialog({
bgiframe: false,
autoOpen: false,
draggable: false,
modal: true,
resizable: false,
show: 'slide',
height: 60,
closeOnEscape: false,
title: ''
});
$dialog.closest('.ui-dialog').css('background', '#c0c0c0');
$dialog.closest('.ui-widget-overlay').css('background', 'inherit');
$dialog.dialog('open');
$.each([cContactType_Email, cContactType_SMS, cContactType_EmailSMS, cContactType_Telephone],
function(index, value) {
var toUpdate = $("#" + value);
$.get(gBaseUrl + "Communications/GetCommsTable", {
contactType: value,
firstMonth: firstMonth,
getReduced: getReduced
},
function(data) {
toUpdate.replaceWith(data);
}
) // get
}
);
$.onreadystatechange = function(){$dialog.dialog('close');}
}
This doesn't work as the dialog doesn't seem to fire or is closed just after it's fired. Originally I used $dialog.dialog('close');
but then replaced this with $.onreadystatechange = function(){$dialog.dialog('close');}
Any one got any ideas on how to solve this?
Thanks