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

**stof** · 26/11/2008, 11h56

Bonjour,

J'ai une popup dont le code HTM est décrit ci-dessous qui utilise 2 feuilles XSL (décrites également) :
Mon problème :
Si tout y est bien, il y a une petite séparation en hauteur entre ce contenu de la première et le contenu de la deuxième feuille; de même le titre de mon champ est un peu plus large dans le contenu de la feuille2.
Je précise qu'avant tout était dans la même feuille (j'externalise une partie du code qui est commune à plusieurs popup du même genre).

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%" height="100%" class="clsDiv">
<tr>
	<td>
		<div id="fillUp1" ></div>
	</td>
</tr>
<tr>
	<td>
		<div id="fillUp2"></div>
	</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>

les fillUp et fillUp2 sont remplis à partir du chargement de 2 feuilles XSL

Et dans ces feuilles XSL le code ressemble à :
Feuille 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
17
18
19
20
21
22
23
24
25
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:output encoding="ISO-8859-1" method="html"/>
<xsl:decimal-format grouping-separator = " "/>
 
<xsl:template match="/">
	<table width="100%">
		<tr height="20px">
			<td class="cTitle">
				Nom:
			</td>
			<td class="level_1">
				<input type="text" id="txtNom" onchange="checkValid()">
					<xsl:attribute name="value">
					 	<xsl:value-of select="line/Name"/>						
					</xsl:attribute>
				</input>				
			</td>
		</tr>
...
...
	</table>
</xsl:template>
</xsl:stylesheet>

Feuille 2 :

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
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:output encoding="ISO-8859-1" method="html"/>
<xsl:decimal-format grouping-separator = " "/>
 
<xsl:template match="/">
	<table width="100%">
		<tr height="20px">
			<td class="cTitle">
				Bidule:
			</td>
			<td class="level_1">
				<select id="bidule" onchange="checkValid()">
					<option value="select">
							Select Bidule
					</option>	
				</select>				
			</td>
		</tr>		
	</table>
</xsl:template>
 
</xsl:stylesheet>

**BrItneY** · 27/11/2008, 16h40

Tu pourrais nous mettre un screenshot histoire qu'on puisse mieux voir tes pb d'affichage ?!

Une petite question, tu l'as sous-entendu, mais vaut mieux en être certain : tu n'avais pas ce soucis en utilisant que de l'HTML, c'est bien ça ?!
Tu peux nous montrer le résultat (screenshot) et nous fournir le code ?!

Ton soucis est en effet dur à caser dans une section car, si j'ai bien compris, ton code fonctionne en HTML, mais pas après modification et utilisation de xml/xsl...

**stof** · 27/11/2008, 17h08

En fait tout le système était déjà en place (1 fichier htm de description du style et les fonctions de la popup, fichier xsl pour créer le contenu , fichier js qui appelle notament la popup, fichier xml pour aller chercher les éléments en rapport avec le code java).

Ce que j'ai changé :
le fichier js désormais appelle la popup avec 2 arguments (correspondant aux 2 XML des classes dont j'ai besoin)
le htm récupère désormais ces 2 arguments pour créer le code HTML avec ces données en rapport avec les 2 XSL.

Je n'ai aucune idée si on comprend ce que je dis (tout ça c'est tout frais pour moi)

Et bref, après beaucoup d'aide autour de moi, j'ai bien la popup comme avant (tout y est) sauf qu'il y a une séparation (je ne montre que les 2 champs entre lesquels il y a eu séparation dans le code)
AVANT :

APRES :

Dans le XSL de la partie2, j'ai

Code :

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

1
2
<table width="100%">
<tr height="20px">

Si je met moins de 100%, je peux réduire la taille de la ligne mais c'est pas le but : la taille varie suivant les cas.
Lorsque tout était dans le même XSL, 100% pour l'ensemble et ça s'arrangeait tout seul.
Comment harmoniser ça maintenant que c'est séparé en 2?

**BrItneY** · 27/11/2008, 17h14

Hum... pas facile avec si peu d'éléments...
Montres nous ce que tu souhaites obtenir, c'est à dire le résultat qui est bon, et le code html que tu utilisais pour obtenir ce bon résultat ?! Parce que là comme ça, j'ai une piste, mais pas sur que ce soit cela sans avoir ton code html correct... (= le code html sans utilisation de xml/xsl)

Edit -> je viens de voir la modification de ton poste, j'y réponds tout de suite

Re Edit -> Alors, le décalage horizontal <-> entre les cellules de tes deux lignes est normal...
Tu ne précises pas de largeur fixes pour tes cellules avec width="50 %, ou 50 px, etc"... et comme les feuilles génèrent toutes les deux des tableaux, ils sont indépendants.... et les colonnes sont distinctes, donc il fait ce qu'il veut avec les largeurs des cellules...

On va tenter un truc :

Pop-up :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table width="100%" height="100%" class="clsDiv">
<tr height="20px">
	<div id="fillUp1" ></div>
</tr>
<tr height="20px">
        <div id="fillUp2"></div>
</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>

Feuille 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
17
18
19
20
21
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:output encoding="ISO-8859-1" method="html"/>
<xsl:decimal-format grouping-separator = " "/>
 
<xsl:template match="/">
	<td class="cTitle">
		Nom:
	</td>
	<td class="level_1">
		<input type="text" id="txtNom" onchange="checkValid()">
			<xsl:attribute name="value">
				<xsl:value-of select="line/Name"/>						
			</xsl:attribute>
		</input>				
	</td>
...
...
</xsl:template>
</xsl:stylesheet>

Feuille 2 :

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
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:output encoding="ISO-8859-1" method="html"/>
<xsl:decimal-format grouping-separator = " "/>
 
<xsl:template match="/">
	<td class="cTitle">
		Bidule:
	</td>
	<td class="level_1">
		<select id="bidule" onchange="checkValid()">
			<option value="select">
				Select Bidule
			</option>	
		</select>				
	</td>	
</xsl:template>
 
</xsl:stylesheet>

Re Re Edit -> correction de petites fautes d'orthographe

**stof** · 27/11/2008, 17h34

Tu ne précises pas de largeur fixes pour tes cellules avec width="50 %, ou 50 px, etc"... et comme les feuilles génèrent toutes les deux des tableaux, ils sont indépendants.... et les colonnes sont distinctes, donc il fait ce qu'il veut avec les largeurs des cellules..

Ahhhhhh, je sens que je suis tombé sur quelqu'un qui comprend ce que je fais et qui va bien m'expliquer!

OK; bon, par contre sauf si une modif m'échappe, il me semble que tu n'as touché qu'au fichier htm avec la largeur de chaque section (chaque champ fait 20px de haut, j'ai 5 champs dans la partie1 et 1 dans la partie2, j'ai donc mis 100px et 20px (après avoir essayé 20px et 20px) mais le résultat est le même.

EDIT : pardon, j'ai pas vu que t'as enlevé les baslises table des XSL : j'essaie
EDIT2 : ouh là, sans les balise <table width="100%">, c'est le gros boxon!

**BrItneY** · 27/11/2008, 17h40

Envoyé par stof

Ahhhhhh, je sens que je suis tombé sur quelqu'un qui comprend ce que je fais et qui va bien m'expliquer!

Attends, ton pb n'est pas encore résolut ^^'

J'ai également enlevé les balises des lignes : <tr></tr> (dans les deux feuilles !)

Montres moi ce que cela donne une fois que c'est fait

PS : désolé, j'aurais du préciser les changements que j'effectuais

Edit -> ainsi que les balises des cellules <td></td> dans le fichier de la pop-up !

**stof** · 27/11/2008, 17h52

Si je me suis pas trompé ça donne ça :

Donc : les lignes Champ/Valeur du champ (violet/bleu) ne sont plus séparées (plus de balise <tr> dans la feuille XSL n°1)
Notament ;-)

A comparer avec :

EDIT 18h05 (c'est aussi moche mais je crois que c'est conforme)

**BrItneY** · 01/12/2008, 11h37

Salut, et désolé de ne pas avoir répondu plus tôt, mais j'étais pas en forme

J'ai réfléchi après t'avoir demandé d'essayer jeudi, et en fait c'est assez logique que cela n'ai pas fonctionné...

J'aimerais savoir ce que fait exactement ta fonction javascript ?
Elle recherche dans ton document les balises ayant l'identifiant : fillUp1 et 2 et les remplit avec l'HTML généré depuis le XML et mis en forme grâce au XSL ?! Parce que si c'est le cas, et que ton javascript ne recherche pas la balise <div> en particulier, on pourrait lui demander d'insérer le contenu dans la balise <tr>, et insérer les balises <td> par l'xml... on peut toujours essayer en tout cas...
C'est ce que je voulais faire avant... mais je penses que le <div> fait tâche et empêche que cela fonctionne...

Donne moi ta fonction js, histoire de voir si c'est possible, et au passage donne moi le code que tu as utilisé pour notre petit essai précédent, histoire d'être certain que cela ne fonctionne pas, et que c'est pas une erreur qui s'est immiscée dedans...

Byou !

BrItneY

**stof** · 01/12/2008, 13h29

Envoyé par BrItneY

J'aimerais savoir ce que fait exactement ta fonction javascript ?

Dans le fichier .htm?

En dehors du code déjà donné, voilà où sont remplis les fillUp :

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
function fMyPopupSettings(){
...
arrayXML = window.dialogArguments;
arg1= arrayXML[0];
arg2= arrayXML[1];
...
XmlDoc1 = new ActiveXObject("Msxml2.DOMDocument");
XmlDoc1.loadXML(arg1);
oXslDoc1.load("text?action=getFileText&fileName=partie1_settings.xsl");				
fillUp1.innerHTML =  oXmlDoc1.transformNode(oXslDoc1);
...
XmlDoc2 = new ActiveXObject("Msxml2.DOMDocument");
XmlDoc2.loadXML(arg2);
oXslDoc2.load("text?action=getFileText&fileName=partie2_settings.xsl");				
fillUp2.innerHTML =  oXmlDoc2.transformNode(oXslDoc2);
...
}

Et donc ces arguments de arrayXML viennent de ce qui a été entré dans une fonction du fichier js :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function showMyPopupSettings(){				
...        
 
oXmlDoc1 = window.BiduleList.XMLDocument;
oXmlDoc2 = window.MachinList.XMLDocument;  
 
oldLineNodeArray =  new Array(oXmlDoc1.xml, oXmlDoc2.xml); 
 
 
	URL = "text?action=getFileText&fileName=mypopup_settings.htm";
	newLineNode = window.showModalDialog(URL,oldLineNodeArray,"status:'no';dialogwidth:370px;dialogheight:235px; dialogLeft:100px"); 
...
}

Voilà...c'est tellement complexe que j'essaie de donner le minimum de code nécessaire; j'espère que ça répond donc à ta question.

Alors, que manipule-t-on comme balise dans le htm et les xsl (partie1/partie2)

Envoyé par BrItneY

Donne moi ta fonction js, histoire de voir si c'est possible, et au passage donne moi le code que tu as utilisé pour notre petit essai précédent, histoire d'être certain que cela ne fonctionne pas, et que c'est pas une erreur qui s'est immiscée dedans...

Hum, entre temps j'ai tout remis comme avant

**BrItneY** · 02/12/2008, 10h03

fillUp1.innerHTML = ...

Cool, c'est ce que j'espérais... on va pouvoir retenter alors

Je m'explique... le soucis de ce que je t'ai fait tenter jeudi, c'est certainement les div... car ils se trouvaient entre les balises <tr> (lignes) et <td> (cellules) du tableau... Du coup, on va enlever ces balises <div>, et insérer le contenu de tes pop-ups directement dans les <tr>...

En gros :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<table width="100%" height="100%" class="clsDiv">
<tr height="20px" id="fillUp1">
</tr>
<tr height="20px" id="fillUp2">
</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>

Et pour les deux pop-ups, reprend le code de jeudi dernier... C'est à dire le code sans les <table> et <tr>

Envoi moi un résultat visuel, mais également le code qui est généré... en faisant un clic-droit dans ton navigateur puis afficher la source... (que le passage qui nous intéresse hein ^^)

Une petite question également : Quand et comment est appelé ta fonction javascript fMyPopupSettings ?!

**stof** · 02/12/2008, 11h08

Bonjour,

1°/Je crois qu'il n'aime pas la syntaxe du
<tr height="20px" id="fillUp1"> </tr>
(avant ça fonctionne, avec ces modifs du .htm uniquement ça plante déjà)

Ca fait planter ici:

Code :

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

1
2
oXslDoc1.load("text?action=getFileText&fileName=partie1_settings.xsl");				
fillUp1.innerHTML =  oXmlDoc1.transformNode(oXslDoc1);

2°/pas d'affichage du code source disponible pour la popup (je suis bien embêté, j'y avais déjà pensé d'ailleurs...

)

3°/

pour les deux pop-ups

On est d'accord qu'il y a une popup (même s'il faut 2 XSL pour cela)

4°/

Quand et comment est appelé ta fonction javascript fMyPopupSettings

Euh...je ne sais pas bien; est-ce que "dans le fichier htm" est la bonne réponse? Le document commence par toutes les descriptions de mise en form puis ensuite vient la balise <script> avec

Code :

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

1
2
3
4
5
6
var XmlDoc1, XmlDoc12;
fMyPopupSettings();
 
function fMyPopupSettings(){
...
}

**BrItneY** · 02/12/2008, 11h40

Envoyé par stof

1°/Je crois qu'il n'aime pas la syntaxe du
<tr height="20px" id="fillUp1"> </tr>
(avant ça fonctionne, avec ces modifs du .htm uniquement ça plante déjà)

Ca fait planter ici:

Code :

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

1
2
oXslDoc1.load("text?action=getFileText&fileName=partie1_settings.xsl");				
fillUp1.innerHTML =  oXmlDoc1.transformNode(oXslDoc1);

1. Hum... bizard... j'ai essayé de mon côté avec du code plus simple...en appelant la fonction dans le onload du body par contre... sinon cela ne fonctionne pas...

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
<html>
<head>
<script type="text/javascript">
<!--
 
function bou() {
 
	var fillUp1 = document.getElementById('fillUp1');
        if (fillUp1 != 'undefined')
        {
		fillUp1.innerHTML='<TD>J. Dinnen</TD><TD>5</TD><TD>Decaf</TD><TD>Yes</TD>';
	}
 
}
 -->
        </script>
</head>
<body onload="bou()">
 
<TABLE>
<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 id="fillUp1">
 
</tr>
<TR>
   <TH>Name</TH>
   <TH>Cups</TH>
   <TH>Type of Coffee</TH>
   <TH>Sugar?</TH>
</tr>
</TABLE>
</body>
</html>

Tu peux me dire de quelle façon est créé la variable fillUp1 stp ?!
Du genre :

Code :

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

var  = document.getElementById('fillUp1');

Envoyé par stof

2°/pas d'affichage du code source disponible pour la popup (je suis bien embêté, j'y avais déjà pensé d'ailleurs...

)

2. Arg, dommage...

Envoyé par stof

3°/ On est d'accord qu'il y a une popup (même s'il faut 2 XSL pour cela)

3. Vivi, c'était les 2 xsl dont je voulais parler

Envoyé par stof

4°/
Euh...je ne sais pas bien; est-ce que "dans le fichier htm" est la bonne réponse? Le document commence par toutes les descriptions de mise en form puis ensuite vient la balise <script> avec

Code :

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

1
2
3
4
5
6
var XmlDoc1, XmlDoc12;
fMyPopupSettings();
 
function fMyPopupSettings(){
...
}

4. fMyPopupSettings(); c'est la ligne qui appelle la fonction, merci

Mets le dans le <body onload="fMyPopupSettings()"> comme je te le conseilles plus haut :

**stof** · 02/12/2008, 13h48

Ben j'ai fait comme toi (histoire de)
-->onload dans le body : c'est pareil chez moi (ça fonctionne à l'origine mais plus quand je casse les <div>

Code :

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

1
2
3
4
5
6
7
8
9
10
<table width="100%" height="100%" class="clsDiv">
<tr height="20px" id="fillUp1">
<tr height="20px" id="fillUp2">
<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>

Tu peux me dire de quelle façon est créé la variable fillUp1 stp ?!

Heu...là non?

oXslDoc1.load("text?action=getFileText&fileName=partie1_settings.xsl");
fillUp1.innerHTML = oXmlDoc1.transformNode(oXslDoc1);

**BrItneY** · 02/12/2008, 13h55

Envoyé par stof

Code :

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

1
2
3
4
5
6
7
8
9
10
<table width="100%" height="100%" class="clsDiv">
<tr height="20px" id="fillUp1">
<tr height="20px" id="fillUp2">
<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>

Euh, là pour le coup c'est normal, car tes balises <tr> ne sont pas fermées...

Soit tu les mets en autofermantes :

Code :

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

<tr id="..." height="..." />

soit tu lui mets une balise de fermeture comme ceci:

Code :

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

<tr>[...]</tr>

Le plus classique pour des balises <tr>, dont le contenu n'est pas vide est avec une balise de fermeture...

Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<table width="100%" height="100%" class="clsDiv">
<tr height="20px" id="fillUp1">
</tr>
<tr height="20px" id="fillUp2">
</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>

Dans le bout de code que tu m'envoies :

Code :

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

1
2
oXslDoc1.load("text?action=getFileText&fileName=partie1_settings.xsl");
fillUp1.innerHTML = oXmlDoc1.transformNode(oXslDoc1);

fillUp1 est une variable... elle doit être défini plus tôt dans le code, recherches là et dis moi où

**stof** · 03/12/2008, 16h43

Rien à faire (même si j'avais mal recopié dans mon code précédent), c'est la disparition de la balise <td> qui fait planter :

les 2 syntaxes ci-dessous fonctionnent mais pas celle sans les <td>

Code :

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

1
2
3
4
5
6
7
8
9
10
<tr>
   <td>
      <div id="fillUp1" ></div>
   </td>
</tr>
<tr>
   <td>
      <div id="fillUp2" ></div>
   </td>
</tr>

Code :

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

1
2
3
4
5
6
7
8
<tr>
	<td id="fillUp1" >
	</td>
</tr>
<tr>
	<td id="fillUp2">
	</td>
</tr>

fillUp1 est une variable... elle doit être défini plus tôt dans le code, recherches là et dis moi où

C'est comme une déclaration le <div id="fillUp1" ></div> ci-dessus
C'est ensuite avec ce qu'on y met dans <script> qu'on sait quoi afficher.

**BrItneY** · 03/12/2008, 16h58

Hum... bizarre...

Quand tu définies l'identifiant (ou id) du div égal à fillUp1, tu donnes un nom à l'élément div de ta page html... mais c'est pas pour autant que le javascript le connait... pour lui c'est rien, pas une variable, rien du tout...
Il faut d'abord faire une recherche dans le document (=page html) en recherchant l'élément qui a pour identifiant fillUp1 dans ta page... et le récupérer dans une variable pour pourvoir le manipuler avec le javascript... Il se trouve que là la variable et l'identifiant ont le même nom... du coup on peut s'y méprendre...

C'est ce que j'ai fait dans mon exemple avec le :

Code :

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

var fillUp1 = document.getElementById('fillUp1');

Javascript recherche l'élément qui s'appelle fillUp1 dans mon document, et crée une nouvelle variable (avec var fillUp1 = ) qui correspond à cet élément...

Donc, il doit un avoir autre part un fillUp1 entre tes balises <script></script> (balises qui définissent ici qu'on utilise du javascript...)

Je réfléchis a une autre solution en attendant...

**stof** · 03/12/2008, 17h32

Ben en fait je ne comprend pas tout, mais je suis sûr à 100% qu'on ne trouve aucune occurence du mot fillUp1 ailleurs que dans cette fameuse page htm (je suis débutant dans ces langages mais confirmé en utilisation de la fonction recherche

)

**BrItneY** · 03/12/2008, 17h37

Bon, je suis partit sur quelque chose de différent, à savoir, repartir de ta toute première solution qui était décalée, et de l'adapter...

Comme il y a seulement 2 colonnes dans ton tableau principal (équivaut au tableau de ton fichier HTML), je prends la largeur de la première cellule afin de l'appliquer au tableau inséré (équivaut aux tableaux de tes feuilles xsl)...

Pas parfait du tout, pour ne pas dire enfantin, car soucis si le contenu de la première cellule insérée est plus large que le contenu de la première cellule du tableau principal... Mais si ya que ça on trouveras une solution, promis

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
47
48
49
50
51
52
53
54
55
<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.innerHTML='<table id="tableIn" width="100%"><tr><td>dinnen</td><td>5</td><td>decaf</td><td>yes</td></tr></table>';
	    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";
        }
	}
 
}
 -->
</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">
        <div id="fillUp1"></div>
   </td>
</tr>
<tr>
   <th>name</th>
   <th>cups</th>
   <th>type of coffee</th>
   <th>sugar?</th>
</tr>
</table>
</body>
</html>

Edit -> ok, oublies cette histoire de recherche d'id, on s'en fout

**stof** · 04/12/2008, 09h43

Aïe, aïe, aïe, j'ai beau me gratter la tête, je ne vois plus du tout le rapport avec mon code...

**BrItneY** · 04/12/2008, 10h15

Ok, je la refait, en essayant d'être plus clair

On repart de ton soucis initial, avec le code que tu nous a présenté au tout début...
Tu as un soucis de décalage comme on peut le voir entre ces deux images :

Ça, c'est juste un rappel, c'est le code de ta pop-up :

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 width="100%" height="100%" class="clsDiv">
<tr>
	<td>
		<div id="fillUp1" ></div>
	</td>
</tr>
<tr>
	<td>
		<div id="fillUp2"></div>
	</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>

Grâce a ta fonction javascript, ton xsl, et les données de ton xml, tu insères dans les <div> fillUp1 et fillUp2 du contenu, sous la forme de tableau... du coup, le code final de ta pop-up, reçu par l'utilisateur de ton site, est de cette forme là:

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
47
48
49
50
51
 
<table width="100%" height="100%" class="clsDiv">
<tr>
	<td>
		<div id="fillUp1" >
			<table width="100%">
				<tr height="20px">
					<td class="cTitle">
						Nom:
					</td>
					<td class="level_1">
						<input type="text" id="txtNom" 
 
onchange="checkValid()">
						</input>				
					</td>
				</tr>
			</table>
 
		</div>
	</td>
</tr>
<tr>
	<td>
		<div id="fillUp2">
			<table width="100%">
				<tr height="20px">
					<td class="cTitle">
						Bidule:
					</td>
					<td class="level_1">
						<select id="bidule" onchange="checkValid()">
							<option value="select">
								Select Bidule
							</option>	
						</select>				
					</td>
				</tr>
			</table>
		</div>
	</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>

Ce que je te propose avec ma petite fonction javascript bou(), c'est de faire concorder la largeur entre le première cellule du tableau inclu dans fillUp1, et la largeur entre le première cellule du tableau inclu dans fillUp2 !
Car si la largeur des deux premières cellules sont les même... et bah les secondes cellules auront également la même largeur ! Et hop, plus de soucis de décalage !

C'est ce que fait mon exemple... il insère du contenu (un tableau) dans le <div> nommé fillUp1, puis récupère la largeur de la cellule où se trouve le "t. sexton", et applique cette largeur à la cellule que l'on vient d'insérer qui contient le "dinnen"

Alors, en espérant que je sois assez clair dans mes explications, il faut que tu fasses la même chose... c'est à dire... une fois que le javascript a inséré le contenu de ton xml dans ton tableau principal, il faut que tu prennes la largeur des cellules insérées pour les rendre égales (les faire concorder)

En gros, :

Ton HTML de ta pop-up :

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
47
48
49
50
51
52
53
54
55
56
57
58
59
<html>
<head>
<script>
var XmlDoc1, XmlDoc12;
 
 
function fMyPopupSettings(){
...
arrayXML = window.dialogArguments;
arg1= arrayXML[0];
arg2= arrayXML[1];
...
XmlDoc1 = new ActiveXObject("Msxml2.DOMDocument");
XmlDoc1.loadXML(arg1);
oXslDoc1.load("text?action=getFileText&fileName=partie1_settings.xsl");				
fillUp1.innerHTML =  oXmlDoc1.transformNode(oXslDoc1);
...
XmlDoc2 = new ActiveXObject("Msxml2.DOMDocument");
XmlDoc2.loadXML(arg2);
oXslDoc2.load("text?action=getFileText&fileName=partie2_settings.xsl");				
fillUp2.innerHTML =  oXmlDoc2.transformNode(oXslDoc2);
...
 
	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";
        }
 
}
</script>
</head>
 
<body onload="fMyPopupSettings()">
 
<table width="100%" height="100%" class="clsDiv">
<tr>
	<td>
		<div id="fillUp1" ></div>
	</td>
</tr>
<tr>
	<td>
		<div id="fillUp2"></div>
	</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>
 
</body>
</html>

Feuille 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
17
18
19
20
21
22
23
24
25
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:output encoding="ISO-8859-1" method="html"/>
<xsl:decimal-format grouping-separator = " "/>
 
<xsl:template match="/">
	<table width="100%" id="tableOut">
		<tr height="20px">
			<td class="cTitle">
				Nom:
			</td>
			<td class="level_1">
				<input type="text" id="txtNom" onchange="checkValid()">
					<xsl:attribute name="value">
					 	<xsl:value-of select="line/Name"/>						
					</xsl:attribute>
				</input>				
			</td>
		</tr>
...
...
	</table>
</xsl:template>
</xsl:stylesheet>

Feuille 2 :

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
<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 
<xsl:output encoding="ISO-8859-1" method="html"/>
<xsl:decimal-format grouping-separator = " "/>
 
<xsl:template match="/">
	<table width="100%" id="tableIn">
		<tr height="20px">
			<td class="cTitle">
				Bidule:
			</td>
			<td class="level_1">
				<select id="bidule" onchange="checkValid()">
					<option value="select">
							Select Bidule
					</option>	
				</select>				
			</td>
		</tr>		
	</table>
</xsl:template>
 
</xsl:stylesheet>