[AJAX] Liste liée sous Mozilla

**dam28800** · 12/08/2009, 14h51

Bonjour à tous,

J'ai deux liste déroulante.
Je choisis une option sur la première et en fonction de l'option choisi j'ai des options dans la deuxième.
Tout fonctionne bien sur IE et Mozilla.

Ensuite je souhaite valider mes choix et je passe par un POST pour enregistrer les données.
Sous IE aucun problème je récupère bien ma première liste et ma deuxième.
En revanche sur Mozilla, la variable de la deuxième liste n'existe pas et donc erreur.

Voilà mon script ajax :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<script type='text/javascript'>
 
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
 
 
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go1(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('magasin').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_client.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('enseigne');
				enseigne = sel.options[sel.selectedIndex].value;
				xhr.send("enseigne="+enseigne);
			}
 
 
 
 
</script>

Ma page ajax_client.php :

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
if (isset($_POST["enseigne"])) 
	{
	include ('connexion_base.php');
 
 
	if ($_POST["enseigne"] == '')
		{
 
		echo '<select name="magasin" style="font-size: 10px; min-width: 100px;">';
		echo "<option value=''></option>";
		echo "</select>";
		}
	else
		{
 
		$res = mysql_query("SELECT id_mag, nom FROM magasin WHERE enseigne='".$_POST["enseigne"]."' ORDER BY nom");
        echo '<select name="magasin" style="font-size: 10px; min-width: 200px;">';
        echo "<option value=''></option>";
		while($row = mysql_fetch_assoc($res))
			{
 
			echo "<option value='".$row["id_mag"]."'>".$row["nom"]."</option>";
			}
		echo "</select>";
 
		}
	}

Merci d'avance de votre aide !

**andry.aime** · 12/08/2009, 15h23

Bonjour,
N'utilise pas innerHTML pour générer la deuxième liste mais utilise un retour XML depuis le serveur pour la remplir. Une discussion résolue:
http://www.developpez.net/forums/d77...te-liees-ajax/

**dam28800** · 12/08/2009, 16h04

Merci, effectivement je n'avais pas vu cette discussion.
Alors voilà ce que j'ai fait :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<script type='text/javascript'>
 
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
 
 
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go1(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200)
					{
						var rst = xhr.responseXML;
					var items=rst.getElementsByTagName('element');
					document.getElementById('magasin').options.length=0;
					for(var i=0;i<items.length;i++)
					{
						var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
						document.getElementById('magasin').options[i]=myOption;
					}
 
 
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_client.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('enseigne');
				enseigne = sel.options[sel.selectedIndex].value;
				xhr.send("enseigne="+enseigne);
			}
 
 
 
 
</script>

Mes menus déroulant :

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
 
<select name="enseigne"  id='enseigne' onchange='go1()' style="font-size: 10px;">
            <option value='' selected="selected"></option>
    <?php   $retour = mysql_query("                                 SELECT id_enseigne, nom_enseigne 
                                                    FROM enseigne 
                                                    ORDER BY nom_enseigne");
            while($donnees = mysql_fetch_array($retour))
                { ?>
                <option <?php if ($enseigne == $donnees['id_enseigne']) { echo 'selected="selected"'; } ?>  value=<?php echo $donnees['id_enseigne']; ?>><?php echo $donnees["nom_enseigne"]; ?></option>
    <?php           } ?>		
        </select>
 
<div id="magasins" style="display:inline;">
				<select name="magasin" style="min-width: 100px; font-size: 10px;">
				 <option value='' selected="selected"></option>
    <?php   
        if (isset($_GET['mag'])) { 
        $retour = mysql_query("                                         SELECT id_mag, ville 
                                                FROM magasin 
                                                ORDER BY ville");
            while($donnees = mysql_fetch_array($retour))
                { ?>
                <option <?php if ($magasin == $donnees['id_mag']) { echo 'selected="selected"'; } ?>  value=<?php echo $donnees['id_mag']; ?>><?php echo $donnees["ville"]; ?></option>
    <?php           }  }?>		
        </select>

Ma page ajax_client.php :

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
 
if (isset($_POST["enseigne"])) 
	{
	include ('connexion_base.php');
	echo "<elements>";
 
	if ($_POST["enseigne"] == '')
		{
 
		echo '<select name="magasin" style="font-size: 10px; min-width: 100px;">';
		echo "<element>";	
		echo "<option value=''></option>";
		echo "</element>";
		echo "</select>";
		}
	else
		{
 
		$res = mysql_query("SELECT id_mag, nom FROM magasin WHERE enseigne='".$_POST["enseigne"]."' ORDER BY nom");
        echo '<select name="magasin" style="font-size: 10px; min-width: 200px;">';
        echo "<option value=''></option>";
		while($row = mysql_fetch_assoc($res))
			{
			echo "<element>";	
			echo "<option value='".$row["id_mag"]."'>".$row["nom"]."</option>";
			echo "</element>";	
			}
		echo "</select>";
 
		}
	echo "</elements>";	
	}

Autant dire ça ne marche pas.
En fait la deuxième liste ne se met plus à jour en fonction de la première...

Merci d'avance de votre aide.

**dam28800** · 13/08/2009, 08h51

Re., J'ai toujours le même problème et pas de solutions.
Alors j''ai regardé dans tout les sens mais je ne vois pas trop d'où peut venir le problème.

J'ai quand même rajouté dans le fichier ajax les entêtes pour le fichier xml qua j'avais oublié dans mon post précèdent :

Code :

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

1
2
3
 
header("Content-type:text/xml");
echo '<?xml version="1.0" encoding="ISO-8859-1"?>';

Mais bon rien n'ey fait ma liste de se met plus à jour en fonction de l'autre.
Pour info je change la taille du deuxième menu déroulant sur ma page ajax mais lorsque je sélectionne uine option dans le premier aucun influance sur le deuxième...

Merci d'avance pour votre aide.

**andry.aime** · 13/08/2009, 08h59

Re,

Code HTML :

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

<select name="magasin" id="magasin" style="min-width: 100px; font-size: 10px;">

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
if (isset($_POST["enseigne"])) 
	{
	include ('connexion_base.php');
        header("Content-type:text/xml");
        echo'<?xml version="1.0" encoding="ISO-8859-1"?>';
	echo "<elements>";
	if ($_POST["enseigne"] == '')
		{
		echo "<element>";	
		echo "<option> </option>";
                echo "<valeur> <valeur>";
		echo "</element>";
		}
	else
		{
 
		$res = mysql_query("SELECT id_mag, nom FROM magasin WHERE enseigne='".$_POST["enseigne"]."' ORDER BY nom");
		while($row = mysql_fetch_assoc($res))
			{
                echo "<element>";	
		echo "<option>".$row["nom"]."</option>";
                echo "<valeur>".$row["id_mag"]."<valeur>";
		echo "</element>";
			}
		}
	echo "</elements>";	
	}

**dam28800** · 13/08/2009, 09h10

Merci vraiment de ton aide c'est super sympa.
Bon par contre j'ai toujours le problème...

Je poste mon code javascript car ça ne peut venir que de là maintenant, mais j'ai un peu de mal à le déchiffrer :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<script type='text/javascript'>
 
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go1(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200)
					{
						var rst = xhr.responseXML;
					var items=rst.getElementsByTagName('element');
					document.getElementById('magasin').options.length=0;
					for(var i=0;i<items.length;i++)
					{
						var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
						document.getElementById('magasin').options[i]=myOption;
					}
 
 
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_client.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('enseigne');
				enseigne = sel.options[sel.selectedIndex].value;
				xhr.send("enseigne="+enseigne);
 
			}
 
</script>

Je l'ai parcouru plusieurs fois et je ne vois pas de problème mais bon...

Merci encore !

**andry.aime** · 13/08/2009, 09h47

Installes Firebug et décrit les erreurs.

**dam28800** · 13/08/2009, 10h54

Je suis pas expert sur firedebug, je viens de l'installer mais je ne vois ou je trouve la liste des erreurs.

Peux tu m'éclairer ?

Merci d'avance

**andry.aime** · 13/08/2009, 11h08

L'utilisation de Firebug:
http://eric-pommereau.developpez.com...l-web/firebug/

**dam28800** · 13/08/2009, 11h27

Ok,

Bon a priori le fichier xml se créé bien car dans firedebug j'ai réussi à trouver ça :

Code :

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

1
2
 
<?xml version="1.0" encoding="ISO-8859-1"?><elements><element><option>BOULOGNE</option><valeur>15<valeur></element><element><option>CERGY</option><valeur>22<valeur></element><element><option>CHAMPS ELYSEES</option><valeur>4<valeur></element><element><option>CRETEIL</option><valeur>20<valeur></element><element><option>DIGITAL</option><valeur>2<valeur></element><element><option>EVRY</option><valeur>12<valeur></element><element><option>FORUM</option><valeur>1<valeur></element><element><option>GENEVILLIERS</option><valeur>16<valeur></element><element><option>HERBLAY</option><valeur>23<valeur></element><element><option>ITALIE 2</option><valeur>6<valeur></element><element><option>MONTPARNASSE</option><valeur>3<valeur></element><element><option>NOISY LE GRAND</option><valeur>18<valeur></element><element><option>PARINOR</option><valeur>19<valeur></element><element><option>PARIS DEFENSE</option><valeur>14<valeur></element><element><option>PARLY 2</option><valeur>11<valeur></element><element><option>ROSNY</option><valeur>17<valeur></element><element><option>SAINT LAZARE</option><valeur>5<valeur></element><element><option>TERNES</option><valeur>7<valeur></element><element><option>THIAIS</option><valeur>21<valeur></element><element><option>VAL D’EUROPE</option><valeur>9<valeur></element><element><option>VELIZY VILLACOUBLAY</option><valeur>10<valeur></element><element><option>VILLEBON</option><valeur>13<valeur></element><element><option>VILLIERS EN BIERE</option><valeur>8<valeur></element></elements>

Une solution peut-être ?

Pour le code js je regarde comment faire apparaitre les erreurs car là je n'en vois pas.

Merci de ton aide.

**andry.aime** · 14/08/2009, 07h15

Re,
As -tu ajouté un id au select?

Code HTML :

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

<select name="magasin" id="magasin" style="min-width: 100px; font-size: 10px;">

**dam28800** · 14/08/2009, 09h59

Oui j'ai bien ajouté l'ID au select.

Le fait que j'utilise un include en php ne pose pas de problème ?

Car j'ai ma page accueil.php avec le code javascript :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<script type='text/javascript'>
 
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go1(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200)
					{
						var rst = xhr.responseXML;
					var items=rst.getElementsByTagName('element');
					document.getElementById('magasin').options.length=0;
					for(var i=0;i<items.length;i++)
					{
						var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
						document.getElementById('magasin').options[i]=myOption;
					}
 
 
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_client.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sel = document.getElementById('enseigne');
				enseigne = sel.options[sel.selectedIndex].value;
				xhr.send("enseigne="+enseigne);
 
			}
 
</script>

Ensuite si je veux saisir je met ma page saisie.php avec mes select :

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
 
<div id="magasins" style="display:inline;">
				<select name="magasin" id="magasin" style="min-width: 100px; font-size: 10px;">
				 <option value="" selected="selected"></option>
    <?php   
        if (isset($_GET['mag'])) { 
        $retour = mysql_query("                                         SELECT id_mag, ville 
                                                FROM magasin 
                                                ORDER BY ville");
            while($donnees = mysql_fetch_array($retour))
                { ?>
                <option <?php if ($magasin == $donnees['id_mag']) { echo 'selected="selected"'; } ?>  value=<?php echo $donnees['id_mag']; ?>><?php echo $donnees["ville"]; ?></option>
    <?php           }  }?>		
        </select>
 
 
				</div>

Et j'ai ma page ajax_client.php :

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
33
34
35
 
<?php
 
if (isset($_POST["enseigne"])) 
	{
	include ('connexion_base.php');
        header("Content-type:text/xml");
        echo'<?xml version="1.0" encoding="ISO-8859-1"?>';
 
 
	echo "<elements>";
	if ($_POST["enseigne"] == '')
		{
		echo "<element>";	
		echo "<option> </option>";
                echo "<valeur> <valeur>";
		echo "</element>";
		}
	else
		{
 
		$res = mysql_query("SELECT id_mag, nom FROM magasin WHERE enseigne='".$_POST["enseigne"]."' ORDER BY nom");
		while($row = mysql_fetch_assoc($res))
			{
                echo "<element>";	
		echo "<option>".$row["nom"]."</option>";
                echo "<valeur>".$row["id_mag"]."<valeur>";
		echo "</element>";
			}
		}
	echo "</elements>";	
	}
 
 
?>

Mais à priori cette dernière est bopnne car dans firedebug je vois bien le veau fichier xml, mais rien dans mon menu déroulant...

Merci encore à toi.

**andry.aime** · 14/08/2009, 10h11

Bonjour, donne l'erreur retourné par Firebug.
http://eric-pommereau.developpez.com...firebug/#LIV-A

**dam28800** · 14/08/2009, 10h23

En bidouillant j'ai trouvé ça :

L'utilisation de la fonction «*getBoxObjectFor()*» est déconseillée. Essayez d'utiliser la fonction «*element.getBoundingClientRect()*» si possible.
http://127.0.0.1/Serveur/test/accueil.php?act=sv
Line 0

Ca peut t'aider ?

**dam28800** · 14/08/2009, 10h28

Dans la consile je ne vois pas d'erreur j'ai lancé le profiler et voilà ce que ça me donne

Code :

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

1
2
3
4
go1	1	69.05%	0.801ms	14.039ms	14.039ms	14.039ms	14.039ms	accueil....hp?act=sv (ligne 33)
onreadystatechange()	5	21.12%	0.245ms	0.245ms	0.049ms	0.015ms	0.162ms	accueil....hp?act=sv (ligne 36)
getXhr	1	5.17%	0.06ms	0.06ms	0.06ms	0.06ms	0.06ms	accueil....hp?act=sv (ligne 12)
onchange	1	4.66%	0.054ms	14.093ms	14.093ms	14.093ms	14.093ms	accueil....ent/seq/1 (ligne 1)

Merci.

**Bovino** · 20/08/2009, 09h35

Code xml :

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

<valeur>8<valeur>

Ton XML est mal formé, il n'est donc pas utilisable

**dam28800** · 20/08/2009, 11h07

Rien à dire ! a si merci beaucoup !

Le problème venait bien de là ! Merci a tous pour vos contributions et désolé pour le up je ne connaissais pas toutes les règles du forum (nul n'est censé ignoré la loi...)

Mais vraiment un grand merci !

[AJAX] Liste liée sous Mozilla

AJAX

Discussions similaires

Partager

Partager