[DOM] Petit soucis avec innerHTML et ie

Version imprimable

21/11/2008, 17h54
dervish

[DOM] Petit soucis avec innerHTML et ie

Bonjour,
j'ai un script qui récupère une chaine de caractères "<option name="nom">...</option>..." via un requete XHR et la rajoute via innerHTML à un élément <select>.
La page générée est conforme XHTML1.0, le script fonctionne parfaitement sous firefox tant sous windows que linux.
Par contre, sous ie7.0.5730.13, je récupères bien ma chaine de caractère (je la visualise via un alert) mais quand je fais mon innerHTML, la première balise <option> disparaît (je vois le résultat dans un alert et dans les sources). Impossible de comprendre ce qui se passe. Si quelqu'un avait une piste, ça m'aiderait beaucoup.
Par avance merci.
21/11/2008, 18h30
le_chomeur

peux tu nous montrer ta source généré , ainsi que le code html récupéré ??
21/11/2008, 18h37
Bovino

Il ne faut pas utiliser de innerHTML pour ajouter des options à un select !
Il est préférable d'utiliser les méthode du DOM (createElement(), appendChild).
Pour plus d'infos, faire une petite recherche sur ce forum (sujet maintes fois traité) et dans les contributions.

Bonsoir et merci,
voici la source js:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
valRequete: function(){
        var requete = createXHR();
        requete.open("POST","nestor.php", true);
        requete.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        var courantNestor = this
        if(this.requetes.length > 0){
            requete.onreadystatechange = function(){
                if(requete.readyState != 4) { return; }
                if(requete.status != 200){
                    return;
                } else {
 
                // c'est ici que ça se passe
 
                    var nestorTmp = requete.responseText;
                    alert(nestorTmp);
                    courantNestor.listeResultat.innerHTML = nestorTmp;
                    alert(courantNestor.listeResultat.innerHTML);
 
                //
 
 
                    courantNestor.boutVal.removeChild(courantNestor.icone);
                    courantNestor.boutVal.innerHTML = 'Valider';
                    courantNestor.boutVal.onclick = function(){
                        courantNestor.valRequete();
                    };
                };
            };
            var tmp = [];
            for(id in this.requetes){
                tmp.push(this.requetes[id].getRequete());
            };
            var corps = "type=recherche&valeur=" + encodeURIComponent(tmp) + "&objet=" + this.selObjet.value;
            requete.send(corps);
            this.attendre(this.boutVal);
        };
    },

Dedans, courantNestor vaut au début:

Code:

1
2
3
4
 
<select id="listeResultat" size="6" multiple="multiple" name="listeResultat">
    <option value="_NULL_">Aucun r&eacute;sultat...</option>
</select>

le alert(nestorTmp) donne:

Code:

1
2
3
4
5
6
7
8
 
<OPTION value="d1158">A**** V**** [***] </OPTION>
<OPTION value="c1139">A** Nathalie [**** ] </OPTION>
<OPTION value="c630">A*** Chadia (****) [****] </OPTION>
<OPTION value="c582">A*** Farid [****] </OPTION>
<OPTION value="c1151">A*** Fedaa [****] </OPTION>
<OPTION value="c1098">A*** Frédéric [**** ] </OPTION>
<OPTION value="c641">A*** Nathalie [****] </OPTION>

le alert(courantNestor.listeResultat.innerHTML) donne:

Code:

1
2
3
4
5
6
7
8
 
A**** V**** [***] </OPTION>
<OPTION value="c1139">A** Nathalie [**** ] </OPTION>
<OPTION value="c630">A*** Chadia (****) [****] </OPTION>
<OPTION value="c582">A*** Farid [****] </OPTION>
<OPTION value="c1151">A*** Fedaa [****] </OPTION>
<OPTION value="c1098">A*** Frédéric [**** ] </OPTION>
<OPTION value="c641">A*** Nathalie [****] </OPTION>

(J'ai juste étoilé les noms)
Ceci est généré par un code php extrayant des données d'une base MySQL

J'espère avoir été complet.

21/11/2008, 19h08
dervish

Citation:

Envoyé par Bovino

Il ne faut pas utiliser de innerHTML pour ajouter des options à un select !
Il est préférable d'utiliser les méthode du DOM (createElement(), appendChild).
Pour plus d'infos, faire une petite recherche sur ce forum (sujet maintes fois traité) et dans les contributions.

Soit, j'ai bien vu mais j'aimerai bien comprendre où passe la balise <option> sous ie7 en fait...
mais merci tout de même pour la précision.
21/11/2008, 19h19
Bovino

Citation:

la première balise <option> disparaît

Laquelle ? Celle qui est présente à l'origine ou la première de ton responseText ?

En fait le code remplace ça:

Code:

<option value="_NULL_">Aucun résultat...</option>

Par:

Code:

1
2
3
4
5
6
7
A**** V**** [***] </OPTION>
<OPTION value="c1139">A** Nathalie [**** ] </OPTION>
<OPTION value="c630">A*** Chadia (****) [****] </OPTION>
<OPTION value="c582">A*** Farid [****] </OPTION>
<OPTION value="c1151">A*** Fedaa [****] </OPTION>
<OPTION value="c1098">A*** Frédéric [**** ] </OPTION>
<OPTION value="c641">A*** Nathalie [****] </OPTION>

alors que la réponse reçue est:

Code:

1
2
3
4
5
6
7
8
 
<OPTION value="d1158">A**** V**** [***] </OPTION>
<OPTION value="c1139">A** Nathalie [**** ] </OPTION>
<OPTION value="c630">A*** Chadia (****) [****] </OPTION>
<OPTION value="c582">A*** Farid [****] </OPTION>
<OPTION value="c1151">A*** Fedaa [****] </OPTION>
<OPTION value="c1098">A*** Frédéric [**** ] </OPTION>
<OPTION value="c641">A*** Nathalie [****] </OPTION>

c'est le: <OPTION value="d1158"> qui vire...

21/11/2008, 19h58
bigboomshakala

c'est un bug connu d'IE (une petite recherche google, s'y ou plait)
21/11/2008, 20h17
dervish

ok
merci pour la réponse, j'avais cherché mais manifestement pas avec les bons mots.