последовательность событий jQuery

Question

У меня есть главный экран с 2 частями - списком и подробным разделом.Через кнопку я открываю модальное диалоговое окно.В этом модальном диалоговом окне 2 кнопки: одна для сохранения, а другая для отмены.После сохранения я вызываю функцию, чтобы обновить список на главном экране и закрыть диалоговое окно.Проблема, иногда, в обновлении списка до окончания сохранения.Тогда я бы хотел дождаться окончания сохранения перед обновлением списка.У вас есть идея, как это сделать:

$("#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

переместите ваш вызов в Refresh () в обработчик события успеха вашего AJAX-вызова:

        $.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) { }
        })

и я бы тоже переместил диалог close (). это делает так, что когда вызов AJAX полностью завершен (и успешен), он будет вызывать Обновить и закрывать.

Answer 2

async: false иногда может повесить пользовательский интерфейс, лучшим способом может быть способ, предложенный Дейвом. Чтобы переместить код в успешный функционал и он гарантирует выполнение ajax.

Answer 3

Проблема в том, что вызов .ajax в / Customer / Save происходит асинхронно.Чтобы сделать его синхронным, добавьте эту опцию:

async: false