[AJAX] Onchange() avec select

**Canyata** · 09/09/2010, 15h51

Bonjour à tous,

Je souhaite remplir 3 listboxs de manière dynamique.

La première est chargée au début de la page (Niveau1)

Code :

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

1
2
3
4
5
6
7
8
echo"<select name='niveau1' id='niveau1' onchange='go_Niveau1()'STYLE='width:200'>";
            echo"<option value='-1'>Choisir un type de panne</option>";
            $sql = "select ID_N1 , NOM_N1 from niveau1 ORDER BY NOM_N1";
            $result = mysql_query($sql);
            while ($row = mysql_fetch_assoc($result)) {
                        echo "<option value='" . $row["ID_N1"] . "'>" . $row["NOM_N1"] . "</option>";
                                            }
echo"</select>";

Le deuxieme (Niveau 2) sera chargée en fonction du choix fait dans Niveau1.

Pour ce faire, lorsqu'un choix est réaliser dans Niveau1 un onchange='go_Niveau1()' a été crée. Sur la page Vue_editer.php où est écrit le bout de code précédent, il y a en entête:

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
<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;
            }
function go_Niveau1(){
            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('niveau2').innerHTML = leselect;
           }
}
// Ici on va voir comment faire du post
xhr.open("POST","vue/ajaxNiveau1.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('niveau1');
idniveau1 = sel.options[sel.selectedIndex].value;
xhr.send("ID_N1="+idniveau1);
}
 </script>

la fonction getXHr test si le navigateur supporte le XMLHttpRequest.
La deuxieme go_Niveau1() s'effectue lors d'un changement sur le select niveau1.

Jusqu'a la tout marche bien et la fonction go_Niveau1() appel mon ajax qui donne ça:

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
 
<?php
include_once("../metier/global.php");
include("../metier/bd.php");
 
$connection = OuvrirBD();
echo "<select name='niveau2'id='niveau2' STYLE='width:200'>";
            if(isset($_POST["ID_N1"])){
                        $sql="SELECT DISTINCT combinaison.ID_N2, niveau2.NOM_N2
                                FROM niveau2, combinaison
                                WHERE ID_N1 = ".$_POST["ID_N1"]."
                                AND combinaison.ID_N2 = niveau2.ID_N2
                                ORDER BY NOM_N2";
                        $result=mysql_query($sql);
                        while( $row = mysql_fetch_assoc($result) ){
                                echo "<option value='".$row["ID_N2"]."'>".$row["NOM_N2"]."</option>";
                        }
           }
echo "</select>";
FermerBD( $connection );
?>

A l'heure actuelle, mon select niveau1 se rempli bien ainsi que mon select niveau2 pas de soucis

Et maintenant les choses se complique un peu.

En fonction du choix qui sera fait dans le select de niveau 2.

mon select niveau2 et mon select niveau 3 ressemblent a ça (écrit sur Vue_editer.php):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
echo"<div id='niveau2' style='display:inline'>";
            echo"<select name='niveau2'id='niveau2' onchange='go_Niveau2()'STYLE='width:200'>";
                        echo"<option value='-1'>-</option>";
            echo "</select>";
echo"</div>";
echo"<div id='niveau3' style='display:inline'>";
            echo"<select name='niveau3'id='niveau3' STYLE='width:200'>";
                        echo"<option value='-1'>-</option>";
            echo "</select>";
echo"</div>";

Il y a également dans la partie script au début de Vue_editer.php cette fonction:

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
 
function go_Niveau2(){
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('niveau3').innerHTML = leselect;
}
}
 
// Ici on va voir comment faire du post
xhr.open("POST","vue/ajaxNiveau2.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('niveau2');
idniveau2 = sel.options[sel.selectedIndex].value;
xhr.send("ID_N2="+idniveau2);
}

Et donc l'ajax ajaxNiveau2:

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
 
<?php
include_once("../metier/global.php");
include("../metier/bd.php");
 
$connection = OuvrirBD();
echo "<select name='niveau3'id='niveau3' STYLE='width:200'>";
            if(isset($_POST["ID_N2"])){
                        $sql="SELECT DISTINCT combinaison.ID_N3, niveau3.NOM_N3
                                FROM niveau3, combinaison
                                WHERE ID_N2 = ".$_POST["ID_N2"]."
                                AND combinaison.ID_N3 = niveau3.ID_N3
                                ORDER BY NOM_N3";
                        $result=mysql_query($sql);
                        while( $row = mysql_fetch_assoc($result) ){
                                echo "<option value='".$row["ID_N3"]."'>".$row["NOM_N3"]."</option>";
                        }
            }
echo "</select>";
FermerBD( $connection );
?>

mais a partir de la, ça ne marche plus impossible de remplir le select niveau 3 dynamiquement en fonction du choix du select de niveau2.

Quelqu'un peut m'aider???

Je remet le code en 1 bout ici:

Vue_editer.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
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
 
<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;
            }
            function go_Niveau1(){
                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('niveau2').innerHTML = leselect;
                    }
                }
 
                // Ici on va voir comment faire du post
                xhr.open("POST","vue/ajaxNiveau1.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('niveau1');
                idniveau1 = sel.options[sel.selectedIndex].value;
                xhr.send("ID_N1="+idniveau1);
            }
            function go_Niveau2(){
                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('niveau3').innerHTML = leselect;
                    }
                }
 
                // Ici on va voir comment faire du post
                xhr.open("POST","vue/ajaxNiveau2.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('niveau2');
                idniveau2 = sel.options[sel.selectedIndex].value;
                xhr.send("ID_N2="+idniveau2);
            }
        </script>
.........
.........
.........
echo"<div id='Description'>";
                            echo "<h2><u>Description</u></h2>";
                            echo"<table>";
                                echo"<tr>";
                                    echo"<td>";
                                        echo"<select name='niveau1' id='niveau1' onblor='go_Niveau1()'STYLE='width:200'>";
                                            echo"<option value='-1'>Choisir un type de panne</option>";
                                            $sql = "select ID_N1 , NOM_N1 from niveau1 ORDER BY NOM_N1";
                                            $result = mysql_query($sql);
                                            while ($row = mysql_fetch_assoc($result)) {
                                                echo "<option value='" . $row["ID_N1"] . "'>" . $row["NOM_N1"] . "</option>";
                                            }
                                        echo"</select>";
                                    echo"</td>";
                                    echo"<td>";
                                        echo"<div id='niveau2' style='display:inline'>";
                                            echo"<select name='niveau2'id='niveau2' onclick='go_Niveau2()'STYLE='width:200'>";
                                                echo"<option value='-1'>-</option>";
                                            echo "</select>";
                                       echo"</div>";
                                    echo"</td>";
                                    echo"<td>";
                                        echo"<div id='niveau3' style='display:inline'>";
                                            echo"<select name='niveau3'id='niveau3' STYLE='width:200'>";
                                                echo"<option value='-1'>-</option>";
                                            echo "</select>";
                                        echo"</div>";
                                    echo"</td>";
                                echo"</tr>";
                            echo"</table>";
                        echo"</div>";

ajaxNiveau1:

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
 
<?php
include_once("../metier/global.php");
include("../metier/bd.php");
 
$connection = OuvrirBD();
echo "<select name='niveau2'id='niveau2' STYLE='width:200'>";
        if(isset($_POST["ID_N1"])){
            $sql="SELECT DISTINCT combinaison.ID_N2, niveau2.NOM_N2
                  FROM niveau2, combinaison
                  WHERE ID_N1 = ".$_POST["ID_N1"]."
                  AND combinaison.ID_N2 = niveau2.ID_N2
                  ORDER BY NOM_N2";
            $result=mysql_query($sql);
            while( $row = mysql_fetch_assoc($result) ){
                    echo "<option value='".$row["ID_N2"]."'>".$row["NOM_N2"]."</option>";
            }
        }
echo "</select>";
FermerBD( $connection );
?>

ajaxNiveau2:

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
 
<?php
include_once("../metier/global.php");
include("../metier/bd.php");
 
$connection = OuvrirBD();
echo "<select name='niveau3'id='niveau3' STYLE='width:200'>";
        if(isset($_POST["ID_N2"])){
            $sql="SELECT DISTINCT combinaison.ID_N3, niveau3.NOM_N3
                  FROM niveau3, combinaison
                  WHERE ID_N2 = ".$_POST["ID_N2"]."
                  AND combinaison.ID_N3 = niveau3.ID_N3
                  ORDER BY NOM_N3";
            $result=mysql_query($sql);
            while( $row = mysql_fetch_assoc($result) ){
                    echo "<option value='".$row["ID_N3"]."'>".$row["NOM_N3"]."</option>";
            }
        }
echo "</select>";
FermerBD( $connection );
?>

[AJAX] Onchange() avec select

AJAX

Mode arborescent

Discussions similaires

Partager

Partager