[AJAX] Mise à jour du "select" en ajax
Bonjour
Hier j'ai posté un message dans la partie Php (ICI) visant à optimiser mon code Php.
On m'a conseiller d'utiliser de l'Ajax ! Je me suis renseigné mais je n'arrive pas à faire fonctionner correctement le script. (récup sur développer.com ICI)
Le mécanisme est pourtant simple, quand je clique sur mon select (qui est vide à la base), la fonction Ajax est sensé ajouter les "options" du select provenant de la base de données.
Le fichier ajax.html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Exemple 5</title>
<link rel="stylesheet" href="exemple5.css" type="text/css" />
</head>
<body>
<script type="text/javascript" src="ajax.js"></script>
<div class="tumevoispas" id="message">Veuillez patienter...</div>
<form>
<select name="projet" id="id_projet" onclick="ajax(this)"></select>
</form>
<div id="plop"></div>
</body>
</html> |
Le fichier reponse.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
| <?
header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?>\n";
echo "<exemple>\n";
$serveur_connect = "localhost";
$login_connect = "log";
$pwd_connect = "mdp";
$base_connect = "bdd";
$db_connect = mysql_pconnect($serveur_connect, $login_connect, $pwd_connect) or die("Connexion à la base de données impossible !");
mysql_select_db($base_connect,$db_connect);
//on lance la requete
$query = "SELECT id_projet, nom_projet
FROM projet
WHERE actif = 1
ORDER BY nom_projet ASC";
$result = mysql_query($query, $db_connect) or die (mysql_error($db_connect));
//sleep(5);
//On boucle sur le resultat
while ($row = mysql_fetch_object($result, MYSQL_NUM))
{
echo "<projet><id>". $row->id_projet ."</id><nom>". $row->nom_projet ."</nom></projet>\n";
}
echo "</exemple>\n";
?> |
Le fichier ajax.js :
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
| function ajax()
{
var xhr=null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//on définit l'appel de la fonction au retour serveur
xhr.onreadystatechange = function() { garnis_le_select(xhr); };
//on affiche le message d'acceuil
document.getElementById("message").className="tumevois";
//on appelle le fichier reponse.php
xhr.open("GET", "reponse.php", true);
xhr.send(null);
}
function garnis_le_select(xhr)
{
var plop = "";
if (xhr.readyState==4)
{
var docXML= xhr.responseXML;
var items = docXML.getElementsByTagName("projet")
var monSelect = document.getElementById("id_projet");
var mesOptions = "";
document.getElementById("message").className="tumevoispas";
for (i=0; i<items.length; i++)
{
mesOptions += '<option value="'+ items.item(i).firstChild.data +'">'+ items.item(i).lastChild.data +'</option>\n';
}
monSelect.innerHTML = mesOptions;
var monDiv = document.getElementById("plop");
monDiv.innerHTML = mesOptions;
}
} |
A un moment j'arrivais à remplir mon select mais il affichait des "undefined", le soucis c'est que j'ai fait des modif depuis et ça ne marche plus du tout.
Le probleme se situe dans la fonction garnis_le_select(xhr) !
Si quelqu'un pouvait me conseiller ce serai cool :king:
Cordialement
