views:

24

answers:

0

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