Navigation

Contactez-nous

Kitpages
155 cours Berriat
38000 Grenoble
tel : 04 76 70 93 03

Par Philippe Le Van (@plv) Dernière mise à jour : 24 août 2010

Ajax avec YUI3

Introduction

L'ajax avec YUI3 est un peu plus complexe qu'avec Jquery. Il faut notamment prendre en compte le numéro de transaction d'une requête.

Exemple d'utilisation du transaction Id

Prenons un exemple simple :

  • Nous avons plusieurs boutons sur une page avec une classe ".delButton"
  • Quand on clique sur un bouton, il faut que l'url  ajaxDel.php soit appelée en ajax avec le paramètre id contenant l'id du bouton appelé
  • l'URL ajax renvoie le texte "ok" ou "fail" suivant que le traitement a échoué ou non
  • On affiche une alerte javascript contenant ce retour

 

var delButtonHandler = function(e) {
    e.preventDefault();
    var clickedNode = e.currentTarget;
    var complete = function(transactionId, o, args) {
        if (transactionId != request.id) {
            return;
        }
        var param = args[0]; // "customParam"
        var node = args[1];  // "customParam2"
        var responseTxt = o.responseText;
        alert("response="+responseTxt);
    };
    Y.on(
        'io:complete',
        complete,
        this,
        ['customParam', 'customParam2']
    );
    var request = Y.io('/ajaxDel.php?id='+clickedNode.get("id"));
};
Y.all(".delButton").on("click", delButtonHandler);

Commentaires

Ajouter un commentaire