Discussion :

[gisele]

Bonjour à tous.

Je fais un semblant d'Ajax en essayant de synchroniser une liste déroulante en fonction du onChange d'une autre liste déroulante.
Je travaille avec les XMLhttprequest.

Bon ça marchait nikel en travaillant avec des flux XML en récupérant le response XML mais comme je veux faire une fonction javascript portable a tout objet (bref peu importe) je veux qu'elle exploite du html en retour de requete http.
au lieu de renvoyer de l'XML et exploiter responseXML j'essaie de renvoyer directement le source "<option value= etc." et exploiter au niveau du client le responseText.
Or le "ma_select.innerHTML=responseText" foire.

D'ailleurs plus généralement j'ai remarqué qu'indépendamment de ma petite sauce et pour être précis et concrêt pour cet exemple de code :

Code :

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

1
2
3
4
5
6
7
8
9
 
<select id="test">
</select>
 
<script language="Javascript">
var a = '<OPTION value=a selected>a</option><OPTION value=b>b</OPTION><OPTION value=c>c</OPTION><OPTION value=d>d</OPTION><OPTION value=c>c1</OPTION>';
document.getElementById('test').innerHTML = a;
alert(document.getElementById('test').innerHTML);
</script>

l'alert() à la fin ne me restitue non pas

Code :

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

1
2
 
<OPTION value=a selected>a</option><OPTION value=b>b</OPTION><OPTION value=c>c</OPTION><OPTION value=d>d</OPTION><OPTION value=c>c1</OPTION>

mais systématiquement quelque chose de tronqué genre :

Code :

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

1
2
 
a</option><OPTION value=b>b</OPTION><OPTION value=c>c</OPTION><OPTION value=d>d</OPTION><OPTION value=c>c1</OPTION>

Pourquoi innerHTML peut-il se comporter ainsi ?

[Auteur]

bonjour,

d'abord ce n'est pas un innerHTML que tu pourras ajouter des options dans ta liste.

Code :

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

1
2
3
4
 
var a = '<OPTION value=a selected>a</option><OPTION value=b>b</OPTION><OPTION value=c>c</OPTION><OPTION value=d>d</OPTION><OPTION value=c>c1</OPTION>';
document.getElementById('test').innerHTML = a;
alert(document.getElementById('test').innerHTML);

c'est quoi test ? L'id de ta liste ?
Plutôt que faire un alert sur l'innerHTML fais un alert sur a.

[nicolas.pied]

Déjà ton code n'est pas conforme aux standards minimaux, c'est à dire :

Code :

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

1
2
3
4
5
<OPTION value=a selected>a</option>
<OPTION value=b>b</OPTION>
<OPTION value=c>c</OPTION>
<OPTION value=d>d</OPTION>
<OPTION value=c>c1</OPTION>

... serait plus de la forme :

Code :

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

1
2
3
4
5
<option value="a" selected="selected">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="c">c1</option>

Pas de majuscules dans les noms de balises et il faut mettre des guillemets. Sachant que certains navigateur travaille à partir de l'arbre DOM (comme firefox), tes erreurs peuvent donc venir de là.

Sinon avec ResponseXML, il te suffit de faire du code XHTML et ça fonctionnera aussi. Le code que je t'ai donné est respecte le format XHTML.

[Auteur]

Déjà ton code n'est pas conforme aux standards minimaux

en plus...

[gisele]

Salut,

merci pour vos réponses;

oui pour la conformité vous prêchez un converti !
Mais c'est un faux problème de par ma faute, moi qui pourtant suis maniaque sur ce point, c'est qu'au fil des tests j'avais fini par copié la valeur telle qu'elle m'était restituée en espionnant innerhtml, et ce malgré une construction carrée de mon select à la base.
Donc ce que vous voyez d'aussi affeux j'en conviens, n'est qu'une chaine récupérée en espionnant la propriété innerHTML sur la base d'un select qui avait pourtant été soigné sur ce plan (merci IE).

Oui 'test' est l'id du select.

Quel est l'interêt de faire une alert sur "a"? je connais la valeur de a puisque c'est moi qui lui donne pour ma démonstration.
Ce que je cherche a démontrer c'est que si j'affecte le getElementById('test').innerHTML d'une chaine représentant des options, (qu'elle sont aux norme ou pas), ben effectivement ca foire.
alors que d'après moulte exemples fructueux sur le net notamment en "pseudo Ajax" (puisqu'on fait l'economie d'un parsing XML), mais hélas dont la nuance m'échappe, il est théoriquement possible de renouveler ainsi et d'un seul trait les options d'un select.

Sur qui semble logique car si vous avez la curiosité d'espionner le innerHTML d'un select bati classiquement, il en ressort une telle chaine.

Bref si çà continue je vais retourner à l'Ajax pur avec XML et tant pis pour la portabilité (select div etc...) de ma fonction.
Je me console en me disant qu'elle reste portable d'un select à l'autre.

Merci à vous.

[nicolas.pied]

Je viens de saisir deux mots clefs (select et innerHTML) sous Google et le premier lien me donne cette adresse :

BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object

Je crois que ça parle de soit même, en plus Microsoft a même fournit la solution

[gisele]

Salut Ah bah comme un beignet j'ai bien bien essayé de combiner innerhtml dans google mais avec l'expression "liste déroulante".

Merci infiniment en tout cas pour ce lien éclairant très précisément mon problème.

J'ai exploité celà sans pour autant résoudre mon problème de portabilité.

la technique microsoft préconise d'englober le tout dans un div, et d'en écraser le contenu y compris la balise select et ses attributs, ca n'a pas grand interet si l'on veut exploiter des evennement ou les résultat du formulaire ensuite (sauf a pouvoir le remetre a l'identique bien sur).

Enfin si, on peut conserver l'initialisation des attributs grace a un replace() uniqment de la partie "options".

Code :

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

1
2
3
4
 
html = document.getElementById(object_id).innerHTML;
new_html = html.replace(/(<OPTION([ ]|.)+<\/OPTION\>)/i, ajax.responseText);
document.getElementById(object_id).innerHTML = new_html;

mais du coup le gain est nul (voir négatif) par rapport au XML.
je ne suis plus portable d'un type d'objet a l'autre, cela redevient une fonction partageable uniquement entre les SELECT d'une application.

retour au point de départ.

Merci à vous tous. je vais considérer mon sujet comme réglé, mais je reste bien entendu plus que jamais ouverts aux conseils éclairés.