Comment arrêter ceci? Plusieurs clics sur un bouton avec jquery?

Question

Je pense que j'ai un problème avec plusieurs clics sur le même bouton. Je pensais que je l'ai résolu mais je pense qu'il y a 2 problèmes pas le problème original que je pensais.

Le premier problème était si ils ont cliqué sur un bouton (disons un bouton de sauvegarde), il ferait beaucoup d'enregistrer des messages ajax. Donc, s'ils ont cliqué dessus 5 fois parce qu'ils étaient impatients, ils feraient une sauvegarde de 5 fois ce qui, dans certains cas, pourrait faire planter le serveur mais la plupart du temps juste des résultats bizarres. J'ai donc trouvé un super plugin pour m'assurer que les demandes en double ne pouvaient pas être faites et j'ai pensé que le problème était résolu.

Cependant j'ai quelques boutons où vous cliquez dessus et cela fait une boîte de dialogue de jquery ui et je crois que si vous cliquez sur ce bouton 5 fois cela salit la boîte de dialogue. Comme Il ne fait pas 5 boîtes de dialogue, mais j'ai remarqué que les contrôles dans les formulaires ne fonctionnent pas tout d'un coup. Donc, si je clique sur un bouton et que la boîte de dialogue est créée, cela fonctionne très bien. Si je clique 5 fois sur le bouton avant que la boîte de dialogue ne soit terminée, je ne vois plus d'erreurs de validation, parfois le fichier datepicker est parti.

Cela ne fonctionne tout simplement pas.

Donc je pense que j'ai besoin de quelque chose pour arrêter ce clic de masse alors je pensais à quand un bouton est cliqué tous les boutons sont désactivés jusqu'à ce qu'il soit fini de charger quoi que ce soit. Je ne suis pas sûr si c'est la meilleure façon de le faire c'est pourquoi je demande.

Je ne suis pas sûr non plus où mettre le code. serait formidable de l'avoir dans un domaine global ou quelque chose de sorte que je n'ai pas à le mettre dans chaque méthode.

Merci

Answer 1

Il y a un plugin jQuery conçu pour éviter les interférences de clic utilisateur tout traitement spécifique a lieu:

BlockUI par malsup

(Supplémentaire: article about BlockUI)

Answer 2

Il existe d'innombrables façons de le faire. Je suis plus d'un mec javascript de base, mais l'idée générale est d'obtenir tous les éléments qui sont capables de déclencher des appels ajax et de les désactiver.

Le code exact dépendra de si vous avez un seul formulaire avec plusieurs éléments d'entrée de type «soumettre», des éléments de bouton ou si vous avez plusieurs formulaires. JQuery possède une méthode each() que vous pouvez parcourir avec des tableaux/objets.

Une solution non-jQuery pourrait ressembler à ceci:

function enableButtons() { 
    var buttons = document.getElementsByTagName("button"); 
    for (var i=0; i<buttons.length; i++) { 
    buttons.disabled = false; 
    } 
} 

function disableButtons() { 
    var buttons = document.getElementsByTagName("button"); 
    for (var i=0; i<buttons.length; i++) { 
    buttons.disabled = true; 
    } 
} 

Answer 3

vous pouvez désactiver le bouton d'envoi après la première cliqué

$("#submit").click(function() { 
    $.ajax("url/to/file.php", data); 
    $(this).attr("disabled", "true"); 
}); 

et vous pouvez également utiliser l'option async de ajax jquery pour bloquer la page pendant ajax est en cours de chargement

$.ajax({ 
    url: "url/to/file.php", 
    async: false, 
    data: data 
});