Discussion :

[Jordel]

Bonjour à tous,

J'ai une page avec des listes déroulantes qui se chargent dynamiquement les unes en fonction des autres et ce, via des scripts Ajax.

J'ai donc le code suivant :

Code :

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

1
2
3
4
5
6
7
8
9
<select name="choix_acteur" id="id_acteur" onChange="javascript:affiche_film();affiche_boxoffice();">
// chargement du contenu via PHP/SQL
</select>
 
<div class="affiche_film" id="id_film" style="display:inline">
<select name='choix_film'>
	<option value='-1'>--- choix film ---</option>
</select>
</div>

Et voici ma fonction affiche_film :

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
function affiche_film(){
var idcode = null;
var sel = null;
 
var xhr2 = getXhr();
 
// On defini ce qu'on va faire quand on aura la reponse
xhr2.onreadystatechange = function()
{
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
	if(xhr2.readyState == 4) {
		leselect = xhr2.responseText;
		// On se sert de innerHTML pour rajouter les options a la liste
		document.getElementById('id_film').innerHTML = leselect
	}
}
 
// Ici on va voir comment faire du post
xhr2.open("POST","index.php?p=AjaxFilm",true);
xhr2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
sel = document.getElementById('id_acteur');
idcode = sel.options[sel.selectedIndex].value;
xhr2.send("id_acteur="+idcode);
}

J'ai donc une erreur "affiche_film is not defined" sous FF alors que sous IE, tout fonctionne !!!

Avez-vous une idée ???

Merci d'avance.

[ryan]

Yop!

Apparemment, FF attend une syntaxe différente pour faire référence à l'option sélectionnée.

Avec ceci, je ne vois pas d'erreur dans la console.

Code :

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

1
2
 
idcode = sel.options.selectedIndex.value;

Pour éviter ce problème de compatibilité, il vaudrait mieux envoyer la valeur sélectionnée dans l'appel de la fonction:

Code :

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

1
2
 
<select name="choix_acteur" id="id_acteur" onChange="affiche_film(this.options[selectedIndex].value);">

(Bizarrement, cette syntaxe fonctionne dans ce contexte, alors que dans une fonction, elle ne fonctionne pas. Il faudrait demander pourquoi aux gurus du forum Javascript)

Et la récupérer ainsi:

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
 
function affiche_film(idcode){
 
var xhr2 = getXhr();
 
// On defini ce qu'on va faire quand on aura la reponse
xhr2.onreadystatechange = function()
{
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
	if(xhr2.readyState == 4) {
		leselect = xhr2.responseText;
		// On se sert de innerHTML pour rajouter les options a la liste
		document.getElementById('id_film').innerHTML = leselect
	}
}
 
// Ici on va voir comment faire du post
xhr2.open("POST","index.php?p=AjaxFilm",false);
xhr2.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
xhr2.send("id_acteur="+idcode);
}

[DoubleU]

Code :

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

idcode = sel.options.selectedIndex.value;

Tu peux faire encore plus simple:

Code :

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

idcode = sel.value

Bizarrement, cette syntaxe fonctionne dans ce contexte, alors que dans une fonction, elle ne fonctionne pas. Il faudrait demander pourquoi aux gurus du forum Javascript

Parce que dans le onchange, le this représente le sélect, alors que dans la fonction, il représente la fonction elle même. Ceci étant, je ne sais pas si ca résoudra ton probleme.

Dans le onchange (et pas onChange), tu peux enlever le javascript: qui ne sert a rien, on sait jamais.

[Jordel]

Bonsoir à vous,

Tout d'abord merci pour vos réponses

J'ai donc passé toutes les valeurs en paramètre et tout fonctionne tranquillement

Un grand merci à vos idées !!!