Discussion :

[dirty_harry]

Bonjour à tous,

En m'inspirant du tutoriel Ajax de Developpez j'ai essayez de remplir une liste déroulante dynamiquement en fonction de la valeur saisie dans une zone de texte (en utilisant l'évènement onblur) . Au momment ou sa devrait s'executer j'ai un "error on page" en bas de mon navigateur et rien ne se charge (a noter que 'je' suis sous IE6)
Formulaire :

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
 
<form method="POST" >
		<label for="tester">tester</label><input type="text" id="tester" name="tester"><br/>
		<table>
			<tr>
				<td>
					<label for="line">Line</label>
				</td>
				<td>
					<input type="text" id="line" name="line" onblur='go()'>
				</td>
				<td>
					<label for="Product">Produit</label>
				</td>
				<td>
					<select name="Product" id="Product">
						<option value="-1"> Selectionnez un produit</option>
					</select>
				</td>
			</tr>
		<table>
	</form>

Code JavaScript :

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
<script type='text/javascript'>
 
 
	 		function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					///alert('toto');
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('Product').innerHTML = leselect;
 
					}
 
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxProduct.php5",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				sel = document.getElementById('line');
				idline = sel.options[sel.selectedIndex].value;
 
				xhr.send("idline="+idline);
			}

en gros c'est le même que celui du tutoriel en changant les noms de variables. En placant des alarme, j'ai l'impression que sa ne rentre pas dans la condition:

Code :

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

if(xhr.readyState == 4 && xhr.status == 200)

mon code PHP devrait fonctioné puisque je l'ai testé seul mais bon au cas ou le voila quand même:

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
echo '<select id="Product">';
	//echo "<select name='Product'>";
	if(isset($_POST["idline"])){
		$line=$_POST["idline"];
	}
	else
	{
		$line='001005';
	}
		$user2='user';
		$pass2='pass';
		$dsn2='mysql:host=host;dbname=name';
		try{
			$connect2 = new PDO($dsn2,$user2,$pass2);
			$sql="SELECT DISTINCT mon_champs from ma_table where mon_champs='".$line."'";
 
			foreach  ($connect2->query($sql) as $row) {
				print '<option value="'.$row['mon_champs'].'">'.$row['mon_champs']. "</option>";
 
			}
		}
		catch(PDOException $e){
			echo "erreur:".$e->getMessage();
			die();
		}	
	echo "</select>";

Si quelqu'un voit pourquoi sa ne marche pas merci d'avance pour votre aide.

[DoubleU]

Si tu cliques sur le /!\ à coté du message, tu devrais avoir une boite qui s'affiche avec un peu plus de détails.

Parce que la, à première vu je ne vois pas ce qui peut poser problème.

[dirty_harry]

J'ai cliqué sur le /!\ j'ai trouvé une première erreur dans le script:

Code :

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

sel.options

comme je tiens mes données d'un input de type texte je n'ai pas d'option j'avais donc l'erreur sel. option is null or is not an object. en corrigeant cette erreur et en remplacant:

Code :

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

idline = sel.options[sel.selectedIndex].value;

par

Code :

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

idline = sel.value;

j'ai une autre erreur : Unknown runtime error
ce qui ne m'avance pas beaucoup

[DoubleU]

Joli, en effet

Essaie de mettre des alert ligne par ligne pour voir ou se situe l'erreur.

[dirty_harry]

Sa en serait presque amusant si ce n'était pas pour chercher des erreur:

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
function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
 
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					alert('toto');//ICI ET AU DESSUS =>Renvois Plusieurs alerte
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
alert('toto');//DANS LE IF=>Une seul alerte
 
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('Product').innerHTML = leselect;
 
					}
 
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxProduct.php5",true);
alert('toto');//Apres le IF une seul alerte
				alert('toto');
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				sel = document.getElementById('line');
				idline = sel.value;
 
				xhr.send("idline="+idline);
			}

je ne vois vraiment pas d'où sa vient.

[andry.aime]

Bonjour,
1- N'utilises pas la même valeur pour l'attribut name et id, ça pose souvent un problème sous IE.

<select name="Product" id="Product">

document.getElementById('Product').innerHTML = leselect;

2- le select sous IE ne supporte pas innerHTML, utilises un div. Mais je te conseille d'utiliser un retour XML avec lequel tu mets à jour ton select sans utiliser innerHTML.

[dirty_harry]

Merci beaucoup des conseils, sa marche avec le retour XML. j'ai legerement chagé la structure du script finalemment mais sa marche!!
Encore merci!