[AJAX] Liste lier - Ajax - XMLHttpRequest

**Miyuki** · 02/03/2012, 15h08

Bonjour,

J’ai un projet d'application à faire, pour cela j'ai besoin de lier plusieurs liste déroulante.

Étant débutante en développement web je préfère essayer en liant deux liste (comme sur le tuto fait par Siddh, que j'ai utilisé pour faire mon test.)

Mes deux listes sont alimenter par 2 table MySQL

cmarque_imprimantes
cimprimantes

Pour alimenter la première liste qui donne les marques d'imprimantes.
Une fois le choix de la marque la deuxième liste fait apparaitre le modèle existant dans l'entreprise correspondant à la marque choisie.

Voici mon code:

test_ajax2.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
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!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">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test AJAX Liste Liers</title>
		<script type="text/javascript">
			<!-- 
			function getXhr()
			{
				var xhr = null;
 
				if (window.XMLHttpRequest) 
					xhr = new XMLHttpRequest ();				
				else if (window.ActiveXObjet) 
				{
					try
					{
						xhr = new ActiveXObjet ("Msxml2.XMLHTTP");
					}
					catch (e)
					{
						xhr = new ActiveXObjet ("Microsoft.XMLHTTP");
					}
				}
				else
				{
					alert("Votre Navigateur ne supporte pas les objets XMLHTTPRequest ... ");
					xhr = false;
				}
				return xhr;
			}
 
			function go()
			{
				var xhr = getXhr();
				xhr.onreadystatechange = function()
				{
					if (xhr.readyState == 4 && xhr.status == 200)
					{
						leselct = xhr.responseText;
						document.getElementById ('modele').innerHTML = leselect;
					}
				}				
				xhr.open("POST","ajax_modele.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('marque');
				idmarque = sel.options[sel.selectedIndex].value;
				xhr.send("idMarque="+idmarque);
			}			
 
			//-->
		</script>
	</head>
 
	<body>
		<form>
			<fieldset>
				<legend> Ajout de consommables au stock : </legend>
				<label>Marque</label></br>
				<select name='marque' id='marque' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?php
						try
						{
							//connection à la base de donnée MySQL
							$bdd = new PDO('mysql:host=localhost;dbname=gestion_des_consommables', 'root', '');
						}
						catch(Exception $e)
						{
							//si erreur alors message + arret
							die('Erreur : '.$e->getMessage());
						}
 
						//si tout et O.K alors sa continue
						//recuperation du contenue de la table
						$ReponsesRequete_1 = $bdd->query('SELECT * FROM cmarque_imprimantes ORDER BY Nom');
 
						while ($Enregistrement_1 = $ReponsesRequete_1->fetch()) 
						{
							$Marque = $Enregistrement_1['Nom'];
							$ID_Marque = $Enregistrement_1['ID'];
 
							/*echo '<option value=>'.$Marque . '</option>\n';*/
							echo "<option value='".$ID_Marque."'>".$Marque."</option>";
						}					
					?>
				</select>
				</br></br>
				<label>Modele</label>
				<div id='div_modele'>
				<select name='modele' id='modele'>
					<option value='-1'>Choisir Marque</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

ajax_modele.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
<?php
	echo "<select name='modele' id='modele'>"
	if(isset($_POST["idMarque"]))
	{
		try
		{
			//connection à la base de donnée MySQL
			$bdd = new PDO('mysql:host=localhost;dbname=gestion_des_consommables', 'root', '');
		}
		catch(Exception $e)
		{
			//si erreur alors message + arret
			die('Erreur : '.$e->getMessage());
		}
 
		//si tout et O.K alors sa continue
		//recuperation du contenue de la table
		$ReponsesRequete_2 = $bdd->query('SELECT DISTINCT * FROM cimprimantes WHERE idMarque=' .$_POST['idMarque'] . 'ORDER BY Modele');
 
		while ($Enregistrement_2 = $ReponsesRequete_2->fetch()) 
		{
			$Modele = $Enregistrement_2['Modele'];
			$ID_Modele = $Enregistrement_2['ID'];
 
			/*echo '<option>'.$Modele . '</option>\n';*/
			echo "<option value='".$ID_Modele."'>".$Modele."</option>";
		}
	}
	echo "</select>";
?

Un moment j'ai modifier ma fonction "go" dans test_ajax2.php pour voir ce que ce passe.
voici le code de ma deuxième fonction "go" :

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
function go()
			{
				var xhr = getXhr();
				xhr.onreadystatechange = function()
				{
					alert ("1");
					alert ("ready state:"+ xhr.readyState);
					alert ("status:"+ xhr.status);
					if (xhr.readyState == 4 && xhr.status == 200)
					{
						alert ("2");
						leselct = xhr.responseText;
						document.getElementById ('modele').innerHTML = leselect;          
 
						alert (leselect);
					}
				}   
 
				xhr.open("POST","ajax_modele.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('marque');
				idmarque = sel.option[sel.selectedIndex].value;          
 
				alert (idmarque);
 
				xhr.send("idMarque="+idmarque);
			}

ceci me dit entre autre que mon "readyState" reste à 1 quelque soit mon choix dans ma première liste.

j'avais aussi mis dans ma page ajax_modele.php
ceci;

Code :

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

echo'<script LANGUAGE="JavaScript">alert("ici");</SCRIPT>';

quand je lance ma page principale je n'est pas l'alerte "ici" donc il ne voie pas ma page ajax_modele.php

J'ai beaucoup chercher je n'arrive pas à trouver le problème, le pire c'est que e suis sur que c'est surement une erreur bête u_u..

Par la suite j'aurais 4 liste à lier alimenter par plusieurs table SQL dans ma base de donnée (en espèrent que ce soie possible sinon je ne sais pas comment coder mon application que j'ai pour projet.)

Je vous remercie pour votre patience et votre aide.
Cordialement

**NoSmoking** · 02/03/2012, 22h32

Bonsoir,
il te faut au moins corriger les erreurs d'écriture
dans ton premier code:

ligne 41 document.getElemetById ('modele').innerHTML = leselect;

il manque un n, document.getElementById ('modele').innerHTML = leselect;, cela fait planter le script.

dans ton troisième code:
- même erreur que ci dessus en ligne 13
- manque le a de alert ligne 8

Commence par corriger cela...

**andry.aime** · 05/03/2012, 07h38

Bonjour,

Avant même que tu puisses cliquer sur le premier alert, le readyState aura déjà une nouvelle valeur.

A+.

**Miyuki** · 05/03/2012, 13h52

NoSmoking >

J'avais crue avoir rectifier toutes les petits erreurs mais non ^^°

Correction faite merci beaucoup.
Mais j'ai toujours mon problème :s

Andry > ok merci ^^

Je continue à chercher.
Merci pour vos réponse.

EDITE :
ça fonctionne.
Excusé moi, il y avais juste une erreur de syntaxe sur ma deuxième requête SQL!

Du coup je vais attaquer les autres liaisons à faire.

Merci encore pour votre aide.
Cordialement

[AJAX] Liste lier - Ajax - XMLHttpRequest

AJAX

Vue hybride

Discussions similaires

Partager

Partager