[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.

[AJAX] Liste liée sous Mozilla

AJAX

Vue hybride

Discussions similaires

Partager

Partager