Discussion :

[Daviloppeur]

Bonjour,

J'ai un problème avec XMLHTTPRequest pour récupérer des données.

Je dispose d'un fichier index.html :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<table>
	<tr>	
		<td><input value="Rechercher" name="button_rechercher" type="button" OnClick="rechercher()"; /></td>
		<td><input value="Recherche avancée" name="button_rechercheavancee" type="button" OnClick="rechercheavancee()"; /></td>
	</tr>
</table>
 
<h1>Résultat</h1>
<div id='resultat'></div>

la partie javascript intéressante pour mon problème de ce fichier est :

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
 
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 {  
				   alert("Problème avec votre navigateur, veuillez le mettre à jour"); 
				   xhr = false; 
				} 
			return xhr;
			}
 
function rechercher(){
				sexe=document.getElementById('select_sexe').options[document.getElementById('select_sexe').selectedIndex].text;				
				type=document.getElementById('auteur').options[document.getElementById('auteur').selectedIndex].text;				
				categorie=document.getElementById('categorie2').options[document.getElementById('categorie2').selectedIndex].text;				
				activite=document.getElementById('activite2').options[document.getElementById('activite2').selectedIndex].text;					
				niveau=document.getElementById('niveau2').options[document.getElementById('niveau2').selectedIndex].text;
				departement=document.getElementById('select_departement').options[document.getElementById('select_departement').selectedIndex].text;
 
				var xhr_recherche = getXhr();				
				xhr_recherche.onreadystatechange = function(){
					if(xhr_recherche.readyState == 4 && xhr_recherche.status == 200){
						//ici ce qu'on fait avec le resultat de la requete
						alert('resultat requete'+xhr_recherche.responseText);
						document.getElementById('resultat').innerHTML = xhr_recherche.responseText;
					}
				}					
				//la page a appeler sans parametre
				xhr_recherche.open("POST","rechercheSimple.php",true);
				xhr_recherche.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				//les parametres a mettre et l'envoi
				data="sexe="+sexe+"&type="+type+"&categorie="+categorie+"&activite="+activite+"&niveau="+niveau+"&departement="+departement;
				xhr_recherche.send(data);				
			}

enfin le fichier rechercheSimple.php

Code :

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

1
2
3
4
 
<?php
echo "youpikoala"; // ;-)
?>

Si je ne m'abuse lors de l'appuie sur le bouton rechercher d'index.html le message youpikoala devrait s'afficher en bas de la page dans la partie ayant resultat comme div.

Seulement cela ne marche pas. Suite à différents tests de débug, je sais que rechercheSimple est bien appelé mais aucun résultat ne remonte à index.html. (l'instruction alert('resultat requete'+xhr_recherche.responseText); n'affiche aucun resultat)

merci de votre aide je trouve pas mon erreur.

[andry.aime]

Bonjour,
Essaie de mettre var pour les déclarations des variables.

Code :

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

1
2
var sexe=document.getElementById('select_sexe').options[document.getElementById('select_sexe').selectedIndex].text;
.....

Pourquoi tu utilises text mais pas value?
Montre nous le formulaire concerné.

[E.Bzz]

Bonjour,

Pourquoi tu utilises text mais pas value?

+1
Vérifie avec

Code :

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

1
2
3
sexe=document.getElementById('select_sexe').options[document.getElementById('select_sexe').selectedIndex].text;
alert(sexe);

A+

[Daviloppeur]

Je ne pense pas que le problème vienne de la déclaration des variables, cependant j'ai effectivement modifié mon code pour rajouter "var" sur chaque déclaration de variable car c'est une erreur de ma part. merci

En mettant un alert pour afficher ces variables dans ma fonction rechercher qui est appelé lors de l'appui sur le bouton recherche, j'ai bien les valeurs que je désire dont le sexe (homme/femme/sans importance).

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
 
function rechercher(){
				var sexe=document.getElementById('select_sexe').options[document.getElementById('select_sexe').selectedIndex].text;				
				var type=document.getElementById('auteur').options[document.getElementById('auteur').selectedIndex].text;				
				var categorie=document.getElementById('categorie2').options[document.getElementById('categorie2').selectedIndex].text;				
				var activite=document.getElementById('activite2').options[document.getElementById('activite2').selectedIndex].text;					
				var niveau=document.getElementById('niveau2').options[document.getElementById('niveau2').selectedIndex].text;
				var departement=document.getElementById('select_departement').options[document.getElementById('select_departement').selectedIndex].text;
 
				alert (sexe+type+categorie+activite+niveau+departement); //pas de soucis
 
				var xhr_recherche = getXhr();				
				xhr_recherche.onreadystatechange = function(){
					if(xhr_recherche.readyState == 4 && xhr_recherche.status == 200){
						//ici ce qu'on fait avec le resultat de la requete
						//leselect = xhr_recherche.responseText;
						alert('resultat requete'+xhr_recherche.responseText);
						document.getElementById('resultat').innerHTML = xhr_recherche.responseText;
					}
				}					
				//la page a appeler sans parametre
				xhr_recherche.open("POST","rechercheSimple.php",true);
				xhr_recherche.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				//les parametres a mettre et l'envoi
				data="sexe="+sexe+"&type="+type+"&categorie="+categorie+"&activite="+activite+"&niveau="+niveau+"&departement="+departement;				xhr_recherche.send(data);										
			}

Je peux difficilement montrer le formulaire concerné car il s'agit d'une liste déroulante dynamique multiple faisant appels à plusieurs scripts/fichier php. Je n'ai pas de problème concernant cette liste la mise à jour se fait bien de manière dynamique et je n'ai pas constater de problème.

Voici quand même le début du 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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<h1>Recherche</h1>
<table>
<tr>
		<td><label  style="width: 150px;">Je recherche :</label></td>
		<td><select id="select_sexe" size="1" title=""  name="select_sexe">
			<option value="Homme">Homme</option>
			<option value="Femme">Femme</option>
			<option value="Sans importance">Sans importance</option>
		</select>
		</td>
</tr>
<tr>
		<td><label>Type :</label></td>
		<td><select name='auteur' id='auteur' onchange='affichage_categorie()'>
			<option value='-1'>Choisir un type</option>
				<?php
                                                $res = mysql_query("SELECT * FROM jos_comprofiler_field_values WHERE fieldid=54 ORDER BY fieldtitle");
                                                while($row = mysql_fetch_assoc($res)){
                                                                echo "<option value='".$row["fieldvalueid"]."'>".$row["fieldtitle"]."</option>";
                                                }
                                        ?>
			</select></td>			
</tr>
<tr>
		<td><label>Categorie :</label></td>
		<td><div id='categorie' style='display:inline'>
		<select name='categorie'> <option value='-1'>Choisir une categorie</option></select>
		</div></td>			
</tr>
<tr>
		<td><label>Département:</label></td>
		<td><select id="select_departement" size="1" title="" name="select_dep"> <!-- faire une liste a choix multiple -->
			<option value="01">01 - Ain</option>
			<option value="02">02 Aisne</option>
			<!-- etc etc etc -->	
		</select>
		</td>
	<tr>	
		<td><input value="Rechercher" name="button_rechercher" type="button" OnClick="rechercher()"; /></td>
		<td><input value="Recherche avancée" name="button_rechercheavancee" type="button" OnClick="rechercheavancee()"; /></td>
	</tr>
</table>
 
<h1>Résultat</h1>
<div id='resultat'></div>

Pour l'instant j'ai toujours le même problème.

[E.Bzz]

Si tu reconstitues une url (avec paramètres) appelée par Ajax, et que tu l'entres directement dans la barre d'adresse du nav, est-ce que le résultat attendu s'affiche ?

A+

[Daviloppeur]

Si tu reconstitues une url (avec paramètres) appelée par Ajax, et que tu l'entres directement dans la barre d'adresse du nav, est-ce que le résultat attendu s'affiche ?

A+

Si je demande directement la page :

Code :

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

1
2
 
http://localhost/rechercheSimple.php?sexe=homme&type=Sports&categorie=Arts%20martiaux&activite=A%C3%AFkido&niveau=spectateur&departement=21

J'ai bien une page blanche qui s'affiche avec youpikoala. Mais je ne suis pas sur que ce soit cela que tu me demandes.

[E.Bzz]

J'ai bien une page blanche qui s'affiche avec youpikoala. Mais je ne suis pas sur que ce soit cela que tu me demandes.

Si si! Exactement
Ça veut dire que ton appel est correct, et qu'Ajax répond correctement.

Le problème vient donc de la récupération du responseText pour le coller dans "resultat" ...

C'est de ce côté là qu'il faut chercher.
Je ne vois rien de louche sur ce point dans le code donné ...
Tu n'as pas d'autre id="resultat" dans la page (ou name si tu testes sous IE) ?

A+

[E.Bzz]

En complément : s'il s'agit de listes dynamiques, tu es sûr qu'elles ont bien toujours les mêmes id et name après leur mise à jour ?
(le contraire poserait problème lors de la récupération des paramètres pour Ajax)

A+

[Daviloppeur]

Non, à priori pas de problèmes non plus de ce côté la. J'ai renommé mon div pour afficher mon résultat différemment au cas ou, mais je ne reçois toujours pas la réponse.

De même les listes dynamiques possèdent le même id avant/après mise à jour.

[Daviloppeur]

arf ! si tu avais raison en me rachetant une paire d'yeux je viens de voir que j'avais un conflit avec mes id.

Ca marche je te remercie beaucoup.

J'ai une petite question aussi quand tu dis :

Tu n'as pas d'autre id="resultat" dans la page (ou name si tu testes sous IE) ?

ça veut dire que si les champs "name" ne sont pas correctement rempli il risque d'avoir des problèmes avec IE ?

merci encore

[E.Bzz]

Arf !!

Revérifie bien les identifiants et objets auxquels tu fais appel pour constituer ta liste de paramètres

A+

[E.Bzz]

On a posté en même temps, mais je maintiens ma dernière remarque.

Tu noteras que tu utilises le singulier et moi le pluriel

Une piste : il y a plusieurs types d'erreurs ...

A+

[E.Bzz]

ça veut dire que si les champs "name" ne sont pas correctement rempli il risque d'avoir des problèmes avec IE ?

Pas exactement.
Avec IE si tu utilises un document.getElementById("toto") alors que tu as

Code :

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

<input id="toto" ...>

et

Code :

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

<input name="toto" ...>

il va se mélanger (il confond name et id)

A+

[Daviloppeur]

Très bien, je prends note de cela.

Merci encore à toi et bonne journée.

[E.Bzz]

Donc tu as trouvé les autres erreurs ?

[Daviloppeur]

Oui, j'ai repris tous mon code et fais un checkup complet.
En m'aidant de tes conseils j'ai pu trouvé mes erreurs et tous fonctionne désormais.

[E.Bzz]

A+