[AJAX] enchainement de script ajax sur <select>

**Bisûnûrs** · 14/09/2006, 23h03

Autre chose, si tu essayes d'afficher le XML directement par l'URL avec ton ?param=3 ça fonctionne c'est ça ?

Si c'est le cas je pense savoir d'où vient l'erreur.

**lodan** · 15/09/2006, 07h01

Oui avec $param=3 directement en url cela fonctionne.

J'ai fait ceci pour voir ce qui se passait avec $param1

Code :

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

$req = mysql_query($sql) or die('Erreur SQL !<br>'.$req.'parametre'.$param1.'<br>'.mysql_error());

Et le résultat est

Code :

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

Erreur SQL !<br>parametre[object HTMLSelectElement]<br>Erreur de syntaxe près de '[object HTMLSelectElement] AND id_trt BETWEEN 1 AND 4 ORDER BY l' à la ligne 1

Donc il semble bien que $param1 soit vide.

**lodan** · 15/09/2006, 07h06

J'ai placé un alerte dans le javascript comme ceci :

Code :

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

1
2
3
4
5
6
   if (!xmlhttp && typeof XMLHttpRequest!='undefined'){
      xmlhttp = new XMLHttpRequest();
   }
alert(param1.value);	
   xmlhttp.open('GET', 'http://127.0.0.1/gestelle/ajax/ajaxCategorie.php?param1='+param1,false);
   xmlhttp.setRequestHeader('User-Agent', 'Test generate select');

et j'ai bien une valeur correcte dans param1

**Bisûnûrs** · 15/09/2006, 09h01

Que te donne alert(param1.value) ? Chose bizarre il ne devrait pas y avoir de .value, étant donné que param1 est la valeur en lui-même, sauf si tu le redéclares autre part en tant qu'objet.

J'ai vu aussi dans ton code HTML que tu ne mets pas de paramètre quand tu appelles ta fonction goCategorie().

Dernière chose, si effectivement tu obtiens le bon résultat quand tu affiches alert(param1.value) parce que param1 est un objet et non une valeur, alors dans ta ligne

Code :

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

xmlhttp.open('GET', 'http://127.0.0.1/gestelle/ajax/ajaxCategorie.php?param1='+param1,false);

il faut mettre justement

Code :

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

xmlhttp.open('GET', 'http://127.0.0.1/gestelle/ajax/ajaxCategorie.php?param1='+param1.value,false);

Et je pense avoir fait le tour du problème. ^^

**lodan** · 15/09/2006, 09h53

Dans mon html, j'ai cela :

Code :

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

<select name="bud_classe" id="bud_classe" onChange="goCategorie(document.getElementById('bud_classe'))"

J'ai mis ".value" et c'est bon.

....

Mais 2 choses restes (oui je sais j'abuse)

Une différence avec le site de pneuonline, c'est que moi je peut-être en modification, c'est à dire que j'arrive sur mon formulaire avec une valeur. Cela fonctionne très bien tel que je l'ai fait.

Par contre si je change de classe, dans la liste des catégories, j'ai ma valeur initiale + les catégories de la classe choisi

Ensuite comment je récupère ma valeur d'indice choisi pour le traitement suivant voir pour ma method="post".

Mon html :

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
<div>
		<select name="bud_classe" id="bud_classe" onChange="goCategorie(document.getElementById('bud_classe'))" 
		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="1">
  	 	<option value="-1"></option>
			{foreach from=$classes item=classe key=bud_classe}
			<option value="{$bud_classe}"
	  			{if ($bud_classe  == $budget.bud_classe)}
	  				selected
	  			{/if}
	  		>{$classe}</option>
	  		{/foreach}
	  	</select>
	  	</div>
	  	<div>
	  		{if $budget.bud_categorie!=""}
	  		<select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie(document.getElementById('bud_categorie'))"
	  		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2">
			<option value="{$budget.bud_categorie}">{$budget.bud_categorie|getCategorie}</option>
			{else}
			<select name="bud_categorie" id="bud_categorie" tabindex="2" disabled="disabled">
			<option value="-1">Choisir une classe</option>
			{/if}		
		</select>
		</div>

Merci d'avance

**Bisûnûrs** · 15/09/2006, 09h59

Tu as bien ces lignes dans ton javascript ?

Code :

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

1
2
3
while(document.getElementById('select2').options.length > 1){
   document.getElementById('select2').removeChild(document.getElementById('select2').options[1]);
}

Elles permettent de dépiler les objets avant de rempiler les autres grâce à la méthode removeChild(), à placer évidemment avant de placer les nouveaux.

**lodan** · 15/09/2006, 10h12

Oui et c'est placé comme ceci :

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
if(xmlhttp.status == 200){
      var liste1 = xmlhttp.responseXML.getElementsByTagName('balise1');
      var liste2 = xmlhttp.responseXML.getElementsByTagName('balise2');
 
      var liste_select = document.getElementById('bud_categorie');
      var tmp = document.createElement('option');
 
      while(document.getElementById('bud_categorie').options.length > 1){
         document.getElementById('bud_categorie').removeChild(document.getElementById('bud_categorie').options[1]);
      } 			
 
      for(var i = 0, m = liste1.length; i < m; i++){
         tmp.setAttribute('value', liste2[i].firstChild.nodeValue);
         tmp.appendChild(document.createTextNode(liste1[i].firstChild.nodeValue));
         liste_select.appendChild(tmp);
         tmp = tmp.cloneNode(false);
      }
 
      liste_select.disabled = false;
   }

et le html "child" est celui-ci

Code :

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

1
2
3
4
5
6
7
8
9
10
<div>
	  		{if $budget.bud_categorie!=""}
	  		<select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie(document.getElementById('bud_categorie'))"
	  		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2">
			<option value="{$budget.bud_categorie}">{$budget.bud_categorie|getCategorie}</option>
			{else}
			<select name="bud_categorie" id="bud_categorie" tabindex="2" disabled="disabled">
			<option value="-1">Choisir une classe</option>
			{/if}		
		</select>

**Bisûnûrs** · 15/09/2006, 10h45

Je vois le soucis et c'est normal., une liste ne peut pas être vide, donc il garde au moins une valeur. Et comme on dépile avant de rempiler, il garde la dernière valeur et empile les autres par-dessus.

Je viens de tester avec ce simple code :

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
<script>
function gnia(){
   while(document.getElementById('select2').options.length > 1){
         document.getElementById('select2').removeChild(document.getElementById('select2').options[1]);
   }
   alert(document.getElementById('select2').options.length);
}
</script>
<select id="select1" onchange="gnia();">
   <option value="1">erfgerg</option>
   <option value="2">zergerg</option>
</select>
<select id="select2">
   <option value="1">erqgerg</option>
</select>

Dans ce cas-là il ne dépilera rien ..
Alors après faut trouver des astuces pour contourner ce problème, comme rajouter une première ligne factice :

Code :

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

1
2
3
4
<select id="select2">
   <option value="1">-----</option>
   <option value="1">erqgerg</option>
</select>

Envoyé par lodan

Ensuite comment je récupère ma valeur d'indice choisi pour le traitement suivant voir pour ma method="post".

Tu entends quoi par "valeur d'indice" ?

**lodan** · 15/09/2006, 11h07

La valeur d'indice !!!

Je suis fatigué moi, non c'est la valeur de l'identifiant :

dans l'xml on a :

Code :

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

1
2
$inf .= "<balise1>".$val["libelle"]."</balise1>\n";
   $inf .= "<balise2>".$val["id_bud_categorie"]."</balise2>\n";

Le libellé s'affiche bien, l'id ("id_bud_categorie") est caché, mais en fait c'est lui que je récupère dans mon SELECT pour l'enchainement du traitement et entre autre pour mettre dans ma table et pour aller par la suite chercher les sous-catégories de cette catégorie.

**lodan** · 15/09/2006, 11h16

ligne factice ?

J'ai déjà une ligne factice :

Code :

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

1
2
3
4
5
6
7
8
9
	  		{if $budget.bud_categorie!=""}
	  		<select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie(document.getElementById('bud_categorie'))"
	  		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2">
			<option value="{$budget.bud_categorie}">{$budget.bud_categorie|getCategorie}</option>
			{else}
			<select name="bud_categorie" id="bud_categorie" tabindex="2" disabled="disabled">
			<option value="-1">Choisir une classe</option>
			{/if}		
		</select>

Code :

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

<option value="-1">Choisir une classe</option>

Donc en fait c'est parce que en modification de table, il a déjà fait ceci

Code :

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

1
2
3
<select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie(document.getElementById('bud_categorie'))"
	  		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2">
			<option value="{$budget.bud_categorie}">{$budget.bud_categorie|getCategorie}</option>

Et qu'il rajoute la sélection que j'ai cet affichage sans initialisation de la valeur précédente.

**Bisûnûrs** · 15/09/2006, 11h19

Heuu, je n'ai pas vraiment compris mais je vais essayer de t'apporter des éléments de réponse.

Dans ton javascript tu as cette ligne :

Code :

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

tmp.setAttribute('value', liste2[i].firstChild.nodeValue);

Si ta liste2 est bien remplie par la balise2 qui contient l'id, ton codé généré sera par exemple :

Code :

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

<option value="3">AUTRES RESSOURCES</option>

"3" étant l'identifiant "id_bud_categorie" et "AUTRES RESSOURCES" le libellé.

Donc si tu veux créer un troisième <select> tu peux récupérer cette valeur grâce à

Code :

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

document.getElementById('select2').value

qui vaudra 3 si tu sélectionnes "AUTRES RESSOURCES" dans ton select2.

Donc ton deuxième <select> se présentera de la manière suivante :

Code :

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

<select id="select2" name="select2" onchange="goSsCategorie(this.value);">

J'espère avoir répondu à ta question. ^^

**Bisûnûrs** · 15/09/2006, 11h21

Mais cette ligne factice n'est présente que dans le "else". =)

**lodan** · 15/09/2006, 11h45

Mon select était comme ceci et ça fonctionne.

Code :

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

<select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie(document.getElementById('bud_categorie'))"

Faire ça est plus "élégant" ?

Code :

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

<select id="bud_categorie" name="bud_categorie" onchange="goSsCategorie(this.value);">

Reste cette ligne factice :

Code :

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

1
2
3
4
5
6
7
8
9
10
{if $budget.bud_categorie!=""}
	  		<select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie(document.getElementById('bud_categorie'))"
	  		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2">
			<option value="{$budget.bud_categorie}">{$budget.bud_categorie|getCategorie}</option>
			<option value="-1">Choisir une classe</option>
			{else}
			<select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie(document.getElementById('bud_categorie'))"
	  		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2" disabled="disabled">
			<option value="-1">Choisir une classe</option>
			{/if}

Lors de l'affichage, dans ma ligne catégorie, j'ai bien la valeur de ma catégorie en modif et je vois dessous en défilant le "choisir classe".
Lorsque je change de classe, je ne vois plus que ma catégorie que j'avais déjà plus les catégories correpondantes à la classe choisi.

On va voir le bout et je ferais un récap pour les autres après, parceque y du monde qui regarde ce post.

**Bisûnûrs** · 15/09/2006, 11h59

Ce n'est pas plus "élégant", on va simplement dire qu'il n'est pas nécessaire de rechercher l'objet par son ID dans le document alors que le this renvoie la même chose. ^^

Et attention, si tu utilises

Code :

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

onChange="goSsCategorie(document.getElementById('bud_categorie'))"

ça peut se remplacer par

Code :

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

onChange="goSsCategorie(this)"

et non

Code :

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

onChange="goSsCategorie(this.value)"

C'est d'ailleurs pour ça qu'on avait l'autre problème de param1 qui était un objet et non une valeur.

Pour la ligne factice, inverse ces deux lignes :

Code :

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

1
2
<option value="{$budget.bud_categorie}">{$budget.bud_categorie|getCategorie}</option>
<option value="-1">Choisir une classe</option>

Bien sûr tu auras "Choisir une classe" une classe à l'affichage, mais c'est cette ligne qui restera quand tu dépileras ...

**lodan** · 15/09/2006, 13h06

J'ai déjà fait le test de l'inversion des 2 lignes, mais le problème c'est que en modif, ce n'est pas la bonne valeur de la catégorie qui est affiché mais "Choisir une classe" et il faut aller cherche la vrai valeur. Si je valide sans faire de modif, je perds la catégorie que j'avais précédemment.

Pas bon ça comme soluce.

Ne pourrait on pas mettre une balise pour dire que au retour, il faut se positionner à la place de

Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="bud_categorie">
	  		{if $budget.bud_categorie!=""}
	  		<select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie(document.getElementById('bud_categorie'))"
	  		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2">
			<option value="{$budget.bud_categorie}">{$budget.bud_categorie|getCategorie}</option>
			<option value="-1">Choisir une classe</option>
			{else}
			<select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie(document.getElementById('bud_categorie'))"
	  		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2" disabled="disabled">
			<option value="-1">Choisir une classe</option>
			{/if}		
		</select>
		</div>

Et retour vers le <div>. Je ne m'y connais pas assez mais dans ce cas, il faudrait renvoyer la ligne

Code :

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

1
2
<select name="bud_categorie" id="bud_categorie" onChange="goSsCategorie(document.getElementById('bud_categorie'))"
	  		onfocus="this.className='focus';" onblur="this.className='normal';" tabindex="2">

C'est juste une idée, je ne sais pas si c'est possible.

**Bisûnûrs** · 15/09/2006, 14h11

Ahah, j'ai trouvé.

Dans ton javascript, il faut changer deux valeurs 1 et les mettre à 0 :

Code :

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

1
2
3
while(document.getElementById('select2').options.length > 0){
   document.getElementById('select2').removeChild(document.getElementById('select2').options[0]);
}

J'espère que ça sera bon cette fois.

**lodan** · 15/09/2006, 14h40

Ouha !!! C'est good, c'est trop bon, c'est trop de la balle....

J'ai essayé de mettre une 1ère ligne à blanc pour ne pas avoir une valeur dans la sélection en faisant ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$inf = "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?><racine>\n";
$inf .= "<balise1></balise1>\n";
$inf .= "<balise2></balise2>\n";
$sql = "SELECT id_bud_categorie, libelle, id_bud_classe	FROM t_bud_categorie WHERE id_bud_classe=".$param1." AND id_trt BETWEEN 1 AND 4 ORDER BY libelle";
 
$req = mysql_query($sql) or die('Erreur SQL !<br>'.$req.'<br>'.mysql_error());
 
while($val=mysql_fetch_array($req))
{
   $inf .= "<balise1>".$val["libelle"]."</balise1>\n";
   $inf .= "<balise2>".$val["id_bud_categorie"]."</balise2>\n";
   // ETC
}

Au début 2 lignes "$inf." à blanc, mais il n'aime pas du tout.

Comme on a supprimé le "1" qui je suppose devait dire "gardes moi la 1ère ligne présente", on a pas le choix, il faut accepter cette contrainte.

**Bisûnûrs** · 15/09/2006, 14h51

Hum, sûrement ..

Je pense que j'ai fait tout ce qui était en mon pouvoir. ^^

Après, à toi d'essayer de bidouiller un peu pour tester les fonctionnalités et les limites.