jQuery event sequence ....

Question

Hello,

I have a main screen with 2 parts a list and a detail section. Via a button, I open a modal dialog. On this modal dialog, 2 buttons one for save and the other for cancel. After the save, I call a function to refresh the list on the main screen and close the dialog. The problem, sometimes, the list is refresh before the end of the saving. Then I'd like wait the end of saving before refresh list. Do you have an idea how to do this :

$("#dialog-confirm").dialog({
    open: function (event, ui) {
        $('#FirstName2').focus(); 
    },
    beforeClose: function (event, ui) { RefreshList(); },
    close: function (event, ui) {
        $('#FirstName2').val('');
        $('#LastName2').val('');
    },
    resizable: false,
    height: 240,
    width: 300,
    modal: true,
    autoOpen: false,
    buttons: {
        "Sauvegarder": function () {

            $.ajax({
                type: "POST",
                url: "/Customer/Save",
                data: {
                    id: jsIdEmpty,
                    languageId: $('#Language2').val(),
                    firstName: $('#FirstName2').val(),
                    lastName: $('#LastName2').val(),
                    isEnable: $('#IsEnable2').attr('checked')
                },
                success: function (html) {
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) { }
            })

            $(this).dialog("close");
        },
        "Annuler": function () {
            $(this).dialog("close");
        }
    }

});


function RefreshList() {

    $.ajax({
        type: "POST",
        url: "/Customer/List",
        data: {
    },
    success: function (html) {
        $("#LeftColumn").html(html);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) { }
    });

}

Answer 1

move your call to Refresh() to the success event handler of your AJAX call:

        $.ajax({
            type: "POST",
            url: "/Customer/Save",
            data: {
                id: jsIdEmpty,
                languageId: $('#Language2').val(),
                firstName: $('#FirstName2').val(),
                lastName: $('#LastName2').val(),
                isEnable: $('#IsEnable2').attr('checked')
            },
            success: function (html) {
                RefreshList(); 
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) { }
        })

and I would move the dialog close() there as well. this makes it so that when the AJAX call has fully completed (and is successful), it will call the Refresh and close.

Answer 2

The problem is that the .ajax call to /Customer/Save is happening asynchronously. To make it synchronous, add this option:

async: false

Answer 3

async : false may hang the ui sometimes , the best way might be the way dave suggested. To move the code to success functiona and it ensures that ajax is done.