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