Popup contituée de 2 feuilles XSL : "cosmétique"

Version imprimable

Voir 40 message(s) de cette discussion en une page

04/12/2008, 11h25
stof
Alors pour l'instant ça ne change rien :
Code:

1 2 3 var cellOut= tableOut.getElementsByTagName("TD")[0]; var cellIn= tableIn.getElementsByTagName("TD")[0]; cellIn.style.width = cellOut.offsetWidth +"px";
Quand je suis pas à pas, ça va bien chercher ce qu'on veut, par exemple le champ cellOut.outerHTML = <TD class=cTitle>Nom: </TD>

Par contre cellOut.offsetWidth est à 0

Hum, je viens de voir, tu as d'autres lignes au dessus de tes lignes insérées, non ?!

http://idata.over-blog.com/0/15/63/30/capture2.jpg

On dirait qu'il y en a une autre au dessus de la ligne de "Start Date" !
Si c'est le cas, met l'identifiant tableOut sur ton tableau principal (celui de ta pop-up) et réessayes... après, faudra refaire la même opération pour la ligne qui n'est plus modifiée (fillUp1 en l'occurrence...)... tu es obligé de tâtonner, c'est le seul moyen...

Je ne sais pas ce que tu utilises comme logiciel, mais perso je débugge grâce à firebug, un plug-in de firefox... :roll:

Edit -> outerHTML c'est obsolète au passage ;) Firefox ne le prend même pas en compte... :roll:

Par contre tu me donnes une idée :P :
En reprenant la première solution que l'on avait où tu avais ce soucis...
Tu disais que cela ne fonctionnait plus en enlevant les <td>... Et si on les laissait, et qu'on changeait le contenu de sont parent (=la balise qui le contient, c'est à dire le <tr> ici...)
J'ai modifié mon exemple :
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 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Essai JS</title> <script type="text/javascript">  </script> </head> <body onload="bou()"> <table id="tableOut"> <caption>cups of coffee consumed by each senator</caption> <tr> <th>name</th> <th>cups</th> <th>type of coffee</th> <th>sugar?</th> </tr> <tr> <td>t. sexton</td> <td>10</td> <td>espresso</td> <td>no</td> </tr> <tr> <td colspan="4" id="fillUp1"> </td> </tr> <tr> <th>name</th> <th>cups</th> <th>type of coffee</th> <th>sugar?</th> </tr> </table> </body> </html>
Essayes et dis moi si cela fonctionne :aie:

04/12/2008, 14h35
stof

Citation:

On dirait qu'il y en a une autre au dessus de la ligne de "Start Date" !

Oui, à l'origine j'avais juste montré ce passage et une fois dans la discussion la popup complète (il y a 5 lignes dans XSL n°1 et une dans XSL n°2)

Citation:

Je ne sais pas ce que tu utilises comme logiciel, mais perso je débugge grâce à firebug, un plug-in de firefox...

Edit -> outerHTML c'est obsolète au passage Firefox ne le prend même pas en compte...

Visual et j'ai juste fait Qucik Watch sur la variable (le seul champ où j'ai trouvé quelque chose de parlant était ce champ-là, au moins je sais que c'était bien le bon contenu).

Citation:

Si c'est le cas, met l'identifiant tableOut sur ton tableau principal (celui de ta pop-up) et réessayes... après, faudra refaire la même opération pour la ligne qui n'est plus modifiée (fillUp1 en l'occurrence...)... tu es obligé de tâtonner, c'est le seul moyen...

Bon, j'ai donc mis ça :

Code:

<table width="100%" height="100%" class="clsDiv" id="tableOut">

au lieu de mettre cet id dans la feuille XSL n°1 mais ça donne pareil (cellOut.offsetWidth est encore à 0).

Je regarde donc la solution 2...mais je ne comprend pas pour l'instant

Citation:

Et si on les laissait, et qu'on changeait le contenu de sont parent (=la balise qui le contient, c'est à dire le <tr> ici...)
04/12/2008, 14h59
BrItneY

Citation:

Envoyé par stof

Bon, j'ai donc mis ça :

Code:

<table width="100%" height="100%" class="clsDiv" id="tableOut">

au lieu de mettre cet id dans la feuille XSL n°1 mais ça donne pareil (cellOut.offsetWidth est encore à 0).

cellOut est la bonne cellule cette fois ?! tu as pas possibilité de mettre un point d'arrêt dans ton javascript et d'exécuter des commandes à ce point d'arrêt ?! Histoire que tu cherches à atteindre la valeur de la largeur de la cellule... car là je vois pas pourquoi cela ne fonctionne pas...

Edit -> à moins que ce soit IE qui n'aime pas offsetWidth... essayes avec cellOut.clientWidth ... on sait jamais... :roll:

Laisses tomber la solution 2... cela ne fonctionne pas sous IE... seulement sous Firefox... :mur:

Citation:

Envoyé par BrItneY

tu as pas possibilité de mettre un point d'arrêt dans ton javascript et d'exécuter des commandes à ce point d'arrêt ?!

A moins que ce soit IE qui n'aime pas offsetWidth... essayes avec cellOut.clientWidth

Laisses tomber la solution 2... cela ne fonctionne pas sous IE.

Cette appli doit fonctionner sous IE seulement; oui, j'avais placé un point d'arrêt avant et je peux voir tous les champs de ma variable cellOut.

Donc je vois tous les champs de cellOut et je peux te dire qu'il n'y en a pas un qui aurait une valeur de largeur différente de 0
--> width=""
-->offsetWidth=0
-->clientWidth=0
-->scrollWidth=0
-->cellIndex=0
-->rowSpan=1
-->colSpan=1
-->dis-moi ce que tu veux je te le donne :lol:

Citation:

Envoyé par BrItneY

cellOut est la bonne cellule cette fois ?!

Je pense, le seul champ qui me dise ce qu'est cellOut, c'est innerHTML qui me dit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <TABLE width=\"100%\"> <TBODY> <TR height=20> <TD class=cTitle>Nom: </TD> <TD class=level_1><INPUT id=txtNom onchange=checkValid() value=Toto></TD></TR> <TR height=20> <TD class=cTitle>Bidule: </TD> <TD class=level_1><INPUT id=txtBidule onchange=checkValid() value=X></TD></TR> <TR height=20> <TD class=cTitle>Truc: </TD> <TD class=level_1><INPUT id=txtTruc onchange=checkValid()></TD></TR> <TR height=20> <TD class=cTitle>Label: </TD> <TD class=level_1>abcdefghij</TD></TR> <TR height=20> <TD class=cTitle>Start Date: </TD> <TD class=level_1><INPUT id=txtStartDate onchange=checkValid() value=04/12/2008><IMG onclick=getStartDate() src=\"http://localhost:8080/appli/img/Calendar.gif\"></TD></TR> </TBODY></TABLE>

Citation:
Envoyé par stof
Je pense, le seul champ qui me dise ce qu'est cellOut, c'est innerHTML qui me dit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <TABLE width=\"100%\"> <TBODY> <TR height=20> <TD class=cTitle>Nom: </TD> <TD class=level_1><INPUT id=txtNom onchange=checkValid() value=Toto></TD></TR> <TR height=20> <TD class=cTitle>Bidule: </TD> <TD class=level_1><INPUT id=txtBidule onchange=checkValid() value=X></TD></TR> <TR height=20> <TD class=cTitle>Truc: </TD> <TD class=level_1><INPUT id=txtTruc onchange=checkValid()></TD></TR> <TR height=20> <TD class=cTitle>Label: </TD> <TD class=level_1>abcdefghij</TD></TR> <TR height=20> <TD class=cTitle>Start Date: </TD> <TD class=level_1><INPUT id=txtStartDate onchange=checkValid() value=04/12/2008><IMG onclick=getStartDate() src=\"http://localhost:8080/appli/img/Calendar.gif\"></TD></TR></TBODY></TABLE>" String
Hum... cellOut est censé être la première cellule de la première ligne du tableau principal... et d'après ta réponse, c'est pas une des deux lignes où est inséré l'xml...

Tu peux me montrer le code de ton tableau "principal" !?! (celui de la pop-up)

Ah alors effectivement si on était sensé avoir qu'une cellule, c'est loupé : là ça donne l'ensemble du contenu de la feuille XSL n°1.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table width="100%" height="100%" class="clsDiv" id="tableOut">
<tr>
	<td id="fillUp1" >
	</td>
</tr>
<tr>
	<td id="fillUp2">
	</td>
</tr>
<tr>
	<td align="center">
		<input type="button" id="btnValid" value="Valid" onClick="fValid()" style="width:120px" disabled="true">
		<input type="button" value="Cancel" onClick="fCancel()" style="width:120px">
	</td>	
</tr>
</table>

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
function fMyPopupSettings(){
	...	
	arrayXML = window.dialogArguments;
	str1= arrayXML[0];
	str2 = arrayXML[1];		
 
	XmlDoc1 = new ActiveXObject("Msxml2.DOMDocument");
	XmlDoc1.async = false;
	XmlDoc1.loadXML(str1);
	XmlDoc1.selectSingleNode("/line/IndexId");	
 
	XslDoc1 = new ActiveXObject("Msxml2.DOMDocument");
	XslDoc1 .async = false;
	XslDoc1 .load("text?action=getFileText&fileName=partie1.xsl");				
 
	fillUp1.innerHTML =  XmlDoc1.transformNode(XslDoc1);
 
	//Partie2 de la popup
	XmlDoc2 = new ActiveXObject("Msxml2.DOMDocument");
	XmlDoc2 .async = false;
	XmlDoc2 .loadXML(str2);	
	XmlDoc2 .selectSingleNode("/line/Dernier_Champ");
...
 
	XslDoc2 = new ActiveXObject("Msxml2.DOMDocument");
	XslDoc2.async = false;
	XslDoc2.load("text?action=getFileText&fileName=partie2.xsl");
	fillUp2.innerHTML =  XmlDoc2.transformNode(XslDoc2);	
 
	//debugger;
	var tableOut = document.getElementById('tableOut');
	var tableIn = document.getElementById('tableIn');
 
  if ((tableOut != 'undefined')&&(tableIn != 'undefined'))
  {
      var cellOut= tableOut.getElementsByTagName("TD")[0];
      var cellIn= tableIn.getElementsByTagName("TD")[0];
      cellIn.style.width = cellOut.offsetWidth +"px";
  }	
 
}

08/12/2008, 09h44
stof

Bonjour,

Je ne sais pas si BrItney arrive encore à retrouver le post depuis les déplacements de catégorie mais j'espère qu'on va trouver une solution.

Ne t'inquiètes pas, j'utilises mon tableau de bord... mais c'est juste que je suis pas connecté le wd... :aie:

Hum, je te l'avais demandé, mais je sais pas si c'est clair du coup... tu as d'autres lignes avant celle où est insérée ta première feuille XSL ?! (dans le tableau "tableOut" ? )

Car là :
Citation:
Envoyé par stof
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <table width="100%" height="100%" class="clsDiv" id="tableOut"> <tr> <td id="fillUp1" > </td> </tr> <tr> <td id="fillUp2"> </td> </tr> <tr> <td align="center"> <input type="button" id="btnValid" value="Valid" onClick="fValid()" style="width:120px" disabled="true"> <input type="button" value="Cancel" onClick="fCancel()" style="width:120px"> </td> </tr> </table>
Il n'y a pas de ligne avant celle de ta première feuille XSL... du coup, si on prend le contenu de la première cellule de la première ligne, bah oui, il nous ressort ce qui est généré par la fonction fillUp1, c'est à dire le contenu de ta feuille XSL 1 :roll:

Bah, juste <head> mais pour le <body> c'est tout :

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
<html>
<head>	
	<link rel="stylesheet" type="text/css" href="text?action=getFileText&fileName=ratios.css">
	<title>
		Titre de la page
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;		
	</title>
	<script language="javascript" src="text?action=getFileText&fileName=checkformat.js"></script>
</head>
 
<body topmargin="0" leftmargin="0" bgcolor="#ffffff">
 
<table width="100%" height="100%" class="clsDiv" id="tableOut">
<tr>
	<td id="fillUp1" >
	</td>
</tr>
<tr>
	<td id="fillUp2">
	</td>
</tr>
<tr>
	<td align="center">
		<input type="button" id="btnValid" value="Valid" onClick="fValid()" style="width:120px" disabled="true">
		<input type="button" value="Cancel" onClick="fCancel()" style="width:120px">
	</td>	
</tr>
</table>
 
...

08/12/2008, 14h16
BrItneY

Ah, Ok ! :aie:

On peut le faire par la feuille de style (CSS) alors !
Si tu précises une largeur pour la classe "cTitle", bah tu fixeras une largeur pour les toutes cellules de la première colonne... :aie:

Edit -> Parti :P
08/12/2008, 17h26
stof

Heu... qu'est-ce qui a changé dans le code ci-dessus?
08/12/2008, 17h28
BrItneY

Rien en fait, mais j'étais parti dans d'autres trucs, du coup je l'ai laissé, sorry :oops:

Bonjour,

Je suis sur le point d'abandonner mais bon, comme j'ai trouvé un peu de temps pour m'y remettre, voilà la suite :

J'ai été voir le fichier css inclus dans le fichier htm dont on parlait :
Code:

1 2 3 4 5 6 7 8 9 <html> <head> <link rel="stylesheet" type="text/css" href="text?action=getFileText&fileName=xxxxxxx.css"> <title> Titre de la page </title> <script language="javascript" src="text?action=getFileText&fileName=checkformat.js"></script> </head> <body topmargin="0" leftmargin="0" bgcolor="#ffffff">
Après dans le style cTitle, j'ai rajouté un champ width
Code:

1 2 3 4 5 6 7 8 .cTitle{ font-family:Verdana, Arial; font-size : 11; font-weight : bold; width : 50%; color:white; background-color:"#6487dc"; }
Si quand je chage width ça a bien un effet sur tous les premiers champs (ceux du XSL n°1), le dernier champ (du XSL n°2) reste invariant même si lui aussi a aussi la balise <td class="cTitle">

PS : pour bien aligner, puisque le 2ième reste fixe, je dois écrire absolument width = 35% mais
1°/c'est du bricolage
2°/Il reste une petite séparation horizontalement entre les champs des 2 XSL

12/12/2008, 16h25
stof
Finalement même résultat mais sans modifier cTitle : j'ai mis

<td class="cTitle" width="100px"> dans la première colonne définie dans le XSL n°1 et ensuite ton bout de code a fait le reste:
Code:

1 2 3 var cellOut= tableOut.getElementsByTagName("TD")[0]; var cellIn= tableIn.getElementsByTagName("TD")[0]; cellIn.style.width = cellOut.width +"px";
Sauf que j'ai remplacé cellOut.offsetWidth par cellOut.width et à condition de ne pas choisir moins de 80px (sinon c'est encore 2 tailles différentes pour les 2 bouts).

Et reste toujours ce petit problème d'espace entre les lignes du XSL n°1 et celle(s) de XSL n°2.
15/12/2008, 17h57
stof

Mon collègue m'a résolu plein de problèmes, mais pour celui-là, il ne voit pas non plus.

Il a bien essayé avec des BORDER-BOTTOM:0px dans les <table> ou dans les <tr> mais rien à faire...

Voir 40 message(s) de cette discussion en une page