[AJAX] Ajax et Firefox

Version imprimable

Je planche depuis ce matin sur ce probl�me : sous Firefox (pas test� sous Op�ra mais sous IE �a marche) mon formulaire ne prend pas en compte la valeur g�n�r�e par Ajax dans l'envoi :-(

Mon formulaire marche tr�s bien puisque IE r�cup�re bien tout en $_POST, mais pas moyen de travailler avec la valeur g�n�r�e par Ajax, et c'est bien s�r d'elle dont j'ai besoin.

En fait je fais saisir un code postal et g�n�re une liste d�roulante des villes correspondante via Ajax. Dans ce select je r�cup�re la valeur INSEE de la ville selected, mais �a ne passe pas sous Firefox apr�s le submit !

Ma base de donn�es comporte :
- code postal
- code INSEE
- nom de la commune
- latitude
- longitude

Voici le code de mon "ajax.js" (appel� dans le <input> du code postal par un "onChange=go_ville()", lui-m�me dans un div dont l'id est b�tement "ajax") :
Code:

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 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; } return xhr; } function go_ville(){ var xhr = getXhr(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ document.getElementById('ajax').innerHTML = xhr.responseText; } } xhr.open("POST","communes.php",true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); idcp = document.getElementById('cp').value; xhr.send("cp="+idcp); }
Et voici le code de ma page "commune.php" appel�e par l'Ajax, dans lequel on trouve la requ�te et l'affichage de la liste d�roulante :
Code:

1 2 3 4 5 6 7 8 9 10 <? echo "<select name=\"ville\" class=\"champ\" style=\"width:145px;color:black\">\n"; if ($_POST[cp]){ include("connex.php"); $res=mysql_query("SELECT insee,commune FROM communes WHERE code='$_POST[cp]' ORDER BY commune"); while($row=mysql_fetch_row($res)) { echo "<option value=\"$row[0]\">".stripslashes(utf8_encode($row[1]))."</option>\n"; }} echo "</select>\n"; ?>
HELP !!!!

NB : mon site en cours de d�veloppement se trouve � l'adresse www.lokalokaz.fr

05/12/2008, 22h49
RomainVALERI

C'est un peu le probl�me avec l'utilisation d'innerHTML pour "remplir" des �l�ments au retour d'un traitement ajax : le DOM n'est toujours impact� de la m�me fa�on apr�s ce type d'ajout, selon les navigateurs (et/ou versions de ces navigateurs comme d'habitude bien entendu ^^)

Il serait probablement plus fiable de reconstruire tes �l�ments dans une fonction javascript r�cup�rant ton responseText ( � base de document.createElement(), appendChild(), setAttribute(), et toute la clique ^^)
06/12/2008, 08h05
imagonem

Merci Romain.
Cependant ton post est peu compr�hensible par mes maigres comp�tences en Javascript (et pire encore en Java) :-(
Aurais-tu une r�ponse plus constructive �ventuellement ?
J'entends par l� une "autopsie" de mon code par exemple ;-)

Code:

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
 
function go_ville(){
   var xhr = getXhr();
 
   xhr.open("POST","communes.php",true);
   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
   idcp = document.getElementById('cp').value;
 
   xhr.onreadystatechange = function(){
      if (xhr.readyState == 4 && xhr.status == 200){
         // tu récupères la référence à ton élément de rattachement dans la page ( ici le div ajax ) 
         var elem_ajax = document.getElementById('ajax');
         // tu crées un <select>
         var elem_select = document.createElement("select");
         // tu le rattaches dans l'arbre DOM comme fils de l'élément récupéré plus haut
         elem_ajax.appendChild(elem_select);
         // tu lui donnes ses attributs (si certains étaient dynamiques, tu les passerais dans "xhr.responseText" ) 
         elem_select.setAttribute("name","ville",0);
         elem_select.setAttribute("class","champ",0);
         elem_select.setAttribute("style","width:145px;color:black",0);
         // même chose pour chaque autre élément...
         var elem_option = document.createElement("option");
         elem_select.appendChild(elem_option);
         // etc... ^^
 
      }
   }
   xhr.send("cp="+idcp);
}

Je ne suis pas all� jusqu'au bout c'�tait pour te donner un exemple plus concret de ce dont je voulais parler...

06/12/2008, 11h04
imagonem

Merci encore,
Effectivement les choses sont plus claires ainsi pour moi !
Je ne saurai finir ce code puisque peu � l'aise en Javascript, mais en bidouillant je pense y arriver.
D'ici l�, puisque tu as tous les �l�ments en main, si tu as 5 minutes � tuer...
Je te revaudrai �a ;-)
08/12/2008, 11h06
SpaceFrog

et le code html ne tient pas la route ...

il ne faut pas mettre un table dans un form et encore moins imbriquer les balises table et form suivi de tr ...
ce qui explique sans doute pourquoi le DOM ne retrouve pas ses petits

Pour ce qui est de la cr�ation d'�lement de formulaire en retour d'ajax, en effet il faut se contenter de recup�rer du string et ne pas vouloir l'utiliser directement comme du code html
J'ai mis un post dans les contributions � ce sujet:
http://www.developpez.net/forums/d53...ynamique-form/
08/12/2008, 11h17
imagonem

Merci pour ta r�ponse...

Mais l� je n'en peux plus. Je n'ai JAMAIS rencontr� de pb en imbriquant FORM et TABLE de la sorte (je l'ai m�me fait pour �viter d'autres soucis) !

Et pour r�soudre mon tout petit probl�me sous FFX, tu sous-entends qu'il me faut revoir la globalit� de mon code ?! Je ne peux pas simplement modifier le HTML ou le AJAX ? Voire le CSS...
08/12/2008, 11h29
imagonem

Oh la vache !!!
J'ai simplement sorti mon FORM du TABLE et �a marche !!!
Non mais c'est dingue... ma plus grosse hallu en pr�s de 10 ans !

Merci la grenouille, c'est quand m�me gr�ce � toi !
Jamais ne se serais all� retoucher au HTML en fait.

Bref.

Pendant que j'y suis, je rencontre un autre pr#bl##e ces derniers temps, mais il s'agit de compatibilit� entre DOCTYPE et CSS. Toujours sur ce site www.lokalokaz.fr, tu remarqueras que mes champs de "recherche rapide" sont parfaitement align�s sous FFX, mais sous IE (cette fois) tout part en vrille !
Et encore l� j'ai vir� le DOCTYPE mais si je le remets, il ajoute 4px � chaque INPUT alors qu'il ne touche pas � mes SELECT...

Si qqn a une solution...