Prévenir de soumettre jusqu'à ce que les ajax soient terminés

Plutôt que d'utiliser boolean, vous devez utiliser un compteur entier ( var i=0; ).

i++ chaque fois qu'une demande AJAX est faite, et

i-- chaque fois qu'une demande AJAX est terminée.

Les avantages de l'utilisation d'un compteur sont qu'il vous permettra de faire plusieurs requêtes AJAX à la fois. Avec boolean, il est plus buggy, car faire plusieurs requêtes peut provoquer le démarrage du bouton de soumission avant que les actions ne soient terminées.

En ce qui concerne l'interface utilisateur, vous devriez envisager d'utiliser une sorte d'indicateur de «chargement» pour montrer que cela fonctionne. Puis, une fois que le compteur est à zéro, vous pouvez cacher l'indicateur de chargement et activer la fonctionnalité de soumission.

Une bonne façon de gérer ceci:

• Changez votre bouton de soumission vers un bouton normal
• Reliez une fonction au bouton de soumission qui exécute la requête ajax
• Affectez le paramètre de réussite de l'objet de demande jjuery AJAX pour soumettre le formulaire

Je m'approchais différemment et vérifie le $.active ou $.ajax.active internes $.active (dépend de la version) dans chaque rappel de demande d'ajax. Si $.active est 0 alors il n'y a plus de demandes actives, puis soumettez le formulaire en utilisant .submit() .

Cette question pourrait être utile à propos de $.active

Dans votre onsubmit événements onsubmit , ajoutez un event.preventDefault() . Dans l'application OnApple de vos ajax (ou onSuccess , selon la façon dont vous souhaitez l'aborder), créez une requête ajax $.post qui envoie les données des formulaires.

Si vous avez plusieurs requêtes ajax, vous pouvez créer un compteur et l'incrémenter après chaque demande est terminée et lorsque le compteur atteint la quantité correcte, effectuez ce $.ajax post .

Par exemple:

 var totalRequests = 0; var counter = 0; var submit = false; $('form').submit(function(e){ e.preventDefault(); submit = true; submitForm(); }) // starting a random number of ajax requests for (var c=0;c<=Math.floor(Math.random()*11);c++){ totalRequests++; $.ajax({ url: 'ajax/'+c+'.html', success: function() { submitForm(); } }); function submitForm(){ if (counter>=totalRequests && submit){ $.post(...); } } 

Je voudrais probablement écrire mon fichier php différemment afin que je puisse faire tout ce dont j'avais besoin dans un appel ajax, y compris la soumission de formulaire. Si vous vouliez que le formulaire soit en cours de soumission et que vous chargez une nouvelle page, je modifierais toujours le php pour tout faire dans un appel ajax puis soumettre le rappel d'ajax.

Si vous montrez un code, il sera plus facile à comprendre

Vous pouvez définir l'attribut disabled du bouton soumettre à disabled lorsque la page est chargée pour la première fois, puis toutes les requêtes AJAX sont terminées, réactivez-la. C'est probablement une bonne idée de donner avis à vos utilisateurs que les données sont toujours envoyées au formulaire, de sorte qu'elles ne soient pas confondues par un bouton de soumission désactivé.

Pour vous assurer que toutes vos requêtes sont .done() , vous pouvez utiliser la méthode .done() .

Si vous devez effectuer une validation côté client, il suffit de joindre un événement à votre bouton de soumission:

 $('#submitbutton').submit(function() { // function code here });