Séquence d'événements jQuery

Question

J'ai un écran principal avec 2 parties une liste et une section détail. Via un bouton, j'ouvre un dialogue modal. Sur ce dialogue modal, 2 boutons un pour enregistrer et l'autre pour annuler. Après la sauvegarde, j'appelle une fonction pour rafraîchir la liste sur l'écran principal et fermer la boîte de dialogue. Le problème, parfois, la liste est actualisée avant la fin de la sauvegarde. Ensuite, je voudrais attendre la fin de l'enregistrement avant de rafraîchir la liste. Avez-vous une idée comment faire:

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

déplacer votre appel à refresh() au gestionnaire d'événements de succès de l'appel 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) { } 
     }) 

et je propose la fermeture de dialogue() là aussi. Cela fait en sorte que lorsque l'appel AJAX est complètement terminé (et qu'il réussit), il appelle l'actualisation et se ferme.

Answer 2

Le problème est que l'appel .ajax à/Customer/Save se produit de manière asynchrone. Pour le rendre synchrone, ajoutez cette option:

async: false 

Answer 3

async: false peut accrocher le ui parfois, la meilleure façon peut-être suggéré la voie dave. Pour déplacer le code à la fonction de succès, il s'assure que l'ajax est fait.