web-dev-qa-db-fra.com

Comment déclencher certaines actions avant et après chaque appel ajax

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?

jqueryajaxjquery-ui
30
Pascal Klein

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.

Pour jQuery 1.5 et versions ultérieures

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.

Pour jQuery 1.4 et versions antérieures

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.

40
mekwall

Pour les enregistrer globalement, utilisez la commande 

ajaxStart ou ajaxSend events

avec la

ajaxComplete ou ajaxStop event

$(".button").ajaxStart(function(){
      $(this).attr("disabled","disabled");
});


$(".button").ajaxStop(function(){
      $(this).attr("disabled","");
});
6
Caspar Kleijne

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.

2
Brian Ball

Vous pouvez essayer de lier un gestionnaire d’événements à l’événement submit et d’appeler une action chaque fois que l’action submit est appelée. Lire à ce sujet ici . Sinon, AjaxSetup est un autre bon moyen de faire l'affaire.

0
Rob