[AJAX] Est-il possible d'améliorer ce code (listes déroulantes liées)
Bonjour tout le monde,
Pour une fois, je ne viens pas pour un code qui ne fonctionne pas mais je viens plutôt pour savoir si il ne serait pas possible d'améliorer (simplifier) mon code.
Mon code permet de lier 4 listes déroulantes, en voici le détail :
Je remplis la première liste déroulante :
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
| <?php
//CECI N'EST PAS DE L'AJAX !!!! Remplissage de la première liste déroulante SANS AJAX
include('connexion.php');
$sql = "SELECT DISTINCT NOM_ANNEE FROM cours WHERE MNEMONIC IN (SELECT MNEMONIC FROM enseigner WHERE MATRICULE_PROF = '" . $_SESSION['Matricule'] . "')";
// L'echo ci-dessous envoie une alerte javascript pour montrer le matricule
// echo'<script LANGUAGE="JavaScript">alert("'.$_SESSION['Matricule'].'");</SCRIPT>';
$query = mysql_query($sql);
$nbrow = mysql_num_rows($query);
?>
<form>
<!--Le select ci-dessous contient alert(this.value) qui permet de montrer la valeur qui va être envoyée à la fonction go()-->
<!--<select name='annee' id='annee' onchange='alert(this.value);go(this.value)'>-->
<select name='annee' id='annee' onchange='go(this.value)'>
<option value='-1'> (1) Choisissez une année </option>
<?php
while($row = mysql_fetch_assoc($query))
{
echo "<option value='".$row["NOM_ANNEE"]."'>".$row["NOM_ANNEE"]."</option>";
}
?>
</select>
</form>
<!-- appel du code AJAX pour compléter la liste déroulante suivante qui est la liste déroulante avec les mnémonics -->
<script language="javascript" src="Scripts/Ajax_Listes_Deroulantes_Generiques.js"></script> |
Le changement d'année exécute cette fonction :
Code:
<select name='annee' id='annee' onchange='go(this.value)'>
dont voici le code :
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
| 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
{
xhr = false;
}
return xhr;
}
//annee est égal à this.value
//1ère étape
function go(annee)
{
var xhr = getXhr();
xhr.onreadystatechange = function()
{ //fin de 1ère étape jusqu'à ce que état et status ne sont pas correctes
//3e étape (dès que status et état sont prêt)
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0 ) )
{
leselect = xhr.responseText;
//alert(leselect);
//c'eest ici que l'on remplit le contenu de la liste déroulante avec le texte retourné par le serveur (AJAX)
document.getElementById('select_Nom_mnemonics').innerHTML = leselect;
//alert("liste déroulante 1");
//alert(document.getElementById('select_Nom_mnemonics').value);
fnctcours(document.getElementById('select_Nom_mnemonics').value);
}
}
//2e étape
xhr.open("POST","Scripts/ajaxMnemonics.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("NOM_ANNEE="+annee);
} |
j'appelle ajaxMnemonics.php via ce code en lui passant l'année:
Code:
1
2
3
| xhr.open("POST","Scripts/ajaxMnemonics.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send("NOM_ANNEE="+annee); |
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
| <?php
//Ce code permet d'afficher le nom des mnémonics en faisant un choix dans la liste des années
session_start();
//je crée cette variable de session ANNEE car étrangement, dans la page ajaxTypes, l'année n'est reconnue dans une variable $_POST[] et...
//... dans ma requête SQL j'obtiens Select... where année = ''; un blanc au lieu de l'année
$_SESSION['ANNEE'] = $_POST["NOM_ANNEE"];
//print_r($_POST);
if(isset($_POST['NOM_ANNEE']))
{
$conn = mysql_connect("localhost","root","mdp");
$db=mysql_select_db("pharma", $conn);
$res = "SELECT DISTINCT MNEMONIC FROM cours WHERE MNEMONIC IN (SELECT DISTINCT MNEMONIC FROM enseigner WHERE MATRICULE_PROF = '" . $_SESSION['Matricule'] . "') AND NOM_ANNEE = '" . $_POST['NOM_ANNEE'] . "'";
$res = mysql_query($res, $conn);
while($row = mysql_fetch_assoc($res))
{
echo "<option value='".$row["MNEMONIC"]."'>".$row["MNEMONIC"]."</option>";
}
}
?> |
je reviens dans mon js, je remplis la liste déroulante contenant les cours (la seconde liste déroulante) et j'appelle la prochaine fonction en lui passant le cours:
Code:
fnctcours(document.getElementById('select_Nom_mnemonics').value);
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
| function fnctcours(cours)
{ //1ère partie de l'exécution ajax
var xhr2 = getXhr();
xhr2.onreadystatechange = function()
{
//fin de la 1ère partie de l'exécution ajax tant que etat et status ne sont pas ok
if(xhr2.readyState == 4 && (xhr2.status == 200 || xhr2.status == 0 ) )
//dès que le if est franchi, 3e partie de l'exécution AJAX
{
leselect2 = xhr2.responseText;
//alert(leselect2);
document.getElementById('select_Nom_types').innerHTML = leselect2;
//je pense que je dois juste passer la valeur du type car la valeur du mnemonique est déjà connue grâce au $_POST[MNEMONIC] (à vérifier)
//partie liste déroulante Catégorie
fnctcategories(document.getElementById('select_Nom_types').value);
}
}
//partie liste déroulante Types
//2e partie de l'exécution AJAX
xhr2.open("POST","Scripts/ajaxTypes.php",true);
xhr2.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr2.send("MNEMONIC="+cours);
} |
Je vais donc dans ajaxTypes.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
| <?php
session_start();
$_SESSION['MNEMONIC'] = $_POST['MNEMONIC'];
//print_r($_SESSION);
if(isset($_POST["MNEMONIC"]))
{
$conn = mysql_connect("localhost","root","mdp");
$db=mysql_select_db("pharma", $conn);
$res = "SELECT DISTINCT TYPE_DE_COURS FROM inscrits_en WHERE MNEMONIC = '" .$_POST["MNEMONIC"]."' ";
//il faut faire echo'<script LANGUAGE="JavaScript">alert("'.$res.'")... AVANT mysql_query afin d'afficher la requête sql, une variable de session pourrait ne pas être reconnue, c'est une façon facile de le voir.
echo'<script LANGUAGE="JavaScript">alert("'.$res.'");</SCRIPT>';
$res = mysql_query($res, $conn);
$nombre = mysql_num_rows($res);
while($row = mysql_fetch_assoc($res))
{
echo "<option value='".$row["TYPE_DE_COURS"]."'>".$row["TYPE_DE_COURS"]."</option>";
}
}
else echo ('pas bon');
?> |
je reviens dans le js, on remplit la troisième liste déroulante et on appelle la fonction suivante :
Code:
fnctcategories(document.getElementById('select_Nom_types').value);
dont voici le code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
function fnctcategories(type)
{
//1ère étape
var xhr3 = getXhr();
xhr3.onreadystatechange = function()
{
//fin de 1ère étape jusqu'à ce que état et status ne sont pas correctes
if(xhr3.readyState == 4 && (xhr3.status == 200 || xhr3.status == 0 ) )
{
//3e étape (dès que status et état sont prêt)
leselect3 = xhr3.responseText;
//alert(leselect3);
document.getElementById('select_Categories').innerHTML = leselect3;
}
}
xhr3.open("POST","Scripts/ajaxCategories.php",true);
xhr3.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr3.send("NOM_DU_TYPE="+type);
} |
on appelle donc ajaxCategories.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
| <?php
session_start();
$_SESSION['TYPE_DE_COURS'] = $_POST['NOM_DU_TYPE'];
//print_r($_SESSION);
if(isset($_SESSION["MNEMONIC"]))
{
$conn = mysql_connect("localhost","root","mdp");
$db=mysql_select_db("pharma", $conn);
$res = "SELECT DISTINCT CATEGORIE FROM inscrits_en WHERE MNEMONIC = '" . $_SESSION['MNEMONIC'] . "' AND TYPE_DE_COURS = '" . $_SESSION['TYPE_DE_COURS'] . "'";
//il faut faire echo'<script LANGUAGE="JavaScript">alert("'.$res.'")... AVANT mysql_query afin d'afficher la requête sql, une variable de session pourrait ne pas être reconnue, c'est une façon facile de le voir.
$res = mysql_query($res, $conn);
$nombre = mysql_num_rows($res);
while($row = mysql_fetch_assoc($res))
{
echo "<option value='".$row["CATEGORIE"]."'>".$row["CATEGORIE"]."</option>";
}
}
else echo'<script LANGUAGE="JavaScript">alert("pas bon");</SCRIPT>';
?> |
On revient dans le js, on remplit la 4e liste avec le contenu renvoyé par le serveur.
Je me demandais si il serait possible de simplifier ce code ?
J'espère en même temps que ce code aidera quelqu'un.
Merci d'avance pour l'aide et bon Dimanche.
beegees
