[DOM]ordre des appels DOM et visualisation selon les navigateurs

Version imprimable

Bonjour à tous. J'ai un petit souci avec IE qui, comme d'hab', a implémenté son propre comportement sur les actions DOM.

Exemple : je cherche à insérer des noeuds cases à cocher, éventuellement cochées, dans un bloc.
Code:

1 2 3 4 5 6 7 var f = document.getElementById( "f" ); b = document.createElement( "input" ); b.setAttribute( "type", "checkbox" ); b.checked = true; // A --> si on le fait avant le appendChild, ça ne marche pas sur IE f.appendChild( b ); f.appendChild( document.createTextNode( "Blablabla" ) ); b.checked = true; // B --> si on le fait après le appendChild, ça marche aussi sur IE !!
Les commentaires dans le code situent le problème. Si un élément n'est pas encore inséré dans l'arbre DOM du document, IE n'affichera pas les modifications que l'on fait subir à ses attributs. Pour voir l'effet d'un règlage dynamique d'un attribut, il faut donc avoir inséré l'élément au prélable.

Pour cet exemple, ce n'est pas bien gênant. Cependant, dans d'autres cas, ça simplifierait nettement mon code de pouvoir faire les choses dans un ordre ou dans l'autre, ainsi que m'y autorisent Opera ou Firefox.

Deux questions par conséquent :
1 - qui a raison du point de vue de la norme ?
2 - existe-t-il un moyen (une fonction javascript) pour forcer IE à mettre à jour son affichage [[[ ici : à montrer la case cochée même si on n'a pas fait le deuxième

Code:

b.checked = true; // B --> si on le fait après le appendChild, ça marche aussi sur IE !!

03/01/2007, 16h40
SpaceFrog

Code:

b = document.createElement( "<input type='checkbox' checked />");
03/01/2007, 17h13
Gruik

Citation:

Envoyé par SpaceFrog

Code:

b = document.createElement( "<input type='checkbox' checked />");

Pas standard ^^

Euh ouais bein, encore un caprice de Môssieu IE

Code:

1
2
3
4
5
var b 
if (document.all){b=document.createElement( "<input type='checkbox' checked />")}
else{b=document.createElement('input');
       b.type=input;
       b.checked=true;}

04/01/2007, 11h15
sekaijin

as tu essayé

Code:

b.setAttribute( "checked", "checked");

ou

Code:

b.setAttribute( "checked", true);

mais il me semble qu'il y a le même be avec l'attibut selected dans les options d'un select.

A+JYT
04/01/2007, 12h53
Herode

@SpaceFrog : c'est une solution de contournement, mais peu satisfaisante dans mon cas car elle oblige à règler tous les attributs en même temps. ;)

@Sekaijin : oui, j'ai testé ces variantes. Elles marchent bien sous Opera et Firefox, c'est toujours IE qui résiste. Pour une compatibilité entre tous ces navigateurs, c'est donc

Code:

htmlElem.checked = true / false

que j'utilise.

Cela dit, la question de forcer un navigateur à afficher les mises à jour sans recharger la page (un refresh sans reload en somme...) n'est pas résolue. Mais je crains fort qu'elle ne puisse l'être car je ne trouve aucun indice dans ce sens. Tant pis... :cry:

il ne te reste plus qu'a faire :

Code:

1
2
3
if (document.all){
                       b.setAttribute( "checked", true);}
else {b.checked=true}

04/01/2007, 13h05
Herode

Ho, ce n'est même pas la peine :

Code:

b.checked = true

marche dans tous les cas.

Le seul souci étant que IE l'affiche ou pas selon que l'appel a été fait avant ou après l'insertion dans l'arbre DOM alors que j'aurais aimé pouvoir m'affranchir de cette contrainte de séquencement, ainsi que Firefox et Opera m'y autorisent. Mais bon, tant pis, je vais faire avec :aie:
04/01/2007, 13h09
SpaceFrog

ben selon toute logique après le append faut pas faire de modifs ...

il serait plus logique de lui coller un id et de faire

Code:

document.getElementById(ident).checked=true

après l'append ...

La solution vient du default
l'attribut defaultChecked permet de réinitialiser le formulaire sur un reset

Code:

1
2
3
4
5
6
7
	var f = document.getElementById( "f" );
	b = document.createElement( "input" );
	b.setAttribute( "type", "checkbox" );
	b.checked = true; // A --> si on le fait avant le appendChild, ça ne marche pas sur IE
	b.defaultChecked = true; ; // A --> si on le fait avant le appendChild, ça marche pour IE
	f.appendChild( b );
	f.appendChild( document.createTextNode( "Blablabla" ) );

A+JYT

04/01/2007, 15h16
SpaceFrog

bien vu le default checked ...
encore fallait il le connaitre celui là ;)
06/01/2007, 11h28
sekaijin

c'est l'avantage d edisposer d'un débugeur pas à pas sous IE et sous FF