[DOM] IE supprime les "\n " avec innerHTML

Version imprimable

bonjour,
J'ai un tableau qui contient des données avec (parfois) des retour à la ligne
Pour ne pas que les lignes de celui ci s'agrandissent, j'ai formaté le cellules avec le Css suivant:
Code:

1 2 3 4 td { overflow:hidden; white-space:nowrap; }
Pour que l'utilisateur puisse voir le contenu complet (avec les retours à la lignes), j'ai un div avec le Css suivant :
Code:

1 2 3 #IdCommentaire{ white-space:pre; /* indique de prendre le formatage tel quel avec retours à la ligne tabulations etc)*/ }
et une fonction qui affiche dans ce div le contenu de la cellule sur mouseover via la fonction
Code:

1 2 3 4 5 6 7 8 9 10 function show_comment(event) { var elt_div = $('IdCommentaire'); // on récupère qui est à l'origine du show comment var elt_td = Event.element(event) if (elt_div) { elt_div.innerHTML=elt_td.innerHTML //elt_div.innerHTML=elt_td.innerHTML.replace('\n','|'); //elt_div.innerHTML=elt_td.firstChild.nodeValue.replace('\n','|'); } }
tout ceci marche à merveille sur firefox, mais sur IE aucun retour a la ligne.
Après vérifications le css "white-space:pre;" n'est valable sous IE qu'en mode csscompat (et pas quirks), ce que j'ai pu vérifier sur un cas plus simple.
Mais le pb ne vient pas de là (j'ai essayé aussi de mettre le contenu du div dans une balise <PRE></PRE> sans plus de succès.
En fait, il semble que dès qu'on fait une "copie" d'un élément, IE supprime automatiquement les retours à la ligne (ce que j'ai pu vérifier avec les 2 lignes en commentaires (ou je transforme le '\n' en '|' )--> sous Firefox je vois les | sous IE ...aucun '|' ni '\n' :(

Au cas où ce serait le innerHTML qui poserait probleme J'ai tenté aussi un
Code:

1 2 3 cloneNode = elt_td.cloneNode(true); elt_div.innerHTML=""; elt_div.appendChild(cloneNode);
et

Code:

elt_div.innerHTML=elt_td.firstChild.nodeValue;

Sans plus de succès

Est ce que quelqu'un à une idée, soit de ce qui ne va pas dans mon code soit de comment contourner le pb (en dehors de mettre des <BR> lors de la génération du contenu de la cellule car je ne veux pas que les retours à la lignes soit présent dans le tableau initial. Je ne peux/veux pas non plus gérer 2 versions de chaque cellule une avec <BR> et une sans <BR> car j'ai le "pb" sur toutes les cellules d'un tableau qui peut être grand

Merci pour toute aide...

25/03/2008, 15h14
le_chomeur

aurais tu un exemple un peu plus complet ? :)

Est ce que ceci permet de mieux cerner ?
Désolé j'ai simplifié mon code qui utilise prototype mais quelques modifs pourraien t permettre de s'en passer. (je n'ai pas fait les modifs en question de peur d'introduire des bugs mais a priori, prototype n'est pas en cause).

Avec le code suivant, j'ai un résultat Ok sous Mozilla (le div affiche la cellule avec les retours a la ligne) et Ko sous IE6 (tout en ligne sans retours):

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
 
<style type="text/css">
thead, tfoot {
  text-align: center;
}
 
#table1{
  table-layout: fixed; /* la tableau prend la taille définie et ignore le contenu*/
  width: 100px; /* le table layout ne marche pas sous Mozilla si on ne met pas de taille (mÃªme 1px suffit)
      on peut mettre en pourcentage aussi*/
}
 
 td {
  white-space: nowrap;
  overflow: hidden; /* pour les navigateurs autres que IE (cache le texte qui dÃ©passe) */
  text-overflow: ellipsis; /* ne marche que sous IE (tronque le texte en ajoutant '...') */
}
 
.sortable tr {
  overflow: hidden;
  white-space:nowrap;
 
}
 
thead tr td {
  white-space: normal;
}
 
 
#IdCommentaire{
  background-color:#FFFFE7; 
  border: 1px solid #DEDEDE; 
  color: black;
  position:absolute; 
  visibility:hidden;
  white-space:pre;/*nowrap;*/ /* indique de prendre le formatage tel quel avec retours Ã  la ligne tabulations etc)*/
}
 
 
</style>
 
<script type="text/javascript" src="js/framework/prototype.js"></script>
 
 
<script type="text/javascript">
//<![CDATA[
 
    function show_comment(event) {
      var elt_div = $('IdCommentaire');
      // on récupère ce qui est à l'origine du show comment
      var elt_td = Event.element(event)
      if (elt_div) {
        //elt_div.innerHTML='<pre>'+elt_td.innerHTML+'</pre>';
        elt_div.innerHTML=elt_td.innerHTML;
        //elt_div.innerHTML=elt_td.innerText.replace('\n','|');
        //cloneNode = elt_td.cloneNode(true);
        //elt_div.innerHTML="";
        //elt_div.appendChild(cloneNode);
        //elt_div.innerHTML=elt_td.firstChild.nodeValue.replace('\n','|');
        elt_div.style.visibility="visible";
      }     
    } 
    function hide_comment() {
      var elt_div = $('IdCommentaire')
      if (elt_div) {
        elt_div.style.visibility="hidden";
      }     
    }
 
  function initEvents() {
 
    if ($('detailBody')){
      Event.observe($('detailBody'), 'mouseover', show_comment.bindAsEventListener());
      Event.observe($('detailBody'), 'mouseout', hide_comment);
    }
 
  }
 
  Event.observe(window, 'load', initEvents, false);
  //]]>
 
</script> 
 
</head>
<body>
 
 
  <div id="IdCommentaire"></div>
 
  <div id="inProgress" style="visibility: hidden;"><h4 style="color:#FEA620; margin:0px">Sort in progress, please wait...</h4></div>
 
  <table id="table1" border="1"  style="cellspacing: 0;cellpadding: 2;" >
    <thead >
    <tr >
      <td valign="top"  style=" width: 60px;">Exemple</td>
    </tr>
    </thead>
    <tbody id="detailBody">
    <tr >
       <td>&nbsp;test1
Test 2 apres retour a la ligne
       </td>
    </tr >
    <tr >
       <td>dcvvko fbgfrb
         bnnthn
         thn 
         hyn hy
         hy
         ,hjy
          jy,jyu, jk,h
           ,hjy,jy
 
       </td>
    </tr >
    <tr >
       <td>un 
  deux
  trois
       </td>
    </tr>
  </tbody>
 
  </table>
    </body>
  </html>

25/03/2008, 16h47
le_chomeur
étrange ... je viens de faire un test avec ceci :
Code:

1 2 3 4 test test test...
sans les balises : pre , celle ci s'affiche bien en ligne,
avec , les retours a la ligne sont bien pris en comptes.

testé sous ie7 et firefox
25/03/2008, 17h12
jld33

Heu, désolé je n'ai pas tout suivi :oops:

Citation:

Envoyé par le_chomeur

sans les balises : pre , celle ci s'affiche bien en ligne,
avec , les retours a la ligne sont bien pris en comptes.

testé sous ie7 et firefox

Le test correspond à la partie qui était commentée :

Code:

elt_div.innerHTML='<pre>'+elt_td.innerHTML+'</pre>';

que tu as décommentée ou a autre chose ?

De plus, il y a de fortes chances que le comportement soit différent entre IE6 et IE 7 :cry:

mes excuse effectivement les saut de ligne sautent , exemple simple :

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
31
32
<table>
<tr><td style="border:1px solid black">
<pre id="titi">
test
test
test
test
test
test
test
test
test
<pre>
</td></tr>
</table>
 
<div id="toto">
test
</div>
 
<div>
<pre id="toto2">
</pre>
</div>
 
<script type="text/javascript">
 
(document.getElementById('toto').innerHTML  = "Sans Pre : "+document.getElementById('titi').innerHTML);
(document.getElementById('toto2').innerHTML  = "Avec Pre : "+document.getElementById('titi').innerHTML);
 
 
</script>

je continu de chercher

voila j'ai trouvé 8O : accroche toi :
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 31 32 33 <table> <tr><td style="border:1px solid black"> <pre id="titi"> test test test test test test test test test <pre> </td></tr> </table> <div id="toto"> test </div> <div> <pre id="toto2"> </pre> </div> <script type="text/javascript"> (document.getElementById('toto').innerHTML = "Sans Pre : "+document.getElementById('titi').innerHTML); (document.getElementById('toto2').appendChild(document.createTextNode("Avec Pre : "+document.getElementById('titi').firstChild.data))); </script>
il faut non pas passer par le innerHTML , mais créer un noeud de type texte , en création dans ta div de destination , et au départ non pas récupèrer le innerHTML , mais récupèrer les data à l'état brut !
sinon tu vas te retrouver avec quelque chose sous la forme :
Code:

1 2 3 4 5 test test test ... <pre></pre>
voila voila

Merci pour ta recherche,
mais j'ai l'impression que la différence entre innerHTML et appendChild n'est dûe qu'au fait qu'il manque un /PRE dans titi (si je met le /pre dans ton exemple, innerHTML marche comme le appendChild et fonctionnent correctement)

Le problème c'est que j'aurais aimé quelque chose plutôt comme ceci
(retours à la ligne ignorés dans la cellule du tableau et retour à la ligne pris en compte dans le div) :
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 31 32 33 <table> <tr><td style="border:1px solid black" id="titi">  test test test test test test test test test  </td></tr> </table> <div id="toto"> test </div> <div> <pre id="toto2"> </pre> </div> <script type="text/javascript"> (document.getElementById('toto').innerHTML = "Sans Pre : "+document.getElementById('titi').innerHTML); (document.getElementById('toto2').appendChild(document.createTextNode("Avec Pre : "+document.getElementById('titi').firstChild.data))); </script>
si je fais ça, (ou un alert(document.getElementById('titi').firstChild.data) ou un alert(document.getElementById('titi2').innerHTML) ), on voit que IE6 a bien 'l'air de supprimer de lui même les retours à la lignes dans la cellule.:arf: (alors que firefox les garde , pour IE7, je ne sais pas...)

26/03/2008, 10h18
le_chomeur

Effectivement , si l'on sort le texte de la balise pre, ie "supprime" ces retours a la ligne ...
j'ai essayé avec un "style='white-space: pre'" la balise td se comporte pourtant comme tel et prend bien en compte les retours chariot 8O

la je sèche ....

je continue mes recherches
26/03/2008, 11h21
Matthieu2000

innerHTML bug sous ie ! Non corrigé sous ie7.
passe par dom pour la copie...
26/03/2008, 11h28
le_chomeur

c'est ce que j'ai essayé de faire , mais le problème c'est que ie fait sauter les \ quelque soit la méthode : innerHTML , createTextNode+firstChild.data également ...
Peut-être avec un cloneNode ...

Citation:

.test{
white-space:pre;
}

Citation:

<div class="test" id="titi"></div>

<div id="toto">

 test1
Test 2 apres
retour a la ligne
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function copyNode(fromNode, toNode) {
//suppression
  for ( n=toNode.childNodes.length-1; n>=0; n--) {
  var oldChild = toNode.childNodes[n];
  toNode.removeChild(oldChild);
  }
  //copie
 for ( n=0; n<fromNode.childNodes.length; n++) {
   var fromChild = fromNode.childNodes[n].cloneNode(true);   
   var toChild = toNode.appendChild(fromChild);   
 }
}
 
copyNode(document.getElementById("toto"),document.getElementById("titi"));

marche

26/03/2008, 11h45
le_chomeur

Effectivement , j'étais pas loin ;)
Merci mathieu
26/03/2008, 11h52
Matthieu2000

par contre vous avez un autre problème : les cellules des tables sont regénérées ! :aie:
26/03/2008, 11h56
le_chomeur

effectivement , et la ou ça devient problématique , j'ai essayé de tapé directement sur le contenu de la célulle pour en faire un nœud a copier :

document.getElementById('titi').childNodes[0] <== corespond au texte

et la rebelote les \n sautent 8O
26/03/2008, 12h13
Matthieu2000

ajoute un tag! span div ... et vous aurez un pb avec le script prototype.

Et si vous changer tout simplement le className de la cellule c'est simple efficace et marche à coup sur
26/03/2008, 14h02
le_chomeur

hein ??? pas compris ton dernier post :?

Citation:

<td>ici<span> test1
Test 2 apres retour a la ligne</span>
</td>

ou
Code:

1 2 3 4 5 6 <td onmouseover="this.className='classAvecPre';" onmouseout="this.className='classSansPre';" > test1 Test 2 apres retour a la ligne </td>
a tester

26/03/2008, 14h22
le_chomeur

oui effectivement :)
mais ça ne répond pas , a la question : comment copier un noeud en gardant les \n ( quand je parle de noeud je veux parler du contenu ;) ) sous ie ^^

la fonction copyNode le fais!

votre soucis c'est que le contenu ne contient plus les \n (dépend des class appliquée)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class="test" id="titi" onclick="alert(this.innerHTML)"> <span>  test1 Test 2 apres retour a la ligne </span> </div> <div id="toto" onclick="alert(this.innerHTML)"> <span>  test1 Test 2 apres retour a la ligne </span> </div>

26/03/2008, 16h31
jld33

Visiblement tous les exemples qui marchent sous IE6 doivent avoir le formatage d'affiché (avec la balise PRE ou le Css correspondant) dans le "noeud" original.

Dès qu'on ne veut pas voir formatage dans le "noeud" original, IE6 semble le supprimer purement et simplement et toutes les méthodes de copie du contenu (via innerHTML, la fonction copyNode de matthieu(qui utilise le DOM pour la copie), ou autre) ne font pas revenir les \n :pleure:

J'ai bien peur de devoir annoncer a mes utilisateurs d'IE6 qu'ils n'auront pas les retours a la ligne dans le div ....:(
26/03/2008, 16h35
le_chomeur

tu peux ... sinon utilise la méthode un peux barbare : tu récupères la méthode que j'avais donnée qui affichait les <pre></pre> et tu les supprimes avec un petit morceaux de code ;)
26/03/2008, 16h46
Matthieu2000

Citation:

Envoyé par jld33

Visiblement tous les exemples qui marchent sous IE6 doivent avoir le formatage d'affiché (avec la balise PRE ou le Css correspondant) dans le "noeud" original.

Dès qu'on ne veut pas voir formatage dans le "noeud" original, IE6 semble le supprimer purement et simplement et toutes les méthodes de copie du contenu (via innerHTML, la fonction copyNode de matthieu(qui utilise le DOM pour la copie), ou autre) ne font pas revenir les \n :pleure:

J'ai bien peur de devoir annoncer a mes utilisateurs d'IE6 qu'ils n'auront pas les retours a la ligne dans le div ....:(

Citation:

<td>ici<span> test1
Test 2 apres retour a la ligne</span>
</td>

si ta souris est sur ici cela devrait marcher! (ou bien viser entre les lignes...)
26/03/2008, 17h05
le_chomeur

effectivement la solution avec le hover sur la célulle est surement la meilleur solution ...
mais moi je ferais autrement :
un span avec comme style : position:absolute;top:0px;left:0px par rapport a mon td, et sur le hover du td( ou du span je passerais le formatage en pre ... ( via le css /!\ )

Pourquoi pas faire ceci :

Code:

1
2
3
4
5
<pre id="data" style="display: none">Line 1
Line 2</pre>
<span id="display"></span><script><!--
   $('display').innerHTML=$('data').firstChild.data.split('\n').join('<br/>');
--></script>

28/04/2008, 12h03
jld33

Désolé de cette réponse si tardive, je viens de me rendre compte que je n'avais pas mis de tag résolu ni remercié ceux qui avaient pris le temps de m'aider.:oops:

Après moults essais, IE 6 supprime bien purement et simplement les /n si on ne lui demande pas de formater (par la balise <PRE> ou avec le Css correspondant).
J'ai essayé diverses méthode (celle de modifier sur hover, celle proposée par FremyCompany, un mix des diverses approches etc.. Rien de bien concluant au final.
Celle la plus concluant étant proche de celle de FremyCompany à base de span formatté et hidden, suivi d'un span non formaté et visible et, sur hover du span non formaté, j'affichais en popup la copie du innerhtml du span hidden.
Malheureusement, j'ai en entete de colonne un script qui permet de filtrer sur les données, et celui ci affichait du coup les données en double :(

Voici donc la solution mise en place :
Ce n'est pas forcement la plus élégante mais elle marche et à un rendu visuel correct:

en ASP (mais ça pourrait être en Php aussi), un replace des "/n" par "  --  " (si on veut doubler comme ici les espaces bien mettre les   et pas de simples espaces sinon Ie supprime le 2eme espace dans le innerhtml et on retrouve le même pb qu'avec les "/n")

Code:

response.write( Replace(monrecordset(macolonne).Value,vbcrlf, "  --  "))

en javascript sur le mouseover du <td>
on remplace la chaine "  --  " par un <BR/>
(utilisant prototype, j'ai utilisé gsub pour remplacer TOUTES les occurences dans ma chaine et pas seulement la première)

Code:

elt_div.innerHTML=elt_td.innerHTML.gsub('  --  ','<BR/>')

voila, c'est encore une fois pas super beau ( coté code car à l'affichage ça reste assez lisible) mais ça évite des usines à gaz et répond au besoin.

Encore merci à ceux qui ont pris de leur temps pour m'aider à trouver une solution à ce problème.