[AJAX] enchainement de script ajax sur <select>

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.

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

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

Code:

---

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

---

Et le résultat est

Code:

---

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.

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

Code:

---

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

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:

---

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

---

il faut mettre justement

Code:

---

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

Dans mon html, j'ai cela :

Code:

---

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

---

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

Tu as bien ces lignes dans ton javascript ?

Code:

---

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.

Oui et c'est placé comme ceci :

Code:

---

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:

---

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>

---

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:

---

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:

---

1 2 3 4

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

---

Citation:

---

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" ?

La valeur d'indice !!!

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

dans l'xml on a :

Code:

---

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.

ligne factice ?

J'ai déjà une ligne factice :

Code:

---

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:

---

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

---

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.

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:

---

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:

---

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

---

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:

---

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

---

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

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

Mon select était comme ceci et ça fonctionne.

Code:

---

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

---

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

Code:

---

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

---

Reste cette ligne factice :

Code:

---

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.

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:

---

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

---

ça peut se remplacer par

Code:

---

onChange="goSsCategorie(this)"

---

et non

Code:

---

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:

---

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

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:

---

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:

---

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.

Ahah, j'ai trouvé.

8-)

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

Code:

---

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

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:

---

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.

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.

Merci en tout cas, tu as fait un max, je revois tout ça et je poste pour les visiteurs une soluce acceptable

Y a pas de quoi !

Et bonne chance pour la suite de ton projet. =)