Discussion :

[CinePhil]

Bonjour,

Soit une liste déroulante qui permet à l'utilisateur de choisir le score d'un concours ou d'un autre.

Code :

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

1
2
3
4
5
6
<select id="select_score" 
    onchange="javascript:changeScores(5, document.forms.formChoixScores.select_score.options.selectedIndex)"
>
    <option value="1">un lot</option>
    <option value="9">un autre lot</option>
</select>

La fonction changeScore (non terminée, c'est là que je coince ) :

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
function changeScores(joueur, lot)
{
	contenuHTML = $.ajax({
		  url: "ajax/best_scores.php",
		  global: false,
		  type: "POST",
		  data: ({id_joueur : joueur, id_lot : lot}),
		  dataType: "json",
		  async:true,
		  success: function(jsonscore)
		  {
			  for (var i in jsonscore)
			  {
				  alert(jsonscore[i]);
			  }
		  }
	   }
	).responseText;
}

Le programme ajax/best_scores.php qui exécute la requête pour récupérer le tableau de score à afficher :

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
31
32
$id_joueur = intval($_POST['id_joueur']);
$id_lot = intval($_POST['id_lot']);
 
// Récupération du meilleur score du joueur pour le lot choisi
$sql = "
	SELECT tmp.msc_meilleur_temps, tmp.msc_nb_reponses, tmp.rang
	FROM
	(
		SELECT msc_id_lot, msc_id_joueur, msc_meilleur_temps, msc_nb_reponses,
		@rank1 := @rank1 + 1 AS rang
		FROM meilleurs_scores
		CROSS JOIN
		(
			SELECT @rank1 := 0
		) tmp
		WHERE msc_id_lot = $id_lot
		ORDER BY msc_id_lot ASC,
		msc_nb_reponses DESC,
		msc_meilleur_temps ASC
	) tmp
	WHERE tmp.msc_id_joueur = $id_joueur
";
 
$result = mysql_query($sql);
 
$row = mysql_fetch_array($result);
$score['temps'] = $row['msc_meilleur_temps'];
$score['nb_rep'] = $row['msc_nb_reponses'];
$score['rang'] = $row['rang'];
$jsonscore = json_encode($scores);
 
echo $jsonscore;

Pour commencer, ai-je bien fait de penser récupérer un json ?

Ensuite, comment traiter ce json en retour ?
J'ai essayé un début avec for (var i in jsonscore) mais je n'arrive pas à afficher le contenu du json.

Et vu l'heure, j'ai du mal à réfléchir.

[NoSmoking]

Bonsoir,
tant qu'à utiliser jQuery, autant l'utiliser en plein.

Il existe jQuery.getJSON() qui te montre en plus l'utilisation de $.each

[CinePhil]

Merci du tuyau.

Il doit y avoir un bout de syntaxe qui m'échappe car l'alerte ne s'affiche pas avec ce code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function changeScores(joueur, lot)
{
	$.getJSON('ajax/best_scores.php', 
			{
				id_joueur : joueur, 
				id_lot : lot
			},
			function(scores) 
			{
				alert("score : " + scores.temps);
			}
	);
}

EDIT :
Je me suis aperçu que lot portait le selectedIndex de la liste de choix, qui n'est pas la valeur de l'option choisie.

J'ai trouvé ce code sur Internet pour récupérer la valeur du lot choisi :

Code :

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

1
2
3
4
5
6
7
for(i=0; i < document.forms.formChoixScores.select_score.length; ++i)
	{
		if(document.forms.formChoixScores.select_score.options[i].selected == true)
		{
			var lot = document.forms.formChoixScores.select_score.options[i].value;
		}
	}

Un alert juste après ce code me montre que je récupère bien les bonnes valeurs à envoyer au programme ajax/best_scores.php mais je n'ai toujours rien en retour.
Que me manque t-il ?

[cholopat]

Hello

simplement pour pointer du doigt la différence de nom des variables

Code :

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

1
2
$score['rang'] = $row['rang'];
$jsonscore = json_encode($scores);

$score / $scores
Pat

[CinePhil]

Merci oeil de lynx !

Maintenant j'ai bien la boîte d'alerte qui s'affiche mais qui indique :

score : null

Je lis mal le json ?

J'ai glissé ceci à la fin de ajax/best_scores.php :

Code :

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

1
2
3
4
//$jsonscore = json_encode($score);
$jsonscore = "{\"temps\": \"12345\", \"nb_rep\": \"12\", \"rang\": \"4\"}";
 
echo $jsonscore;

Et l'alert me donne le bon résultat. Il semble donc que ce soit le json_encode qui encode mal le tableau que je lui donne.

EDIT :
J'ai trouvé mes erreurs !
Tout d'abord, j'avais oublié la connexion à la BDD avant la requête dans le programme ajax !

Ensuite, avec getJson, les données sont passées au programme Ajax via $_GET et non pas via $_POST.

Mon programme ajax/best_scores.php est donc maintenant celui-ci :

Code PHP :

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
31
32
33
34
include("../connexion_bdd.php");
 
$id_joueur = intval($_GET['id_joueur']);
$id_lot = intval($_GET['id_lot']);
 
// Récupération du meilleur score du joueur pour le lot choisi
$sql = "
	SELECT tmp.msc_meilleur_temps, tmp.msc_nb_reponses, tmp.rang
	FROM
	(
		SELECT msc_id_lot, msc_id_joueur, msc_meilleur_temps, msc_nb_reponses,
		@rank1 := @rank1 + 1 AS rang
		FROM meilleurs_scores
		CROSS JOIN
		(
			SELECT @rank1 := 0
		) tmp
		WHERE msc_id_lot = $id_lot
		ORDER BY msc_id_lot ASC,
		msc_nb_reponses DESC,
		msc_meilleur_temps ASC
	) tmp
	WHERE tmp.msc_id_joueur = $id_joueur
";
 
$result = mysql_query($sql);
 
$row = mysql_fetch_array($result);
$score["temps"] = $row['msc_meilleur_temps'];
$score["nb_rep"] = $row['msc_nb_reponses'];
$score["rang"] = $row['rang'];
$jsonscore = json_encode($score);
 
echo $jsonscore;

Il me reste à faire ce qu'il faut à la place de l'alert pour afficher ce tableau de score mais le problème objet de ce sujet est

[NoSmoking]

J'ai trouvé ce code sur Internet pour récupérer la valeur du lot choisi :

Code :

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

1
2
3
4
5
6
7
for(i=0; i < document.forms.formChoixScores.select_score.length; ++i)
	{
		if(document.forms.formChoixScores.select_score.options[i].selected == true)
		{
			var lot = document.forms.formChoixScores.select_score.options[i].value;
		}
	}

il existe en mode raccourci

Code :

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

1
2
3
4
<select id="select_score" onchange="alert( this.value)">
  <option value="1">un lot</option>
  <option value="9">un autre lot</option>
</select>

[CinePhil]

Effectivement, comme ça c'est beaucoup plus simple !

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
function changeScores(joueur, indexlot)
{
	var lot = document.forms.formChoixScores.select_score.value;	
 
	$.getJSON('ajax/best_scores.php', 
			{
				id_joueur : joueur, 
				id_lot : lot
			},
			function(scores) 
			{
				alert("score : " + scores.temps);
			}
	)
	.error(function(){alert("error")});
}

[CinePhil]

Je croyais le problème résolu mais j'ai encore un souci...

Avec l'alert, je peux bien lire les différentes valeurs de mon tableau JSON mais je n'arrive pas à les afficher dans la page.

Code Javascript :

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
function changeScores(joueur, lang)
{
	var lot = document.forms.formChoixScores.select_score.value;	
	alert("lang : " + lang);
	$.getJSON('ajax/best_scores.php', 
			{
				id_joueur : joueur, 
				id_lot : lot,
				langue : lang
			},
			function(scores) 
			{
				alert("score : " + scores.nb_participations);
				$("#score_type_lot").html = scores.type_lot;
				$("#score_temps").html = scores.temps;
				$("#score_nb_rep").html = scores.nb_rep;
				$("#score_rang").html = scores.rang;
				$("#score_participations").html = scores.nb_participations;
				$("#scores").css('display', 'block');
 
			}
	);
 
}

Le $("#scores").css('display', 'block'); fonctionne et fait bien apparaître la div "#scores" mais les valeurs à injecter à l'intérieur de la div restent vides.
J'utilise mal la méthode html ?
Ce n'est pas la bonne méthode pour le faire ?

[Bovino]

J'utilise mal la méthode html ?

Oui, car comme tu le fais toi-même remarquer, html est une méthode, pas une propriété

Code :

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

1
2
3
4
5
$("#score_type_lot").html(scores.type_lot);
$("#score_temps").html(scores.temps);
$("#score_nb_rep").html(scores.nb_rep);
$("#score_rang").html(scores.rang);
$("#score_participations").html(scores.nb_participations);

[CinePhil]

Effectivement, ça marche mieux comme ça merci !