[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

**andry.aime** · 29/04/2009, 10h36

C'est normale car à chaque click sur ton select, tu fait appel à la fonction ajax qui modifie les options du select et choisi la première valeur par défaut.

onclick="ajax()"

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

Ah oui évidement

Comment puis-je changé cela pour que la fonction "ajax()" ne se relance pas quand je fais le 2eme click ?

**andry.aime** · 29/04/2009, 11h03

Utilise un variable globale que tu vérifies sa valeur suite au clic

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
var a=0;
function ajax()
	if (a==0){
{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);
	a=1;
}
}

**MeHo_** · 29/04/2009, 11h16

Merci beaucoup je ne savais pas que ça pourrait marcher

Problème désormais résolu

**MeHo_** · 29/04/2009, 12h12

Je me suis emballé un peu trop vite !
Ça marche mais pour 1 seul "select" (avec le comptage des click) qui appelle la fonction.

Et j'en ai pas mal, cf. sur l'image ("select" sur Aucune) !

Comment faire ? En passant le nom de l'id du select ? Je vais tester !

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

Mets alors le variable dans un Array, et chaque element de l'Array correspond à un select et tu met en paramètre l'indice correspondant dans ajax().

Code :

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

1
2
3
4
5
6
var a=[0,0,0,0];function ajax(num)
	if (a[num]==0){
.......
	a[num]=1;
}
}

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

Ok merci

Maintenant ça marche pour chaque "select" distinctement.

J'ai créé une fonction d'initialisation du tableau des "id_projet".
Je l'appelle comme ça dans le "select" :

Code :

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

onclick="initTabCountClick('<? echo $incrementeSelect; ?>'); ajax('<? echo $incrementeSelect++; ?>')"

Code :

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

1
2
3
4
5
6
7
var tabCountClick = new Array();

function initTabCountClick(id_du_projet)
{
	if( !isset(tabCountClick[id_du_projet]) )
		tabCountClick[id_du_projet] = 0;
}

Par contre, j'ai besoin de savoir si une cellule du tableau existe (en Javascript). Bien évidemment le code du "isset" ne marche pas.
Quelle est la fonction à utiliser, je ne trouve pas sur le net ?

Cordialement

**andry.aime** · 29/04/2009, 14h59

En natif, il n'y a pas mais fait le parcours et un break pour sortir du boucle dès que tu trouves la valeur recherchée.

**MeHo_** · 29/04/2009, 15h27

Je l'ai fait à l'envers.
J'ai regardé ce que ça donnait d'afficher une case qui n'est pas dans le tableau.
Résultat, ça retourne la valeur undefined

Du coup voila à quoi ressemble la fonction, trop dur

Code :

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

1
2
3
4
5
6
7
function initTabCountClick(id_du_projet)
{
	if( tabCountClick[id_du_projet] == undefined )
	{
		tabCountClick[id_du_projet] = 0;
	}
}

Voila c'est fini, merci du coup de main

**MeHo_** · 30/04/2009, 17h26

Allez hop je ré-ouvre.
Je me suis rendu compte que le script ne fonctionnait pas sur IE (oh tiens c'est bisar)

le code de mon fichier Ajax:

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
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
function ajax(id_du_projet)
{
	if (tabCountClick[id_du_projet] == 0)
	{
		var xhr = null;
		var url = "ajax/reponse.php";
		var browzer = "";
		
		if (window.XMLHttpRequest) { 
			xhr = new XMLHttpRequest();
			browzer = "FF";
		}
		else if (window.ActiveXObject) 
		{
			try {
					xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
				browzer = "IE";
		} else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   req = false; 
		}
		
		//on définit l'appel de la fonction au retour serveur
		xhr.onreadystatechange = function() { garnis_le_select(xhr, id_du_projet, browzer); };
		
		//on appelle le fichier reponse.php
		xhr.open("GET", url, true);
		xhr.send(null);
		
		tabCountClick[id_du_projet] = 1;
	}
}
			
function garnis_le_select(xhr, id_du_projet, browzer)
{
    var plop = "";
    if (xhr.readyState == 4) 
    {
		if ( browzer == "FF" )
		{
			var docXML= xhr.responseXML;
			var items = docXML.getElementsByTagName("projet");
			alert("coucou vvv");
			
			var monSelect = document.getElementById("les_projets_" + id_du_projet);
			var mesOptions = "";
			
			mesOptions += '<option value="0">Aucune</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'; 
			}
			alert(monSelect.id);
			monSelect.innerHTML = mesOptions;
		}
		else
		{
			var docXML= xhr.responseXML;
			var items = docXML.getElementsByTagName("projet");
			
			var monSelect = document.getElementById("les_projets_" + id_du_projet);
			var mesOptions = "";
			
			mesOptions += '<option value="0">Aucunezzz</option>';
			
			for (i=0; i<items.length; i++)
			{
				mesOptions += '<option value="'	+ items[i].childNodes[0].text +'">'	+ items[i].childNodes[1].text  +'</option>'; 
			}
			monSelect.innerHTML = mesOptions;
		}
	}
}