[DOM] Gestion du DOM sous IE 7

Version imprimable

17/01/2008, 11h27
air_v

[DOM] Gestion du DOM sous IE 7

Bonjour,
je souhaite ajouter dynamiquement des elements à une liste, en d'autre terme ajouter des <li> à un <ul>.
Alors j'ai un script qui me fabrique mon <li> et me fait un appendChild sur mon <ul>.
Dans FF l'ajout se passe bien et le rendu visuel est correct. Mais dans IE(7) je vois bien, via DOM inspector, l'ajout du <li> se faire dans le DOM, mais le rendu visuel explose complètement...
Le <li> existant disparait et je me retouve avec un grand <ul> complêtement Blanc.
Notez que mon <ul> s'agrandit bien (détection de la présence du contenu) mais que rien n'est visible et je n'ai pas d'erreur générée.

Quelqu'un a-t-il une idée du pourquoi du comment?
Un appendChild sour IE7 ne met pas directement à jour le visuel? il y a quelque chose à faire pour valider le DOM...?

Hervé
17/01/2008, 11h43
javatwister

c'est dans la css de la liste qu'il faut résoudre le problème;

un bout de code aurait été le bienvenue ...

sinon :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
	function $(IdElement){
		return document.getElementById(IdElement);
	}
	function ajouterLi(TextToAdd){
		var d = document;
		var NewLi =	d.createElement('li');
		//( un peu barbare mais bon  ;) )
		NewLi.innerHTML = TextToAdd
		var objUL  = document.getElementById( 'listeUl' );
		//On ajoute l'item en tout premier
		objUL.insertBefore( NewLi , objUL.firstChild );
	}
</script>
</head>
 
<body>
<input type="text" id="toto" value="" /><input type="button" onclick="ajouterLi($('toto').value)"; />
<ul id="listeUl">
	<li>toto</li>
	<li>titi</li>	
</ul>
</body>
</html>

A plus tard

17/01/2008, 12h12
air_v

En fait je crois que c'est un probleme avec Sortable de scriptaculous...

Pour le bout de code c'est que c'est un gros bout de code... parce que mon LI contient un form qui contient un paquet de truc...
Mais si cela te tente je te l'envoi par mail ;)...

En tout cas merci.

Par contre, j'ai fait une version utltra réduite avec juste un petit LI, mais le style déconne souvent... Par exemple mon LI a un bord 'dotted' mais en fonction du scroll sur la page il apparait ou disparait a certain endroit...
17/01/2008, 13h39
le_chomeur

effectivement , gros script ^^
( je suis déja sur un autre script pour quelqu'un du forum désolé )
mais tu peux essayer , d'utiliser les webtools de firefox / ie pour voir si une fois ton li ajouté, la classe lui est bien attribué
Piste a suivre :)
17/01/2008, 14h48
air_v

Parce que ca peut toujours servir, il fallait que je mette dans le style du <li> :
overflow : hidden;

Et là ce n'est pas parfait mais ça fonctionne mieux :)
17/01/2008, 14h51
le_chomeur

8O en quoi l'overflow a hidden corrige le problème ???
ça ne fait que masquer la barre de scroll et ne pas agrandir ta div / li si tu as définit une hauteur / largeur fixe ...

j'ai du raté une étape ...
21/01/2008, 12h47
air_v
Tu sais avec IE 7 il ne faut trop se poser de question... mais comme le dit javatwister c'est dans la css de la liste qu'il fallait régler le problème... Après moi je ne suis pas développeur chez Microsoft...

Mais toujours est-il quand sans le 'overflow : hidden;' lorsque j'ajoute un élément a ma liste le DOM se met à jour mais le rendu visuel explose et lorsque je le met je vois bien mes éléments... Va comprendre...

Sinon un truc chiant c'est que IE modifie le code HTML... style si tu fais un alert/regarde le DOM du contenu d'un <div> qui contient du HTML tu constate qu'IE t'a mis toutes les balise en majuscule, supprimé toutes les ' " ' après les attributs de la balise et modifier l'ordre dans lequel ils sont; exemple :

code source :
Code:

1 2 3 4 <div> <h2 id="id" class="maClasse"></h2> </div>
te donne dans IE :
Code:

1 2 3 4 <DIV> <H2 class=maClasse id=id></H2> </DIV>
ce qui moi me pose problème parce que je fais des recherches dans le code pour le parser après certain tag...

Bref, non seulement c'est pas standard mais en plus ça ennui tout le monde... Vive IE et plus généralement microsoft!!! ouais!!