J'utilise jQuery et jQuery UI. J'ai constaté que les utilisateurs déclenchent parfois les appels ajax plusieurs fois, car le bouton/lien qui déclenche l'appel n'est pas désactivé juste après leur clic. Pour éviter cela, je désactive maintenant le bouton/lien dans mon action "beforeSend".
Voici à quoi ressemble un appel Ajax typique:
$.ajax({
type: "POST",
url: "someURL"
data: "someDataString",
beforeSend: function(msg){
$(".button").button("disable");
},
success: function(msg){
$(".button").button("enable");
// some user Feedback
}
});
Mais je ne voudrais pas ajouter cette logique bouton-désactiver dans chaque appel Ajax. Existe-t-il un moyen de définir globalement une fonction qui est appelée à chaque fois avant/après et ajax-call?
Il y a plusieurs façons de réaliser ce que vous demandez. La seule différence entre eux réside dans la manière dont ils sont mis en œuvre. Il vous appartient de choisir la méthode la mieux adaptée à votre cas particulier. Les méthodes dépendent également de la version de jQuery que vous utilisez. Je vais donc scinder cette réponse en deux parties.
Ajout de plusieurs rappels après init
Depuis jQuery 1.5, vous pouvez ajouter plusieurs rappels grâce à l’API révisée et à la nouvelle entrée jqXHR
object renvoyé par .ajax
. Il implémente l'interface Promise (voir Deferreds ), et nous pouvons l'utiliser à notre avantage:
// fn to handle button-toggling
var toggleButton = function() {
var button = $(".button");
button.button(button.button("option", "disabled") ? "enable" : "disable");
}
// store returned jqXHR object in a var so we can reference to it
var req = $.ajax({
beforeSend: toggleButton,
success: function(msg){
/* Do what you want */
}
}).success(toggleButton);
// we can add even more callbacks
req.success(function(){ ... });
Utilisation d'un préfiltre
jQuery 1.5 a également introduit prefilters que vous pouvez utiliser pour remplacer la configuration globale de jQuery 1.4:
// good practice: don't repeat yourself, especially selectors
var button = $(".button");
$.ajaxPrefilter(function(options, _, jqXHR) {
button.button("disable");
jqXHR.complete(function() {
button.button("enable");
});
});
Remarque: La section jqXHR de l'entrée $ .ajax contient cet avis d'utilisation de jqXHR.success()
:
Avis de dépréciation: jqXHR.success (), jqXHR.error () et Les rappels de jqXHR.complete () sont obsolètes à partir de jQuery 1.8. Préparer votre code pour leur suppression éventuelle, utilisez jqXHR.done (), jqXHR.fail (), et jqXHR.always () à la place.
Evénements et configuration globale
Utilisez .ajaxStart
et .ajaxStop
pour lier des rappels à un sélecteur spécifique. Les événements qui déclenchent ces rappels se déclencheront sur toutes les demandes Ajax.
$(".button").ajaxStart(function(){
$(this).button("disable");
}).ajaxStop(function(){
$(this).button("enable");
});
Utilisez .ajaxSetup
pour configurer une configuration ajax globale. L'objet de paramètres passé à .ajaxSetup
sera appliqué à toutes les demandes Ajax, même celles effectuées par les raccourcis .get
, .getJSON
et .post
. Notez que ceci n'est pas recommandé car il peut facilement entraver ses fonctionnalités.
$.ajaxSetup({
beforeSend: function(){
$(".button").button("disable");
},
success: function(){
$(".button").button("enable");
}
});
Filtrer les demandes dans les rappels d'événements globaux
Si vous avez besoin de filtrer certaines demandes, vous pouvez le faire avec .ajaxSend
et .ajaxComplete
, où vous pouvez vérifier l'objet Ajax settings
. Quelque chose comme ça:
var button = $(".button");
// fn to handle filtering and button-toggling
var toggleButton = function(settings) {
if (settings.url == "/specific/url")
button.button(button.button("option", "disabled") ?
"enable" : "disable");
}
};
// bind handlers to the callbacks
button.ajaxSend(function(e,x,settings){
toggleButton(settings);
}).ajaxComplete(function(e,x,settings){
toggleButton(settings);
});
Cela peut également être fait avec le .ajaxSetup
mentionné précédemment en effectuant le même type de vérification sur l'objet settings
qui est transmis aux gestionnaires de rappel.
Pour les enregistrer globalement, utilisez la commande
avec la
ajaxComplete ou ajaxStop event
$(".button").ajaxStart(function(){
$(this).attr("disabled","disabled");
});
$(".button").ajaxStop(function(){
$(this).attr("disabled","");
});
Oui, vous pouvez définir les valeurs par défaut pour tous les appels ajax en appelant cette fonction pour chaque page: http://api.jquery.com/jQuery.ajaxSetup/
De plus, s'il y a un appel ajax que vous ne souhaitez pas utiliser par défaut, définissez simplement cette option pour cet appel ajax particulier.