[AJAX] Onchange() avec select
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:
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:
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:
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:
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:
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:
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:
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:
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:
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 );
?> |