Attendez Appel AJAX (POST) pour Terminer

Je suis à l'aide de jQuery UI tabs où chaque onglet a une forme différente. Après que l'utilisateur entre de divers morceaux de données, de soumettre l'ensemble des onglets de sorte que chaque onglet messages sur le serveur de façon asynchrone. Cela fonctionne bien, et je n'ai pas de problèmes ici.

Cependant, lorsque je rencontre un problème, c'est que, la dernière forme que je poste doit arriver APRÈS tous les autres postes complète. Idée générale est comme ceci:

postForm(0, "#Form1");
postForm(1, "#Form2");
postForm(2, "#Form3");
postForm(3, "#Form4");
$.post('Project/SaveProject', function (data) {
    $('<div class="save-alert">The current project has been saved.</div>')
    .insertAfter($('#tabs'))
    .fadeIn('slow')
    .animate({ opacity: 1.0 }, 3000)
    .fadeOut('slow', function () {
        $(this).remove();
    });
});

La postForm fonction n'est un peu de traitement, puis fait une requête AJAX $.appel post. Le dernier $.post effectué ici ('Projet/SaveProject') doit attendre jusqu'à ce que les autres postes sont terminés. Quelle est la meilleure façon de faire?

OriginalL'auteur JasCav | 2010-09-14

  1. 15

    Vous pouvez simplement utiliser le .ajaxStop() événement qui se déclenche quand tous les autres AJAX Postes de finition, en supposant que vous êtes en train de faire aucune autre AJAX à travailler, comme ceci:

    postForm(0, "#Form1");
postForm(1, "#Form2");
postForm(2, "#Form3");
postForm(3, "#Form4");
$(document).ajaxStop(function() {
  $.post('Project/SaveProject', function (data) {
    $('<div class="save-alert">The current project has been saved.</div>')
    .insertAfter($('#tabs'))
    .fadeIn('slow')
    .animate({ opacity: 1.0 }, 3000)
    .fadeOut('slow', function () {
      $(this).remove();
    });
  });
  $(this).unbind('ajaxStop');
});

    .ajaxStop() se déclenche lorsque tous requêtes AJAX qui sont en cours d'exécution complet, donc ça va se déclenche uniquement lorsque tous de ces Postes sont de retour, jQuery conserve un nombre en interne ($.active, $.ajax.active en jQuery 1.5) pour determind comment simultanément un grand nombre de requêtes AJAX sont en circulation...quand il sera de retour à 0 cet événement se déclenche.

    Cette approche vous permet de faire les autres soumissions de formulaire simultanément, et faire la forme finale le plus tôt possible après.

    Merci pour la mention de $.ajax.active en jQuery 1.5!

    OriginalL'auteur Nick Craver

  2. 5

    Vous pouvez toujours faire tous les messages synchrone en utilisant quelque chose comme

    
$.ajax({
   type: "POST",     
   async: false,
   url: "",
   ...

    bien sûr, il ne sera pas aussi vite, mais il n'résoudre votre problème si $(document).ajaxStop n'est pas une option

    Ce n'est pas vraiment fonctionne plus, il renvoie ce message: "Synchrone XMLHttpRequest sur le thread principal est déconseillée en raison de ses effets néfastes pour l'expérience de l'utilisateur final."

    OriginalL'auteur Nick

  3. 2

    Rappels:

    Définir postForm de prendre un rappel:

    function postForm(ind, id, callback)
{
  //...
  $.post(url, function()
  {
    //...
    callback();
  });
}

    Puis faire quelque chose comme ci-dessous. Vous pouvez utiliser la récursivité de l'écrire dans un moins codés en dur, ce qui peut être particulièrement utile si il y a plus de formes.

    postForm(0, "#Form1", function()
{
    postForm(1, "#Form2", function()
    { 
        postForm(2, "#Form3", function()
        {
            postForm(3, "#Form4", function()
            {
                $.post('Project/SaveProject', function (data) {
                    $('<div class="save-alert">The current project has been saved.</div>')
                        .insertAfter($('#tabs'))
                        .fadeIn('slow')
                        .animate({ opacity: 1.0 }, 3000)
                        .fadeOut('slow', function () {
                            $(this).remove();
                        });
                });
            });
        });
    });
});
    Merci pour la réponse. J'avais initialement envisagé, mais a ensuite décidé qu'il était un peu trop lourd pour travailler avec. (+1)

    OriginalL'auteur Matthew Flaschen

  4. 0

    Le problème avec ajaxStop est qu'il aura le feu à chaque fois d'ajax est fait. Une alternative est la mise en œuvre de votre propre méthode de la pile comme ceci:

    var stack = []
postForm(var1, var2){
    stack.push(1);
    //Do postForm stuff
    stack.pop();
    if (stack == undefined){
        //Call the last post method
    }
}
postForm(0, "#Form1");
postForm(1, "#Form2");
postForm(2, "#Form3");
postForm(3, "#Form4");
$.post('Project/SaveProject', function (data) {
    $('<div class="save-alert">The current project has been saved.</div>')
    .insertAfter($('#tabs'))
    .fadeIn('slow')
    .animate({ opacity: 1.0 }, 3000)
    .fadeOut('slow', function () {
        $(this).remove();
    });
});
    ajaxStop() se déclenche uniquement quand tous requêtes AJAX complète, et je suis déliaison la première fois, il s'exécute, pouvez-vous élaborer sur la façon dont ce serait peut-être un problème? Aussi votre exemple ne fonctionnera pas, parce que stack sera un tableau vide, pas undefined 🙂
    Ne voyez pas la séparer en bas, de s'excuser pour ça. Selon l'application, il peut y avoir beaucoup d'appels ajax qui volent autour, et dans les situations où vous avez besoin d'un contrôle absolu, je voudrais faire mon propre pile d'appel pour mon flux de travail. Bien sûr, votre code fonctionne également (au moins si il ne sont pas tous les appels ajax, plus tôt dans l'application, où vous auriez à définir le gestionnaire dans la postForm méthode)
    Je ne suis pas la liaison du gestionnaire jusqu'à ce que ce lot de demandes est lancé 🙂

    OriginalL'auteur pederOverland