jQuery event sequence

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) { }
    });

}

Answers


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.


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

async: false

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.


Need Your Help

NSData to Java String

java objective-c cocoa string nsdata

I've been writing a Web Application recently that interacts with iPhones. The iPhone iphone will actually send information to the server in the form of a plist. So it's not uncommon to see somethin...

Using border-image on differing image sizes

html css css3

All the examples I've found for using border-image are of fixed x and y. Is there a way to have the border image compensate for different widths or heights, using percentage?