[AJAX] liste dynamique restant vide >> XMLHTTPREQUEST

**sativa808** · 11/08/2008, 19h20

bonjour tout le monde,

Vous allez crier car c'est un problème récurrent sur les forums!
encore un soucis avec une liste traitée en ajax (sans xml

),
j ai parcouru le web en m'inspirant de divers cours traitant de "xmlhttprequest"
mais je reste tout de même coincé depuis plus de 2 jour maintenant.

L'idée est d'entrer un code postal dans un champ texte,
puis de generer à coté une liste deroulante affichant le ou les résultats.

Je mets tous ce que j ai fais pour l instant:

La table SQL

Code :

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

1
2
3
4
5
6
7
 
CREATE TABLE `cpville` (
  `idville` int(10) NOT NULL auto_increment,
  `cp` varchar(5) NOT NULL default '',
  `ville` varchar(20) NOT NULL default '',
  PRIMARY KEY  (`idville`,`cp`,`ville`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

La page formulaire et le 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
46
47
48
49
50
51
 
<script language="Javascript" type="text/JavaScript">
var xhr = null;
function getXhr(){
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; 				
			 } 
			 }
			 /* Méthode qui sera appelée sur le click du bouton*/
 
			 function go()
			 {	
			 getXhr() 
 
			 xhr.onreadystatechange = function(){
 
			 if(xhr.readyState == 4 && xhr.status == 200){
			 document.getElementById("CP").innerHTML;
// Texte renvoyé par la page cible (url_cible)
var valeur_retour = xhr.responseText;
 
document.getElementById("Ville").value = valeur_retour;
}
}
// envoi avec post 
  xhr.open("POST", "testcp.php", true);
 // ne pas oublier ça pour le post 
 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 var sel = document.getElementById("CP");
 id_dept = sel.value;
 xhr.send('CP='+ id_dept);
}
 
<body> // formulaire 
<form name="form" method="post" action="testcp.php">
<label>Secteur d'activité:</label> 
<input type="text" size="5" name="cp" id="CP" onblur="go()" /> 
<div>    
	<select id ='ville' name='ville' >
	<option value='-1'>Choisir un secteur</option>
	</select></div>

le traitement PHP SQL

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
 
 
	<?php header('Content-type: text/html; charset=iso-8859-1');   
// script PHP interrogation Base de donnees pour reponse a la requette AJAX
include ("connexion.php");
 
if(isset($_POST['CP'])){  //connexion à la base
	$AccesBase = mysql_connect($host,$username,$passSQL);
	mysql_select_db($bdd,$AccesBase);
	$QuestionBase = "SELECT * FROM cpville  WHERE cp =".$_POST['cp']."";
	$result_recherche = mysql_db_query($bdd, $QuestionBase) or die (mysql_error());
	// construction de la liste deroulante
while ($row=mysql_fetch_assoc($result_recherche)){
		echo "<option>-- Choisissez --</option>";
		echo "<option value='".$row["idville"]."'>".$row["ville"]."</option>"; 
		}
		}
	?>

Le problème est que la liste devant contenir le resultat reste vide.
la page PHP ne retourne pas d'erreur,
je pense que je n'arrive pas à manipuler la construction de ma liste via DOM peut etre.

en tous cas là je suis trop bloquer, j ai du oublier quelque chose, alors si un oeil vif en javascript arrive à desceller quelques erreurs, Merci d'avance.

**Bovino** · 11/08/2008, 19h47

Code :

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

1
2
var valeur_retour = xhr.responseText;
document.getElementById("Ville").value = valeur_retour;

Code :

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

1
2
var valeur_retour = xhr.responseText;
document.getElementById("ville").innerHTML = valeur_retour;

Mais cette méthode va te générer des problèmes.
Il vaut mieux passer par les méthodes DOM (createElement, new Option etc) pour cela, fais une recherche et/ou lis les tutos...

**sativa808** · 11/08/2008, 20h07

Envoyé par Bovino

Code :

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

1
2
var valeur_retour = xhr.responseText;
document.getElementById("Ville").value = valeur_retour;

Code :

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

1
2
var valeur_retour = xhr.responseText;
document.getElementById("ville").innerHTML = valeur_retour;

Mais cette méthode va te générer des problèmes.
Il vaut mieux passer par les méthodes DOM (createElement, new Option etc) pour cela, fais une recherche et/ou lis les tutos...

OK et merci bovino , j ai modifié comme tu m'as dis pour linstant,
au niveau des erreurs:
Sur IE: objet innatendu
Sur FF: go is not defined et syntax error sur if(window.XMLHttpRequest) // Firefox et autres

Il faudrait donc creer les elements form select et option?
mais vu que le code PHP construit deja un <option> <value>...

**Bovino** · 11/08/2008, 20h13

Tout d'abord, dans ton php :

Code :

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

1
2
3
4
5
while ($row=mysql_fetch_assoc($result_recherche)){
		echo "<option>-- Choisissez --</option>";
		echo "<option value='".$row["idville"]."'>".$row["ville"]."</option>"; 
		}
		}

N'est pas bon, il te rajoute le Choisissez à chaque passage dans la boucle. Fais plutôt :

Code :

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

1
2
3
4
5
6
 
		echo "<option>-- Choisissez --</option>";
while ($row=mysql_fetch_assoc($result_recherche)){
		echo "<option value='".$row["idville"]."'>".$row["ville"]."</option>"; 
		}
		}

Ensuite, dans ton js, fais un alert sur le responseText :

Code :

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

1
2
3
4
5
if(xhr.readyState == 4 && xhr.status == 200){
			 document.getElementById("CP").innerHTML;
// Texte renvoyé par la page cible (url_cible)
var valeur_retour = xhr.responseText;
alert(valeur_retour);

Et dis nous ce que tu obtiens.

**sativa808** · 11/08/2008, 20h38

de retour,

- alors le alert m'a permit de corriger une erreur de syntax au niveau de $_POST["cp"] sinon aucune erreur (bon ou mauvais signe,c bien les erreurs pour debugger

)

- la valeur par defaut de la liste change mais la liste est vide quand même, il y a donc bien un echange avec la base de données.

chose bizarre les erreurs sous firefox ont diparues egalement

arggh je vois plus là,,

**Bovino** · 11/08/2008, 20h57

Bon, maintenant il va falloir modifier tes scripts pour te permettre de créer dynamiquement tes options en js afin d'obtenir un résultat exploitable.
Pour cela, tu vas devoir modifier ton php pour qu'il te renvoie un truc du style :

ville1;ville2;ville3

Ici, ville correspond à une entrée de ta bdd et le ; sert de séparateur (le ; est un exemple, tu peux utiliser autre chose si tu veux en faisant attention à ce qu'il passe bien via http).
Ensuite, dans ton js, tu vas splitter le responseText :

Code :

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

var reponses = xhr.responseText.split(';');

Tu obtiens ainsi un tableau de tes différents champs.
Puis tu crées ton 1er élément option :

Code :

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

document.getElementById('ville').option[0] = new Option('--Choisissez--',true);

new Option prenant 4 arguments : le texte de l'option, son value, defaultSelected (ici true pour qu'il soit le choix par défaut, optionnel) et selected (optionnel aussi).
Enfin, tu crées une boucle sur le reponses.length pour remplir tes autres options avec les valeurs du tableau reponses[i]

**sativa808** · 11/08/2008, 22h42

donc pour le tableau je ne vois que

Code :

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

1
2
while ($row=mysql_fetch_assoc($result_recherche)){			
echo "<option value='".$row["idville"]."'>".$row["ville"]."</option>";

peut etre pensais tu a un array ?

Donc du coup j ne sais pas utiliser Split

Pour la construction des éléments je vai me pencher sur ce new Option
car vu que je n ai pu faire le atbleau j'utilise

Code :

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

1
2
3
4
5
6
xhr.open("POST","testcp.php",true);
 // ne pas oublier ça pour le post 
 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 
 var sel = document.getElementById('CP').options[document.getElementById('CP').selectedIndex].value;
 xhr.send("CP="+sel);

Mais là c est le drame, erreur Undefined sur la ligne var sel

@+ et merci encore de te pencher sur mon cas .

**Bovino** · 11/08/2008, 22h51

Code :

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

var sel = document.getElementById('CP').options[document.getElementById('CP').selectedIndex].value;

Non, ton sel était correct, c'est le input text pas une option de select...
Pour le php, un tableau n'est pas une bonne idée, ton response est du type text ou xml, il faut donc générer une chaine coté php, du genre, en reprenant mon exemple (mais que tu peux adapter comme tu veux) :

Code :

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

1
2
while ($row=mysql_fetch_assoc($result_recherche)){			
resultat .=$row["ville"].";";

EDIT
Ceci te permettra ensuite de construire un tableau js grace à la fonction split.

**sativa808** · 11/08/2008, 23h30

ok je suis en train de voir cett fonction split et par la même occasion les paramètres que je devrai mettre sur new Option(), surement la chaine "resultat".

d'ailleurs ne voulais tu pas dire:

Code :

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

1
2
$resultat.=$row["ville"].";"; 
// et non pas resultat.=$row["ville"].";";

au fait est ce que ca ne sera pas genant si resultat contient plusieurs valeurs? et oui car un code postal entré peut correspondre à plusieurs villes!

@+

**Bovino** · 12/08/2008, 08h48

Code :

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

1
2
$resultat.=$row["ville"].";"; 
// et non pas resultat.=$row["ville"].";";

Oui, tu as raison, au temps pour moi...

ca ne sera pas genant si resultat contient plusieurs valeurs?

Non, c'est justement pour ça que l'on construit une chaine de retour avec différentes valeurs et un séparateur, le split va ensuite nous permettre en javascript de créer un tableau de ces valeurs pour afficher les résultats dans ton select.

PS : ne pas oublier le echo $resultat à la fin du php.

**sativa808** · 12/08/2008, 12h12

Salut bovino,

bon les nouvelle sont pas terrible, la liste demeure vide,
voici la requete qui fonctionne en test sous easyphp (avec les valeurs en dur)

Code :

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

1
2
3
4
5
6
 
$result_recherche = mysql_db_query ("SELECT ville FROM cpville  WHERE cp = ".$_POST['cp']."") or die (mysql_error());
			while ($row=mysql_fetch_assoc($result_recherche)){
			$resultat.=$row["ville"].";"; 
			echo $resultat;
			}}

j ai tester avec un input type text pour voir,
et en commentaire un debut de construction de liste.

Code :

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

1
2
3
4
5
6
7
8
 
xhr.onreadystatechange = function(){
			  if(xhr.readyState == 4 && xhr.status == 200){
			 var rep = xhr.responseText.split(";");
			 //alert(rep);
			 // On défini ce qu'on va faire quand on aura la réponse
			document.getElementById("ville").value = rep[0];
//document.getElementById("ville").option[0] = new Option('--Choisissez--',rep[0],false,true);

désolé d etre un peu à la traine, ça doit etre simple pourtant.
@+

**Bovino** · 12/08/2008, 12h14

Code :

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

1
2
3
4
5
$result_recherche = mysql_db_query ("SELECT ville FROM cpville  WHERE cp = ".$_POST['cp']."") or die (mysql_error());
			while ($row=mysql_fetch_assoc($result_recherche)){
			$resultat.=$row["ville"].";"; 
			}
			echo $resultat;}

Puis teste :

Code :

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

1
2
3
4
5
6
7
8
xhr.onreadystatechange = function(){
			  if(xhr.readyState == 4 && xhr.status == 200){
			 var rep = xhr.responseText.split(";");
			 //alert(rep);
			 // On défini ce qu'on va faire quand on aura la réponse
			document.getElementById("ville").value = rep[0];
			alert(document.getElementById("ville").value);
//document.getElementById("ville").option[0] = new Option('--Choisissez--',rep[0],false,true);

Car ici, ta liste reste vide car le value d'un select n'est pas affiché sur la page...

**sativa808** · 12/08/2008, 12h43

alors, l alert est vide egalement,j avais testé comme ça sinon :

Code :

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

1
2
3
4
5
6
 
document.getElementById("ville").value = rep[0];
 
  //avec
 
<input type ="text"	id="ville" name="ville" value="rep[0]"/>

ou alors

Code :

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

1
2
3
4
5
6
7
8
 
document.getElementById("ville").option[0] = new Option('--Choisissez--',rep[0],false,true);
 
// avec la liste
 
<select name="ville" id =""  >
<option value='rep[0]'>Choisir un secteur</option>
</select>

Bon app

**Bovino** · 12/08/2008, 13h50

Et avec :

Code :

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

1
2
3
4
5
6
7
xhr.onreadystatechange = function(){
			  if(xhr.readyState == 4 && xhr.status == 200){
			 var rep = xhr.responseText.split(";");
			 alert(xhr.responseText+'\n'+rep);
			 // On défini ce qu'on va faire quand on aura la réponse
			document.getElementById("ville").value = rep[0];
//document.getElementById("ville").option[0] = new Option('--Choisissez--',rep[0],false,true);

Que te donnes le alert ?

**sativa808** · 12/08/2008, 14h15

et bien vide egalement

désolé!

je me demande si des données sont bien passées avec POST, je vais essayer avec GET car pas moyen de verifier POST.

pourtant il ya une réponse mais "vide"

**Bovino** · 12/08/2008, 14h38

Code :

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

1
2
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 xhr.send('CP='+ document.getElementById("CP").value);

**sativa808** · 12/08/2008, 14h45

bon et bien GET ne donne rien de plus...

je retourne le web francophone et anglophone,,,,

**sativa808** · 12/08/2008, 14h59

ça ne fait rien de pire non plus!! toujours reponse vide.

tu pense que ça peut etre coté serveur? donc la requete

Tu auras remarqué que parfois j'utilise les ' et parfois les " cela peut il nuire au traitement?

à+

**Bovino** · 12/08/2008, 15h23

Pourrais tu remettre ton code complet (vu qu'il a dû être pas mal modifié depuis le début) pour pouvoir vérifier les compatibilités des noms de variables entre autres.(PHP et JS)

Tu auras remarqué que parfois j'utilise les ' et parfois les " cela peut il nuire au traitement?

Normalement non, si tu fais attention aux imbrications...

**sativa808** · 12/08/2008, 16h06

alors le fichier cp.php (html et 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
 
<script
//instanciation de xmlhttprequest ok, on passe à la fonction go()
 function go()
			 {	
			 getXhr()
 
 
			 xhr.onreadystatechange = function(){
			  if(xhr.readyState == 4 && xhr.status == 200){
			 var rep =xhr.responseText.split(";") ;
			 alert(xhr.responseText+'\n'+rep);
// On défini ce qu'on va faire quand on aura la réponse
			document.getElementById("ville").value = rep;
//alert(document.getElementById("ville").value);
//document.getElementById("ville").option[0] = new Option('--Choisissez--',rep[0],false,true);
//di.innerHTML = xhr.responseText;
} 
}
// Ici on va voir comment faire du post 
 var sel = document.getElementById("code").value;
var url ="testcp.php";
xhr.open("POST",url,true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('code='+ document.getElementById("code").value);
}

le formulaire de la même page:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<form name="form" method="post" action="testcp.php"  >
  <label>entrez code postal</label> 
   <input type="text" size="5" name="code" id="code" onchange="go()" /> 
<input type ="text" id="ville" name="ville" value='rep[0]'/>
<div >
<select name="ville" id =""  >
<option value='rep[0]'>Choisir</option>
</select></div>
</form>

puis le fichier testcp.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
 
<?php header('Content-type: text/html; charset=iso-8859-1'); ?>  
 
<?php
// Fichier testcp.php
include ("connexion.php");
 
if(isset($_POST['cp'])or die (mysql_error()))  {
	$AccesBase = mysql_connect($host,$username,$passSQL);
	mysql_select_db($bdd,$AccesBase);
	//$QuestionBase = ;($bdd, $QuestionBase)
	$result = mysql_db_query ("SELECT ville FROM cpville  WHERE cp =".$_POST['cp']."") or die (mysql_error());
			while ($row = mysql_fetch_assoc($result)){
			$resultat.=$row["ville"].";"; 
			}
			echo $resultat;			
			}
?>

good luck et merci de prendre de ton temps, moi ça fait trois jours de congé dessus lol! @+

[AJAX] liste dynamique restant vide >> XMLHTTPREQUEST

JavaScript

Discussions similaires

Partager

Partager