Discussion :

[razorlok]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[vermine]

Bonjour,

Quand vous faites ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[razorlok]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[vermine]

Du côté de requete.php vous recevez quelque chose (en examinant "id") ?

[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'];

[vermine]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[razorlok]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[vermine]

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

[razorlok]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

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