Bug InnerHTLM avec IE8

Version imprimable

Bonjour,

J'ai un bug pour insérer des checkbox dans une page html. Sous Firefox tout fonctionne mais sous IE les cases ne sont pas insérées. Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
var inHTML = "";
 
    for (j = 0; j < lst.length ; j++)
    {
        inHTML += "<tr><td id='chkObj'" + j ; 
        inHTML += "><input type='checkbox' id='chkChoix" + j; 
        inHTML += "' oq='" + lst.item(j).getAttribute("oq");
        inHTML += "' name='checkobj'" ;
        inHTML += "' onclick='gestionObjetsVisible(this)' value=true >";
        inHTML += lst.item(j).getAttribute("oq");
        inHTML += "</td></tr>"
    }
 
    $('listeObjets').innerHTML = inHTML;

Je récupère plusieurs infos dans lst, puis je crée une ligne html contenant tous les attributs qu'il faut, puis je viens insérer cette ligne dans une balise <table id="listeObjets">. A l'écran, j'ai bien mes cases. Voici le code HTML généré sous FireFox :

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
 
 
<table border="0" width="100%" style="font-size: 12px; visibility: visible;" id="listeObjets">
   <tbody>
      <tr>
         <td 0="" id="chkObj">
              <input type="checkbox" value="true" onclick="gestionObjetsVisible(this)" name="checkobj" oq="Application" id="chkChoix0">Application
         </td>
      </tr>
 
      <tr>
         <td 1="" id="chkObj">
              <input type="checkbox" value="true" onclick="gestionObjetsVisible(this)" name="checkobj" oq="Acteur" id="chkChoix1">Acteur
 
         </td>
       </tr>
 
       <tr>
          <td 2="" id="chkObj">
                 <input type="checkbox" value="true" onclick="gestionObjetsVisible(this)" name="checkobj" oq="Processus" id="chkChoix2">Processus
          </td>
       </tr>
</tbody>
</table>

Par contre sous IE, le code s'execute mais il ne crée pas les balises, donc pas les cases.

J'ai essayé avec une autre méthode sans le innerHTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var trNode = document.createElement("tr");
var tdNode = document.createElement("td");
var inputNode = document.createElement("input"); 
 
inputNode.type = 'checkbox';
inputNode.name = 'chkObj' + j ;
inputNode.value = false;
inputNode.setAttribute('oq',lst.item(j).getAttribute("oq"))
inputNode.onClick = 'gestionObjetsVisible(this)' value=true ;
 
tdNode.appendChild(inputNode);
trNode.appendChild(tdNode);
document.getElementById("listeObjets").appendChild(trNode); */

La aussi Firefox crée bien les cases alors que IE non.

Si quelqu'un a une idée ce serait super sympa, j'y ai passé la journée !!!

Merci d'avance

12/11/2010, 23h20
kimjoa

salut il y'a toujours des bugs avec innerHTLM

Tu peux les résoudre en passant par une librairie, heu ... comme la mienne par exemple :) -> ici http://www.developpez.net/forums/d83...via-innerhtml/ ou une autre -> ici ou carrément avec les mastodonte comme jquery ou mootools....

Pour le problême du au niveau de l'insertion via le DOM, il me semble qu'il faut que accroche tes balises tr non pas à la table , mais au tbody
Un getElementsByTagName("tbody")[0] au niveau de ta table devrait suffire

a+
14/11/2010, 17h57
alexxxx69
Merci pour ta réponse.

Par contre je suis débutant en JavaScript et je ne vois pas comment récupérer le tbody au niveau de la table car dans le fichier html de base avant que le JavaScript s'exécute, les balises tbody n'existent pas. J'ai juste ces lignes :
Code:

1 2 3 <table id="listeObjets" width="100%" border=0 style="font-size:12; visibility: visible;" > </table>
Donc j'ai essayé en la créant avec un id :
Code:

1 2 3 4 var tbody = document.createElement("tbody"); tbody.id = "tbodyListeObjet"; document.getElementById("listeObjets").appendChild(tbody);
puis je garde le innerHTML mais cette fois sur le tbody :
Code:

1 2 $('tbodyListeObjet').innerHTML = inHTML;
Ca fonctionne sous FF par contre j'ai pas pu tester sous IE car au boulot j'ai pas la même version et sous IE8, il y a d'autres erreurs. Ai-je fait correctement ?

Par ailleurs au niveau du DOM, j'ai réussi à insérer les checkbox mais je ne suis pas parvenu à leur mettre un label ni a activer l'évènement onclick. La case est crées mais il n'y a pas le texte à côté. J'ai fouillé sur le web mais j'ai pas trouvé, si t'as l'info ?

Merci encore
14/11/2010, 20h30
kimjoa
salut !
Tu n'as pas besoin de créer le tbody, le parseur HTML du navigateur va le créer à ta place si il est pas présent.

Pour ce qui concerne le innerHTML, celui-ci est très mal gérer par IE, au niveau des élément de formulaire, et inutilisable sur des tableaux.

Mieux vaux asser parl le dom si tu veux pas utiliser une librairie

Sinon pour associé un événement par le dom , le mieux c'est c'est d'utiliser directement une référence vers la fonction concerné.
Code:

1 2 3 4 function maFunction(){} ... monElement.onclick = maFunction;
Le this dans ta fonction correspondra à ton élément HTLM

Sinon pour le label de la checkbox il faut créer un élément label
14/11/2010, 22h09
alexxxx69

OK c vrai que le tbody est crée tout seul, mais alors comment je fais ce que tu m'as dis : getElementsByTagName("tbody")[0] ??
Si le tbody n'est pas encore créé comment je récupère celui de la table ?

en fait le tbody est créé tout seul si j'utilise la méthode innerHTML mais en utilisant le DOM, il n'est pas créé. Voici mon code DOM :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var inputNode = document.createElement("input") var trNode = document.createElement("tr"); var tdNode = document.createElement("td"); inputNode.type = 'checkbox'; inputNode.id = 'chkChoix' + j; inputNode.value = 'checkobj'; inputNode.onclick = 'gestionObjetsVisible()'; var TextChkBox = lst.item(j).getAttribute("oq"); tdNode.appendChild(inputNode); trNode.appendChild(tdNode); document.getElementById('listeObjets').appendChild(trNode); document.getElementById('chkChoix' + j).innerHTML = TextChkBox;
Avec le code suivant j'ai plusieurs problèmes :
1) la méthode onClick n'est pas insérée dans le code HTML dans la balise <input>

2) Je n'ai pas le texte de la checkbox, j'ai essayé de créer un label, il est bien dans le code HTML mais rien à sur la page web :
Code:

1 2 3 4 5 6 7 var TextChkBox = lst.item(j).getAttribute("oq"); var label = document.createElement("label"); label.id = 'labelChkObj' + j; label.setAttribute('For', labelText); document.getElementById('listeObjets').appendChild(trNode); document.getElementById('chkChoix' + j).innerHTML = TextChkBox;

Code:

inputNode.onclick = 'gestionObjetsVisible()';

essaye ca plutôt

Code:

inputNode.onclick = gestionObjetsVisible;

Code:

document.getElementById('listeObjets').appendChild(trNode);

listeObjets doit être un élément tbody, si tu passe par le DOM il te faut le créer et l'accrocher à la table, sinon il te faut le récupérer en faisant

Citation:

maTable.getElementsByTagName("tbody")[0]
Code:

1 2 3 4 5 6 var TextChkBox = lst.item(j).getAttribute("oq"); var label = document.createElement("label"); label.id = 'labelChkObj' + j; label.setAttribute('For', labelText); document.getElementById('listeObjets').appendChild(trNode); document.getElementById('chkChoix' + j).innerHTML = TextChkBox;
je vois nulle par ou tu insères l'objet label créer

essaye ca
Code:

1 2 label.appendChild(document.createTextNode(TextChkBox) ); ocument.getElementById('chkChoix' + j).appendChild (label);
++

en fait j'ai oublié de mettre la ligne sur le message :

je crée l'input, je crée le label, j''insère le label à l'input puis j'insère l'input dans la table et ensuite je modifie le label via innerHTML.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
        var inputNode = document.createElement("input")
        var trNode = document.createElement("tr");
        var tdNode = document.createElement("td");
        inputNode.type = 'checkbox';
        inputNode.id = 'chkChoix' + j;
        inputNode.value = 'checkobj';
        inputNode.onclick = gestionObjetsVisible();
 
        var TextChkBox = lst.item(j).getAttribute("oq");
 
        var label = document.createElement("label");      
        label.id = 'labelChkObj' + j;
        label.setAttribute('For', labelText);
 
        inputNode.appendChild(label);
 
        tdNode.appendChild(inputNode);
        trNode.appendChild(tdNode);
        document.getElementById('listeObjets').appendChild(trNode);
        document.getElementById('chkChoix' + j).innerHTML = TextChkBox;

15/11/2010, 11h53
alexxxx69

j'ai essayé ton code pour les labels ça marche pas :cry::cry:
Si j'ajoute le label dans le <td> ça s'affiche, mais pas dans le input !!!

Par ailleurs le onclick ne fonctionne pas non plus, j'y comprend rien !!
15/11/2010, 12h13
Bovino

Citation:

Envoyé par alexxxx69

Si j'ajoute le label dans le <td> ça s'affiche, mais pas dans le input !!!

:calim2: Un label dans un input !!!

Et tu t'étonnes que ça ne marche pas...
Un input est une balise autofermante et n'a pas de contenu !
15/11/2010, 14h17
kimjoa

Y'a pas de texte par défaut associé à une checkbox, faut le créer avec des label, donc dans ton td t'insère ton label + ta checkbox

Sinon pour ta fonction, si ca marche pas c'est que c'est ta fonction qui déconne
regarde dans la console d'erreur voir ce qui si dit