[AJAX] MaFonction is not defined sous FF mais pas sous IE

Version imprimable

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:

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:

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.

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:

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:

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:

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); }

19/11/2008, 09h50
DoubleU

Code:

idcode = sel.options.selectedIndex.value;

Tu peux faire encore plus simple:

Code:

idcode = sel.value

Citation:

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.
19/11/2008, 23h18
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 !!!