YUI3 + Ajax avec boucle FOR

Version imprimable

Bonjour,

je dois adapter un script jQuery qui fonctionne en YUI3, affichant le résultat d'une requête en Ajax au clic sur un lien. Le résultat varie selon le lien cliqué.
Mon script YUI ne me retourne aucun résultat, je n'arrive pas à bien traduire mon jQuery en YUI3...

script jQuery valide :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script languid="javascript" type="text/javascript">
$(document).ready(function() { 
  for (var i=1; i<4; i++) {	
    $("#bouton" + i).click(display(i));
  }
});
function display(j) {
  return function() {
    ajaxFunction(j);
  };
}
function ajaxFunction(j){
var id = document.getElementById("bouton" + j).className;
$.ajax(
   {
      type: "GET",
      url: "requete.php",
      data: "id="+id,
      success: function (msg) {
            $("#thema" + j).html(msg);
	}
   });
};
</script>
 
<a href="#" id="bouton1" class="(Test 1)">Maths</a>
<div id="thema1"></div>
<a href="#" id="bouton2" class="(Test 2)">Culture</a>
<div id="thema2"></div>

script YUI3 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>
<script>
YUI().use("node", function (Y) { 
  for (var i=1; i<4; i++) {	
    Y.one("#bouton" + i).on('click', function ajaxFunction(i){
 
var id = document.getElementById("bouton" + i).className;
Y.io('requete.php',
   {
      type: "GET",
      data: "id="+id,
      success: function (msg) {
            Y.one("#thema" + i).setHTML(msg);
	}
   });
 
});
  };
});
</script>
 
<a href="#" id="bouton1" class="(Test 1)">Maths</a>
<div id="thema1"></div>
<a href="#" id="bouton2" class="(Test 2)">Culture</a>
<div id="thema2"></div>

26/02/2013, 09h33
vermine

Bonjour,

Quand vous faites ceci :

Code:

Y.one("#bouton" + i).on('click', function ajaxFunction(i){

Êtes-vous sûr de bien récupérer la valeur de i ?

Non, en effet, ce code ne fonctionnait pas du tout. Je l'ai donc revu, et j'arrive bien à récupérer la bonne valeur de i (test avec alert (id); qui me retourne le contenu de class comme voulu).

Seulement, mon appel Ajax semble ne pas fonctionner, bien que la variable id soit bien renseignée. Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script>
<script>
YUI().use('node', function (Y) { 
    for (var i=1; i<4; i++) {								
	var button = Y.one('.bouton' + i);						
        button.on('click', function (e){	
 
	var id = e.target.get('id');
 
	Y.io('requete.php', {
              type: 'GET',
              data: 'id='+id,
              success: function (id, msg) {
	           alert ('success !');
	      }
        });	
});
};
});
</script>
 
<a href="#" id="(Test 1)" class="bouton1"> Bouton 1</a>
<div id="thema1"></div>
<br><br>
 
<a href="#" id="FAQ" class="bouton2"> Bouton 2</a>
<div id="thema2"></div>

26/02/2013, 11h13
vermine

Du côté de requete.php vous recevez quelque chose (en examinant "id") ?
26/02/2013, 11h18
razorlok

Avec mon script jQuery oui, requete.php me retourne les bons résultats.
Par contre, il me faut bien passer la variable id pour la récupérer dans requete.php : $id = $_GET['id'];

J'avoue que ce n'est pas très clair dans la documentation. Essayez peut-être ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 function onComplete(transactionId, responseObject, arg1, arg2) { alert ('success !'); } Y.on('io:complete', onComplete); Y.io('requete.php', { type: 'GET', data: 'id='+id });
Mais je ne suis sûr de rien.

J'ai cherché et encore recherché dans la doc un peu bordélique de YUI et j'ai avancé un peu, en changeant l'appel de fonction au début du script, en remplaçant "node" par "io" (appel d'une fonction de type Ajax, apparemment) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js"></script> <script> YUI().use('io', function (Y) { for (var i=1; i<4; i++) { var button = Y.one('.bouton' + i); button.on('click', function (e){ var id = e.target.get('id'); Y.io('requete.php', { method: 'GET', data: 'id='+id, on: { success: function (o) { Y.one("#thema").setHTML(o); }, failure: function (result) { alert('failed'); } } }); }); }; }); </script>
Maintenant, au clic sur le lien, ça me retourne 0, puis 1, 2, 3, ... bref, incrémenté à l'infini à chaque clic...

27/02/2013, 09h36
vermine

A quel niveau est-ce que ça s'incrémente ?

C'était un problème de fonction success, en rajoutant un argument, je retourne bien les résultats voulus :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
YUI().use("io", function (Y) { 
for (var i=1; i<4; i++) {								
	var button = Y.one(".bouton" + i);
 
    button.on("click", function (e){
 
	var id = e.target.get("id");
 
	Y.io("requete.php", {
    method: "GET",
    data: "id="+id,
    on: {
        success: function (o, res) {
			Y.one("#thema").setHTML(res.responseText);
        }
    }
});	
});
};
});

Maintenant y'a plus qu'à l'intégrer à Moodle... ce qui n'est pas une mince affaire !

27/02/2013, 09h55
vermine

Ha parfait, je me demandais d'ailleurs ce que contenait le paramètre o (qui doit être l'id de la transaction). ;)

Courage pour la suite. :P