Discussion :

[alexxxx69]

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 :

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

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 :

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

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

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

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

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

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

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 :

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

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 :

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

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

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

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

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

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

[alexxxx69]

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 :

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

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

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;

[kimjoa]

Code :

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

inputNode.onclick = 'gestionObjetsVisible()';

essaye ca plutôt

Code :

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

inputNode.onclick = gestionObjetsVisible;

Code :

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

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

maTable.getElementsByTagName("tbody")[0]

Code :

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

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 :

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

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

++

[alexxxx69]

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 :

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

[alexxxx69]

j'ai essayé ton code pour les labels ça marche pas
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 !!

[Bovino]

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

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 !

[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