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

**stof** · 04/12/2008, 11h25

Alors pour l'instant ça ne change rien :

Code :

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

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

**BrItneY** · 04/12/2008, 11h44

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

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...

Edit -> outerHTML c'est obsolète au passage

Firefox ne le prend même pas en compte...

Par contre tu me donnes une idée

:
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 :

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
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">
<!--
function bou() {
 
	var fillUp1 = document.getElementById('fillUp1');
    if (fillUp1 != 'undefined')
    {
		fillUp1.parentNode.innerHTML='<td>dinnen</td><td>5</td><td>decaf</td><td>yes</td>';
	}
 
}
 -->
</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

**stof** · 04/12/2008, 14h35

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)

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).

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 :

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

<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

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...)

**BrItneY** · 04/12/2008, 14h59

Envoyé par stof

Bon, j'ai donc mis ça :

Code :

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

<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...

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

**stof** · 04/12/2008, 16h15

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

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 :

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
<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>

**BrItneY** · 04/12/2008, 16h28

Envoyé par stof

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

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
<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)

**stof** · 04/12/2008, 17h33

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 :

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
<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 :

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
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";
  }	
 
}

**stof** · 08/12/2008, 09h44

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.

**BrItneY** · 08/12/2008, 11h01

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

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à :

Envoyé par stof

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
<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

**stof** · 08/12/2008, 14h00

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

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
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>
 
...

**BrItneY** · 08/12/2008, 14h16

Ah, Ok !

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...

Edit -> Parti

**stof** · 08/12/2008, 17h26

Heu... qu'est-ce qui a changé dans le code ci-dessus?

**BrItneY** · 08/12/2008, 17h28

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

**stof** · 12/12/2008, 10h37

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 :

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

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 :

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

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

**stof** · 12/12/2008, 16h25

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 :

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

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.

**stof** · 15/12/2008, 17h57

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...

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

JavaScript

Discussions similaires

Partager

Partager