Question

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.