Discussion :

[Stessy]

Bonjour à tous,

j'ai une page html qui fonctionne parfaitement sur tous les browsers sauf bien evidemment IE

Voici la page html

http://stessy.developpez.com/tmp/html/htmlForm3.htm

Vous remarquerez que les input ne sont pas affichés soue IE.

Je vous vois déjà venir, c'est quoi ce code de crade, d'amateur.
En fait le code est créé à partir de mon application web j2ee.
Je construis ces formulaires html depuis des xforms.

J'en avais déjà discuté hier avec spacefrog, pour pouvoir afficher un scrollbar dans un div. Tout cela fonctionnait bien que ce soit sous FF ou IE.
La preuve
http://stessy.developpez.com/tmp/html/htmlForm2.htm

Maintenant j'ai voulu appliquer ce code directement dans mon code java.
Mais à la différence que la boucle ne se trouve pas au niveau JS mais au niveau Java, c'est pour cela que j'ai une liste pareille de document.write('...');
Et c'est la cata concernant IE.

Et je ne vois pas du tout pourquoi cela ne fonctionnerait pas sous IE.

Si quelqu'un pouvait m'éclaircir un peu la situation, ce serait bien gentil

D'avance pour vos réponses.

[Stessy]

Je viens d'effectuer quelques tests et il s'avère que ce code ne fonctionne pas sous IE

Code :

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

1
2
3
4
for (i=1;i<12;i++)
{
largcol[i]=parseInt(document.getElementById('col'+i).offsetWidth);
}

Si vous avez une idée du pourquoi, elle est la bienvenue.

[Sub0]

Salut!

Avant tout, je tiens à souligner une chose très importante et souvent oubliée des développeurs web :
Javascript peut être désactivé par le client. Il faut d'abord créer l'architecture du site sans Javascript, sans CSS, avec uniquement du code HTML, si possible aux normes W3C, compatibles avec la plupart des navigateurs. Ensuite, on ajoute les fonctions Javascript et le CSS, le code Flash, les applets Java, etc... Pour Javascript, j'utilise la balise <noscript> pour réaliser une alternative.

Bref, j'ai regardé la source de ta page... C'est la 1ère fois que je vois les styles déclarés avec des acollades ! Mais bon, ça fonctionne tout de même...

Code :

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

<td id='col1' style="{font: bold 9pt Arial; width:30px ; text-align:center ; border-style:solid; border-width:thin;top:150px}">No</td>

Je viens d'effectuer quelques tests et il s'avère que ce code ne fonctionne pas sous IE

Code :

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

1
2
3
4
for (i=1;i<12;i++)
{
largcol[i]=parseInt(document.getElementById('col'+i).offsetWidth);
}

Chez moi, ce code fonctionne sous IE :

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
  <TABLE>
  <TR>
    <TD id="col1">No 1</TD>
    <TD id="col2">No 12</TD>
    <TD id="col3">No 123</TD>
    <TD id="col4">No 1234</TD>
  </TR>
  </TABLE>
 
  <SCRIPT type="text/javascript">
  <!--
  var largcol=new Array();
  for(i=1;i<5;i++) 
  { 
    largcol[i]=parseInt(document.getElementById('col'+i).offsetWidth); 
    document.write(largcol[i]+'<br/>');
  }
  //-->
  </SCRIPT>

Mais à mon avis, le problème est ailleurs...
• Que te retourne le déboggueur ?
• Qu'est-ce qui ne fonctionne pas exactement ? Soit plus précis(e).

[Stessy]

Bonjour,

je ne saurais pas être plus précis.

Il suffit d'ouvrir le premier lien avec FF et IE pour se rendre compte de la différence.

http://stessy.developpez.com/tmp/html/htmlForm3.htm

Les input ne s'affichent pas dans le DIV sous IE


Ce qui est bizarre c'est que ça fonctionne si on utilise la boucle au niveau Javascript, donc directement dans le code html, et non au niveau Java.

Comme par exemple le deuxième exemple utilise une boucle JS et là cela fonctionne sous IE et FireFox.

http://stessy.developpez.com/tmp/html/htmlForm2.htm

J'ai à nouveau effectué quelques tests, et au lieu d'aller rechercher la taille du input depuis la taille de la colonne dans la table, j'inclus moi même au niveau java la taille et là les input s'affichent bien. Mais ce n'est pas une solution car le offsetwidth ne donne pas la même taille que celle que je donne. Je suppose que le offsetWidth prend en compte les paramètres tels que le cellspacing et autres.

Voilà

[denisC]

Je n'ai qu'une chose à dire: beurk. Bien fait pour toi, non mais, faire des tables avec des document.write.....

Sinon, sur le fond, je vois pas du tout pourquoi la 2 marche et pas la 3, enfin, les mystères de l'informatique.

Donc sur le fond, pour moi, il y a deux solutions pour t'aider:

• Generer les colonnes après le chargement de la page (sur le onload du window ou du document). Ca marchera probablement beaucoup mieux. IE aprecie assez peu les getElementById avant la fin du chargement (pourquoi dans 3 plus que dans 2, aucune idée....). Au lieu des document.write tu devras certainement utiliser un string puis un innerHTML, mais ça peut le faire.
• Tout ce bazar juste pour avoir un header de table fixe????? Ca se fait en CSS pur, ce qui te permettra de génerer ta table de façon bien plus facile en Java... cf http://www.imaputz.com/cssStuff/bigFourVersion.html

Bonne chance

[Sub0]

Je n'ai qu'une chose à dire: beurk. Bien fait pour toi, non mais, faire des tables avec des document.write.....

Stessy a bien précisé dès le départ que son code était dégeu... Soyons cool voulez-vous ?

: Stessy, que veux-tu faire en fait :

Préfères-tu persister à utiliser un code crado et bricoler un truc pour que ça marche avec IE ?
Ou bien voudrais-tu essayer de suivre nos conseils et repartir sur de bonnes bases avec un code plus propre ?
Parce-que là, c'est tout à refaire selon moi si tu veux mieux... sinon, je peux toujours essayer de te proposer une combine de dépannage.

[Stessy]

Bonjour et merci pour vos réponses.

c'est vrai qu'un code plus propre pour le DIV serait le bienvenu.
Je trouve cela un peu bizarre tout ce code Javascript pour afficher les input.

Si vous avez des conseils à me donner, ils sont les bievenus.

Pour ce qui est du code extérieur au DIV je préfère le laisser comme cela, sinon je peux recommencer le design entier de mon application, et cela va me prendre des semaines et des semaines pour tout remettre à jour.

Disons que j'ai une semaine pour implémenter ces modifications, qu'elles fonctionnent avec tous les browser, et de savoir que les input seront gérés par des boucles au niveau Java et non au niveau JavaScript.

[SpaceFrog]

lol Stess
et merci pour le beurk Sub0


Stess tu peux toujours passer par des createElements mais ça risuqe de compliquer le code...

Je te propose une autre piste:
Mets ta première ligne dans un div ou un li ... ?
puis lorsque tu as besoin d'une nouvelle ligne tu fais un cloneNode true du div que tu append ensuite ...

[Sub0]

et merci pour le beurk Sub0

J'ai dis beurk moi ?

[SpaceFrog]

ha non desolé c'était Denis
mais bon j'assume le document.write c'est pas beau ...

[denisC]

ha non desolé c'était Denis
mais bon j'assume le document.write c'est pas beau ...

Et moi j'assume d'être le schtroumpf grognon de l'assemblée !!

Mais bon, document.write, c'est vraiment laid

[Sub0]

Perso, j'essaye toujours de construire mes pages sans CSS ni Javascript.
Dans un cas comme celui-là, j'utiliserais PHP pour créer le code HTML des inputs,
comme de toutes façons, il faut un script sur le serveur pour récupérer les saisies du formulaire...
J'ajoute ensuite JS et CSS pour embelir et dynamiser la page, à+

[Stessy]

Désolé pour le retard, gastro-entérite, cloué dans mon divan deux jours

lol Stess
et merci pour le beurk Sub0


Stess tu peux toujours passer par des createElements mais ça risuqe de compliquer le code...

Je te propose une autre piste:
Mets ta première ligne dans un div ou un li ... ?
puis lorsque tu as besoin d'une nouvelle ligne tu fais un cloneNode true du div que tu append ensuite ...

Désolé de te décevoir spafy, mais pour moi ce que tu viens de dire c'est du charabia .

[SpaceFrog]

Code :

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

<div id="uneligne" style="width:100%;">et ici dedans tes inputs</div>

et dans le script ....

Code :

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

1
2
3
var newline=document.getElementById('uneligne').cloneNode(true);
newline.id='idlinge'+variableincrémentee
document.body.appendChild(newline)