[AJAX] Mise à jour du "select" en ajax

**MeHo_** · 28/04/2009, 11h51

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

**andry.aime** · 28/04/2009, 12h16

Salut,

Code :

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

mesOptions += '<option value="'+items.getElementsByTagName("id")[i].childNodes[0].nodeValue'">'+ items.getElementsByTagName("nom")[i].childNodes[0].nodeValue  +'</option>\n';

**MeHo_** · 28/04/2009, 12h24

Je viens de tester, j'ai ajouter le petit "+" qui manquait mais ça ne marche pas

Merci de ton aide

**andry.aime** · 28/04/2009, 12h35

Tu as mis une paramètre dans l'appel de la fonction ajax or que ajax n'a pas de paramètre.

Code :

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

<select name="projet" id="id_projet" onclick="ajax()"></select>

**MeHo_** · 28/04/2009, 13h19

Ah oui pas bête, j'avais pas fait gaffe !

Mon fichier Php fait bien son boulot !

Mais j'ai toujours une erreur sur Firebug

pour la ligne :

Code :

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

mesOptions += '<option value="'+ items.getElementsByTagName("id")[i].childNodes[0].nodeValue +'">'+ items.getElementsByTagName("nom")[i].childNodes[0].nodeValue +'</option>\n';

Par contre en faisant ça :

Code :

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

mesOptions += '<option value="'+ items.item(i).getElementsByTagName("id").data +'">'+ items.item(i).getElementsByTagName("nom").data  +'</option>\n';

Le select se remplie bien, mais avec des valeurs à "undefined".

On y est presque

**MeHo_** · 29/04/2009, 10h23

C'est bon j'y suis arrivé, voici le code de mes 3 fichiers :

Le fichier ajax.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
<!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>
		<meta name="title" content="" />
		<meta name="author" content="" />
		<meta name="subject" content="" />
		<meta name="language" content="fr" />
		<meta name="keywords" content="" />
 
	</head>
	<body>
		<script type="text/javascript" src="ajax.js"></script>
		<form name="form_projet" method="POST" action="">
		<table>
			<tr>
				<td width="700">
					<select name="projet" id="id_projet" onclick="ajax()"><option value="0">Choix :</option></select>
				</td>
			</tr>
			<tr>
				<td>
					<div id="plop"></div>
				</td>
			</tr>
		</table>
		</form>
	</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>";
 
	$serveur_connect = "localhost";
	$login_connect = "root";
	$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))
	{
		echo "\n\t<projet>\n\t\t<id>". $row->id_projet ."</id>\n\t\t<nom>". $row->nom_projet ."</nom>\n\t</projet>";
	}
	echo "\n</exemple>";
?>

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
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 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 = "";
 
	mesOptions += '<option value="0">Choix :</option>\n';
 
    	for (i=0; i<items.length; i++)
    	{
		mesOptions += '\t\t<option value="'+ items[i].getElementsByTagName("id")[0].firstChild.nodeValue +'">'+ items[i].getElementsByTagName("nom")[0].firstChild.nodeValue  +'</option>\n<br>'; 
    	}
	monSelect.innerHTML = mesOptions;
    }
}

Par contre, il y a un soucis, quand je sélectionne un choix du "select", il me sélectionne la 1ere valeur alors qu'aucune valeur n'est à "selected".

Est ce normal ?

Cordialement

[AJAX] Mise à jour du "select" en ajax

AJAX

Vue hybride

Discussions similaires

Partager

Partager