Discussion :

[dervish]

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.

[le_chomeur]

peux tu nous montrer ta source généré , ainsi que le code html récupéré ??

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

[dervish]

Bonsoir et merci,
voici la source js:

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

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

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 :

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

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 :

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

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.

[dervish]

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.

[Bovino]

la première balise <option> disparaît

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

[dervish]

En fait le code remplace ça:

Code :

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

<option value="_NULL_">Aucun r&eacute;sultat...</option>

Par:

Code :

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

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 :

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

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

[bigboomshakala]

c'est un bug connu d'IE (une petite recherche google, s'y ou plait)

[dervish]

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