Problème avec XMLHttpRequest

Bonjour,

J'ai une question à vous soumettre concernant mon script qui permet de gérer la localisation de mes utilisateurs par le biais de trois listes : Pays, Région, Département.
Le principe est donc qu'à chaque fois que l'utilisateur change de pays, les deux autres listes se mettent à jour pour afficher le contenu correspondant, et lorsqu'il change la région, c'est la liste des départements dépendants qui s'actualise.

Voici mon script Ajax

function goregions(formulaire){      
      var l1    = formulaire.elements["pays"]; 
    	var l2    = formulaire.elements["regions"];
      var l3    = formulaire.elements["departements"];
      l3.options.length = 0; 
    	var index = l1.selectedIndex;
    	if(index < 1){ 
    	   l2.options.length = 0;
    	   l3.options.length = 0;
    	}
    	else { 
    	   var xhr_object = null;  	     
         if(window.XMLHttpRequest) // Firefox 
    	      xhr_object = new XMLHttpRequest(); 
    	   else if(window.ActiveXObject) // Internet Explorer 
    	      xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
    	   else { // XMLHttpRequest non supporté par le navigateur 
    	      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    	      return; 
    	   } 
    	 
    	   xhr_object.open("POST", "includes/regions.php", true); 
    	     
    	   xhr_object.onreadystatechange = function() { 
    	      if(this.readyState == 4) 
               eval(this.responseText); 
    	   } 
    	 
    	   xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    	   var data = "pays="+escape(l1.options[index].value)+"&form="+formulaire.name+"&select=regions"; 
    	   xhr_object.send(data); 
      }
    }

et mon code HTML/PHP

<form method="post" action="<? echo $script_ajouterevenement; ?>" id="ajouter-evenement">
<select name="pays" onChange="javascript:goregions(ajouter-evenement);">
<option value=""></option>
<? $sel_pays = mysql_query("SELECT * FROM pays ORDER BY P_id ASC");
while($data_pays = mysql_fetch_array($sel_pays)){echo "<option value='".$data_pays['P_id']."'>".$data_pays['P_pays']."</option>";} ?>
</select>

<select name="regions" onChange="javascript:goregions(ajouter-evenement);"></select>
        
<select name="departements" onChange="javascript:godepartements(ajouter-evenement);"></select>
</form>

Je ne vous ai mis que la fonction goregions() pour alléger un peu, mais j'ai bien évidemment celle intitulée godepartements().

Mon problème est que ça marche quand ça veut (hier ça marchait très bien, aujourd'hui plus rien, alors que je n'ai fait aucun changement...).
Comme vous le constatez, comme j'ai ce formulaire sur différentes pages, j'ai fait en sorte que mes fonctions acceptent le nom du formulaire en argument. Et je pense que le problème vient de là mais je n'arrive pas à le résoudre.

Avez-vous une idée pour me sortir de ce mauvais pas ??
Merci !
Modifié par xtense (06 Jan 2011 - 15:48)

Sais tu-as quel moment ça bloque ?
Ta requête renvoie t'elle un résultat avant de faire de eval() ?

Quelques cosoles.log() bien placés devraient t'aider à comprendre où ça cloche.

Apparemment le problème vient du passage du nom du formulaire en argument.
J'ai essayé de le passer avec des guillemets, avec des simple quotes, sans rien...

Quand je le passe sans rien et que je fais un alert(formulaire) dans ma fonction pour voir s'il récupère bien la valeur, il me le sort avec des simple quotes, du coup je pense que ça bloque pour les lignes type formulaire.elements["pays"]...

Comment faire... ?

Tu passes en paramètre l'id du formulaire donc il faut le retrouver ensuite avec getElementById().

function goregion(formId)
{
    var form = document.getElementById(formId);
}

Modifié par moust (06 Jan 2011 - 17:40)

J'ai tenté ça :

function goregions(form){      
var formulaire = document.getElementById(form);
var l1    = formulaire.elements["pays"];
...

... sans succès !
Modifié par xtense (06 Jan 2011 - 18:24)

Il faut que tu mettes l'id du formulaire entre guillemets dans l'appel à la fonction goregions(), c'est une chaine de caractère.

Sinon tu n'es pas obligé de passer ton formulaire en paramètre, tu peux aussi faire comme ça :

function goregion(evt)
{
    var form = evt.target.parentNode;
}

J'ai testé avec l'id du formulaire entre guillemets, pas de changement... ça ne fonctionne pas.
J'ai essayé la méthode décrite pour ne pas passer le formulaire en paramètre et ça ne marche pas non plus...

J'en peux plus de cette fonction !!

Bon ! Il semblerait que j'ai trouvé le problème... j'espère en tout cas, mais ça a l'air de marcher.

Il faut effectivement bien faire passer l'id du formulaire entre guillemets et il faut utiliser la variable passée dans la variable data à l'endroit du nom du formulaire. Ce qui donne :

function godepartements(formID){
      var formulaire = document.getElementById(formID);
      var l1    = formulaire.elements["regions"]; 
    	var l2    = formulaire.elements["departements"]; 
    	var index = l1.selectedIndex;
    	if(index < 1) 
    	   l2.options.length = 0; 
    	else { 
    	   var xhr_object = null;  	     
         if(window.XMLHttpRequest) // Firefox 
    	      xhr_object = new XMLHttpRequest(); 
    	   else if(window.ActiveXObject) // Internet Explorer 
    	      xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); 
    	   else { // XMLHttpRequest non supporté par le navigateur 
    	      alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    	      return; 
    	   } 
    	 
    	   xhr_object.open("POST", "includes/departements.php", true); 
    	     
    	   xhr_object.onreadystatechange = function() { 
    	      if(this.readyState == 4) 
               eval(this.responseText); 
    	   } 
    	 
    	   xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    	   var data = "region="+escape(l1.options[ index].value)+"&form="+[b]formID[/b]+"&select=departements"; 
    	   xhr_object.send(data); 
      }
    }

Merci beaucoup pour votre aide !!
Modifié par xtense (07 Jan 2011 - 10:50)