Discussion :

[CinePhil]

Bonjour,

Des heures que je ne comprends pas ce qui coince !

1) Le contexte
Dans un formulaire PHP, j'ai une série de listes déroulantes qui s'enchaînent en dépendance :
- une première pour choisir un diplôme ;
- une deuxième pour choisir une mention du diplôme, si ce diplôme propose plusieurs mentions (il n'y en a qu'un chez nous pour le moment) ;
- une troisième pour choisir un parcours composé d'une première liste de spécialisations d'une certaine mention qui en propose et éventuellement d'une liste d'options selon la spécialisation choisie.

Le formulaire est chargé de base avec les listes complètes des diplômes, des mentions et des spécialisations. La liste des options est vierge.
Seule la liste des diplômes est visible au chargement du formulaire. Si on choisit le Master MEEF, la liste des mentions apparaît et si on choisit la mention "ESD", les listes des parcours apparaissent.

Jusque là, tout va bien... sauf pour la liste des options qui doit récupérer en Ajax les options possibles pour la spécialisation choisie.

Passons au code...

2) Côté Javascript

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
 * Restreint la liste des options selon la spécialisation sélectionnée
 * @param integer specialisation : Identifiant de la spécialisation sélectionnée
 */
function restreindreOption(specialisation)
{
	var chemin = baseChemin();
	var diplome = parseInt($("#diplome_ensfea").val());
	var objData = {};
	//var data = "";
 
	if(specialisation == null)
	{
		specialisation = parseInt($("#diplomeEnsfeaSpecialisation").val());
	}
 
	if(specialisation != 0)
	{
		console.log("Diplome : " + diplome + " / Spécialisation : " + specialisation);
		objData = {diplome: diplome, specialisation: specialisation};
		//data = "diplome=" + $("#diplome_ensfea").val() + ",specialisation=" + parseInt(specialisation);
		//console.log("Data : " + data);
		//dump(objData);
		$.ajax({
			url: chemin + '/fr/Inscription/aj_liste_options',
			data: objData,
			dataType: 'json',
			cache: 'false',
			type: 'POST',
			success: function(liste_options)
			{
				console.log("succès");
				//alert(liste_options);
				/*$("#diplomeEnsfeaOption").html(liste_options);
				$("#diplomeEnsfeaOption").show();*/
			}
		});
	}
	else
	{
		alert("Spécialisation vide");
		$("#diplomeEnsfeaOption").html('');
		$("#diplomeEnsfeaOption").hide();
		$("#diplomeEnsfeaOption option[value='0']").text("-- Sélectionnez une option parmi rien ! --");
	}
}

3) Côté PHP, en désespoir de cause, j'ai simplifié à l'extrême en commentant presque tout le code et en renvoyant un simple texte :

Code PHP :

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

1
2
3
4
5
$html = "Coucou";
//$html = var_dump($_POST);
//$html = "Liste options : ".var_dump($liste_options);
// Envoi de la liste d'options au programme javascript
echo $html;

4) Diagnostics effectués
4.1) Passage en dataType: "text"

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
function restreindreOption(specialisation)
{
	var chemin = baseChemin();
	var diplome = parseInt($("#diplome_ensfea").val());
	var objData = {};
	//var data = "";
 
	if(specialisation == null)
	{
		specialisation = parseInt($("#diplomeEnsfeaSpecialisation").val());
	}
 
	if(specialisation != 0)
	{
		console.log("Diplome : " + diplome + " / Spécialisation : " + specialisation);
		//objData = {diplome: diplome, specialisation: specialisation};
		data = "diplome=" + $("#diplome_ensfea").val() + ",specialisation=" + parseInt(specialisation);
		console.log("Data : " + data);
		//dump(objData);
		$.ajax({
			url: chemin + '/fr/Inscription/aj_liste_options',
			data: data,
			dataType: 'text',
			cache: 'false',
			type: 'POST',
			success: function(liste_options)
			{
				console.log("succès");
				//alert(liste_options);
				/*$("#diplomeEnsfeaOption").html(liste_options);
				$("#diplomeEnsfeaOption").show();*/
			}
		});
	}
	else
	{
		alert("Spécialisation vide");
		$("#diplomeEnsfeaOption").html('');
		$("#diplomeEnsfeaOption").hide();
		$("#diplomeEnsfeaOption option[value='0']").text("-- Sélectionnez une option parmi rien ! --");
	}
}

=> J'ai bien l'alerte de liste_options, c'est à dire que ça affiche "Coucou".
=> Par contre, si je renvoie $html = var_dump($_POST);, je constate que je n'ai pas les deux paramètres nécessaires mais un seul (diplome) avec un texte contenant le second paramètre et sa valeur ; c'est donc inexploitable, ce qui doit justifier l'emploi du format json.

4.2) Avec le dataType json
La console de Firefox me dit bien que le retour du programme Ajax est bien "coucou" mais l'alerte dans la fonction de succès ne fonctionne pas : rien ne s'affiche.

Je ne comprends vraiment pas ce qui coince !

[CinePhil]

Bon ben ça fonctionne en dataType text !

C'était ma chaîne textuelle de paramètre qui était mal formée.

Code javascript :

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

data = "diplome=" + $("#diplome_ensfea").val() + "&specialisation=" + parseInt(specialisation);

=> paramètres à séparer par & et non pas par une virgule !

Mais j'aimerais quand même comprendre pourquoi CE programme là ne fonctionne pas en json alors que j'en ai d'autres qui fonctionnent (enfin, a priori parce que je n'ai pas revérifié récemment).

J'attends donc avant de passer en résolu.

[NoSmoking]

Bonjour,
le datatype ne défini pas le type de données que l'on envoie mais le type de données que l'on attend en retour du serveur, le traitement côté client ne sera donc pas le même.

[CinePhil]

Ah OK ! J'avais cru le contraire ! Ça m'apprendra à ne pas revoir la documentation !

[Toufik83]

j'ajoute une petite remarque, quand tu mets dataType:"json" cela t'oblige à renvoyer le résultat serveur sous forme json :

Code php :

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

1
2
3
4
5
 
$reponseServeur=[];//déclaration d'un tableau qui va contenir toutes les variables qu'on veux transmettre à ajax
$reponseServeur["html"] = "Coucou";
$reponseServeur["une_autre_variable"]="teste....";
echo json_encode($reponseServeur);//on renvoi tout le tableau en tant que json à ajax

puis dans ajax, tu n'as qu'à récupérer tes variables comme suite:

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
 
$.ajax({
    url: chemin + '/fr/Inscription/aj_liste_options',
    data: objData,
    dataType: 'json',
    cache: 'false',
    type: 'POST'
})
.done(function(data){
   console.log("data :",data);
   console.log("data.html :"+data.html);
   console.log("data.une_autre_variable:"+data.une_autre_variable);
})
.fail(function)(err){
    alert("Erreur ajax :"+err.responseText);
});