Discussion :

[imagonem]

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 :

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
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 :

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

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

[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 ^^)

[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 ;-)

[RomainVALERI]

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
 
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...

[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 ;-)

[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/

[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...

[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...