[AJAX] Listes déroulantes liées

**Jiraiya42** · 09/04/2008, 20h16

Salut !

J'ai un soucis. J'aimerais mettre en place des listes déroulantes liées. J'ai 3 fichiers : index.php contenant les listes déroulantes, Func.js contenant la fonction et liste.php contenant le code php.

La première liste déroulante se charge normalement mais la seconde ne réagit pas en fonction de cette dernière. De plus, j'aimerais pouvoir répéter ce système dans ma page pour d'autres données.

index.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
36
 
<html>
<head>
<SCRIPT type="text/javascript" src="Func.js"></script>
</head>
<body>
<div class="Centered">
	<form class="CenteredForm" name="form_selects" id="form_selects" action="" method="" onsubmit="return false;">
		<fieldset>
			<legend>Choix</legend>
			<div class="Left">
			Département&nbsp;:
			<select name="list1" id="list1" class="ButtonL" onchange="request05(this.form)">
			<option value="" selected="selected">Choix</option>
			<?php
                        require 'Connect.php';
                        mysql_connect(SERVER, NAME, PASSWD) or die('Erreur SQL lors de la tentative de connexion à la base. Détails : '.mysql_error());
                        mysql_select_db(BASE) or die('Erreur SQL lors de la sélection de la base. Détails : '.mysql_error());
                        $listDep = mysql_query("SELECT DISTINCT Dep_Com FROM commune ORDER BY Dep_Com;") 
                                   or die('Erreur SQL lors de la récupération des départements. Détails : '.mysql_error());
                        while ($data = mysql_fetch_assoc($listDep))
                        {
                                echo "<option value".$data['Dep_Com'].">".$data['Dep_Com']."</option>";
                        }
                        ?>
			</select>
 
			<select name="list2" id="list2" class="ButtonL">
 
			</select>
			</div>
		</fieldset>
	</form>
</div>
</body>
</html>

Func.js

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
 
var l1    = f.elements["list1"];   
 var l2    = f.elements["list2"];   
 var index = l1.selectedIndex;   
 if(index < 1)   
    l2.options.length = 0;   
 else {   
    var xhr_object = null;   
 
    if(window.XMLHttpRequest) // Firefox   
       xhr_object = new XMLHttpRequest();   
    else if(window.ActiveXObject) // Internet Explorer   
       xhr_object = new ActiveXObject("Microsoft.XMLHTTP");   
    else { // XMLHttpRequest non supporté par le navigateur   
       alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");   
       return;   
    }   
 
    xhr_object.open("POST", "liste.php", true);   
 
    xhr_object.onreadystatechange = function() {   
       if(xhr_object.readyState == 4)   
          eval(xhr_object.responseText);   
    }   
 
    xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
    var data = "departement="+escape(l1.options[index].value)+"&form="+f.name+"&select=list2";   
    xhr_object.send(data);   
 }

liste.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
 
<?php
header('Content-type: text/html; charset=iso-8859-1');   
 
 // Déclaration des fichiers à utiliser
 require 'Connect.php';
 
 // On se connecte à la de données
 mysql_connect(SERVER, NAME, PASSWD) or die('Erreur SQL lors de la tentative de connexion à la base. Détails : '.mysql_error());
 mysql_select_db(BASE) or die('Erreur SQL lors de la sélection de la base. Détails : '.mysql_error());
                                   
 $query  = "SELECT DISTINCT Cp_Com FROM commune WHERE Dep_Com = '".$_POST["departement"]."'";   
 $query .= " ORDER BY Cp_Com;";   
 $result = @mysql_query($query);   
   
 echo 'var o = null;';   
 echo 'var s = document.forms["'.$_POST["form"].'"].elements["'.$_POST["select"].'"];';   
 echo 's.options.length = 0;';   
 while($r = mysql_fetch_array($result))   
     echo 's.options[s.options.length] = new Option("'.$r["departement"].'");';   
 
 @mysql_close($mysql_db); 
 ?>

Quelqu'un peut m'aider svp ? Ce serait sympa car c'est très urgent !

Merci d'avance...

**E.Bzz** · 10/04/2008, 09h19

Bonjour,
a priori il manque le "=" ici, ce qui a des chances de tout bloquer

Code :

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

echo "<option value=".$data['Dep_Com'].">

EDIT : de plus, des ' (simples quotes) autour de la value seraient bienvenu (si elle contient un espace =>

)

A+

**madevilts** · 10/04/2008, 09h23

dans ton func.js il te faut englober ton code dans une fonction que tu appeleras sur le onLoad de ton body. Car dans ton cas, le javascript s'éxecute avant le chargement complet de ta page.

**E.Bzz** · 10/04/2008, 09h44

Envoyé par madevilts

dans ton func.js il te faut englober ton code dans une fonction que tu appeleras sur le onLoad de ton body. Car dans ton cas, le javascript s'éxecute avant le chargement complet de ta page.

Elle est visiblement (et logiquement) appelée sur le onchange du premier select :

Code :

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

 onchange="request05(this.form)"

A+

**Jiraiya42** · 10/04/2008, 11h43

Merci pour vos réponses.

J'ai fait le changement avec le "=" et la simple quote mais ça ne fonctionne pas. La deuxième liste ne réagit pas selon le choix de la première. Le Deuxième reste désespérément vide.

Quelqu'un peut m'aider svp ? Merci d'avance...

EDIT : Je pense que le problème doit-être au niveau de la transmission de la valeur du select car j'ai testé la requête SQL et elle fonctionne très bien. Du coup, ça expliquerait le select vide mais je ne vois pas où est l'erreur !

**E.Bzz** · 10/04/2008, 12h05

Envoyé par Jiraiya42

EDIT : Je pense que le problème doit-être au niveau de la transmission de la valeur du select

Si tu fais un alert(data) avant l'envoi, les paramètres sont bons ?
Si oui : si tu entres l'url appelée par Ajax (avec les paramètres) directement dans la barre d'adresse, est-ce que le nav t'affiches bien le script JS qui doit être interprété par le eval() ?
En cas de doute, colle le résultat ici ...

A+

**Jiraiya42** · 10/04/2008, 18h30

J'ai mit le alert et il ne s'exécute même pas !

Code :

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

1
2
3
4
5
 
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");   
    var data = "departement="+escape(l1.options[index].value)+"&form="+f.name+"&select=list2";  
    alert(data);	
    xhr_object.send(data);

**E.Bzz** · 11/04/2008, 09h09

Envoyé par Jiraiya42

J'ai mit le alert et il ne s'exécute même pas !

Tu dois avoir des erreurs JS alors ?
Sont-elles bien activées dans le nav ?
As-tu testé avec Firebug ?
Peut-on avoir le code complet de request05() ?

A+

**madevilts** · 14/04/2008, 09h58

si le alert ne s'affiche pas c'est qu'il n'y a rien dans data ou que l'exécution s'est arrété sur une erreur plus tot.

[AJAX] Listes déroulantes liées

JavaScript

Discussions similaires

Partager

Partager