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 : 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
<!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 : 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
<?
	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 : 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
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
Cordialement