Versions

24/08/2010 : Création
19/12/2012 : MAJ liens

Contactez-nous

Kitpages
17 rue de la Frise
38000 Grenoble
tel : 04 58 00 33 81

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

Ajax avec YUI3

Introduction

Dans un certain nombre de cas, l'ajax avec YUI3 est un peu plus complexe qu'avec Jquery. Il faut notamment parfois prendre en compte le numéro de transaction d'une requête.

Exemple simple avec node-load

On peut très facilement remplacer le contenu d'un node avec la méthode load d'un node. [Lien vers l'API Node:load()]

YUI().use('node-load', function (Y) {
    // Replace the contents of the #content node with content.html.
    Y.one('#content').load('content.html');
});

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);

Lien vers la doc de Y.io : http://yuilibrary.com/yui/docs/io/

Commentaires

Note : on ne peut plus ajouter de commentaire sur ce site

Navigation