Subject: RE: [xsl] Creating javascript dynamically using XSLT From: "Kenny Akridge" <kenny@xxxxxxxxxxxxxxxxx> Date: Wed, 28 Apr 2004 21:23:18 -0400 |
The biggest problem I see is in your "num" template. If you match a num = 1, then you write you var norteimg somevalue and then before that value will ever be finished with a 2 or 3, you start writing you var nortepie somevalue. A push approach with templates is probably the wrong way to go with this IMO. Unfortunately, I think you will have to loop through the nodes twice with a for-each(or, write a painful recursive template to load two variables): once to load the norteimg var and once to load the nortepie var. It also looks like you have your linefeed chars in the wrong position. You would want to linefeed right after the closing ); of the first var. -----Original Message----- From: Pieter Reint Siegers Kort [mailto:pieter.siegers@xxxxxxxxxxx] Sent: Wednesday, April 28, 2004 8:50 PM To: xsl-list@xxxxxxxxxxxxxxxxxxxxxx Subject: [xsl] Creating javascript dynamically using XSLT Hi all, I received a question from a collegue which I cannot answer directly. He basically wants to create two independent javascript lines dynamically depending on the amount of input nodes (in this case, <foto>, see XML source). We have been able sofar to generate one line successfully, but appearently the approach is wrong because when we add a second javascript line, the transformation output is simply concatenated and both lines come out as one concatenated javascript line, obviously not correct. The important part where the javascript lines are created is done in the template <xsl:template match="num">. If we have <xsl:template match="num"> <xsl:if test=". = 1"><xsl:text> </xsl:text>var norteimg = new Array(document.SOURCE.src<xsl:value-of select="."/>.value</xsl:if><xsl:if test=". > 1">,document.SOURCE.src<xsl:value-of select="."/>.value</xsl:if><xsl:if test=". = 3">);</xsl:if> </xsl:template> then the output is ... <script language="JavaScript"><!-- var norteimg = new Array(document.SOURCE.src1.value,document.SOURCE.src2.value,document.SOURCE. src3.value); ... But when we have <xsl:template match="num"> <xsl:if test=". = 1"><xsl:text> </xsl:text>var norteimg = new Array(document.SOURCE.src<xsl:value-of select="."/>.value</xsl:if><xsl:if test=". > 1">,document.SOURCE.src<xsl:value-of select="."/>.value</xsl:if><xsl:if test=". = 3">);</xsl:if> <xsl:if test=". = 1"><xsl:text> </xsl:text>var nortepie = new Array(document.SOURCE.pie<xsl:value-of select="."/>.value</xsl:if><xsl:if test=". > 1">,document.SOURCE.pie<xsl:value-of select="."/>.value</xsl:if><xsl:if test=". = 3">);</xsl:if> </xsl:template> then the output is: ... <script language="JavaScript"><!-- var norteimg = new Array(document.SOURCE.src1.value var nortepie = new Array(document.SOURCE.pie1.value,document.SOURCE.src2.value,document.SOURCE. pie2.value,document.SOURCE.src3.value);,document.SOURCE.pie3.value); ... What we actually want is: ... <script language="JavaScript"><!-- var norteimg = new Array(document.SOURCE.src1.value,document.SOURCE.src2.value,document.SOURCE. src3.value); var nortepie = new Array(document.SOURCE.pie1.value,document.SOURCE.pie2.value,document.SOURCE. pie3.value); ... What approach should we take to be able to generate two separate javascript lines as above indicated? Our XML is: <?xml version="1.0" encoding="utf-8" ?> <evento> <imagenbg>Bgwolf1.gif</imagenbg> <numfotos>16</numfotos> <foto> <nombre>B.P. en fundidora</nombre> <src>bp2004/1.jpg</src> <pie>Listos para comenzar...</pie> <autor>Rafael Salinas</autor> <num>1</num> </foto> <foto> <nombre>B.P. en fundidora</nombre> <src>bp2004/2.jpg</src> <pie>Hubo una gran concurrencia.</pie> <autor>Rafael Salinas</autor> <num>2</num> </foto> <foto> <nombre>B.P. en fundidora</nombre> <src>bp2004/3.jpg</src> <pie>!Piratas aaal ataque !...</pie> <autor>Rafael Salinas</autor> <num>3</num> </foto> </evento> Our XSLT sofar is: <xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"> <xsl:output method="html" indent="yes" omit-xml-declaration="yes"/> <xsl:template match="/evento"> <HTML> <HEAD> <TITLE><xsl:value-of select="evento/titulo" /></TITLE> <link rel="stylesheet" type="text/css" href="g21.css" /> </HEAD> <body background="images/{imagenbg}"> <FORM NAME="SOURCE" METHOD="POST"> <xsl:apply-templates select="foto" /> <INPUT type="hidden" id="numfotos" name="numfotos" value="{numfotos}" /> </FORM> <center> <table width="100%" border="0"><tr><td width="104"><img src="images/logo21.gif" /></td><td align="center"><img src="images/scouts.gif" /></td><td width="78"><img src="images/liz.gif" /></td></tr></table> <BR /> <table width="450" border="0" bordercolor="green"> <TR> <td align="center"> <a href="javascript:cambia2()"><img src="images/anterior.gif" width="29" height="35" border="0" alt="anterior"/></a> </td> <TD align="center"> <IMG SRC="{foto/src}" BORDER="1" HSPACE="0" VSPACE="0" class="borderimg1" name="imgslide" width="350" heigth="250" /> </TD> <td align="center"> <a href="javascript:cambia()"><img src="images/siguiente.gif" width="29" height="35" border="0" alt="siguiente"/></a> </td> </TR> <tr> <td height="5" colspan="3"><img border="0" src="../../../img/pix.gif" width="5" HEIGHT="5" /></td> </tr> <TR> <td valign="top" colspan="3"><!-- PIE DE FOTO --> <FORM NAME="rsm" METHOD="POST" ID="Form1"> <table height="45" width="100%" CELLSPACING="0" CELLPADDING="0" valign="top" ID="Table1" border="0"> <TR> <td valign="top"> <FONT FACE="Arial" SIZE="2" COLOR="#000000" CLASS="Ar11plain1"> <div name="ponpie" id="ponpie"> <xsl:value-of select="foto/pie"/> </div> <I> <div name="ponautor" id="ponautor"> <xsl:value-of select="foto/autor"/> </div> </I></FONT> </td> </TR> </table> </FORM> </td> </TR> </table> </center> <xsl:text> </xsl:text> <script language="JavaScript"> <xsl:comment> <xsl:apply-templates select="foto/num" /> <![CDATA[ var thisPic = 0; var lastPic = document.SOURCE.numfotos.value; function quitaespacios(string) { var temp = ""; cadena = '' + string; quita = cadena.split(" "); for(i = 0; i < cadena .length; i++) temp += quita [i]; return temp; } function cambia() { var autor; if (document.images) { if (thisPic==lastPic) {thisPic=0;} else {thisPic++;} document.imgslide.src=norteimg[thisPic];//cambias el src de la imagen document.all("ponpie").innerHTML=nortepie[thisPic]; autor = quitaespacios(norteautor[thisPic]) if (autor != "") { document.all("ponautor").innerHTML="Foto: "+norteautor[thisPic]; } else document.all("ponautor").innerHTML="<img border='0' src='../../../img/pix.gif' width='1' heigth='1'>"; } } function cambia2() { var autor; if (document.images) { if (thisPic==0) {thisPic=lastPic;} else {thisPic=thisPic-1;} document.imgslide.src=norteimg[thisPic]; document.all("ponpie").innerHTML=nortepie[thisPic]; autor = quitaespacios(norteautor[thisPic]) if (autor != "") { document.all("ponautor").innerHTML="Foto: "+norteautor[thisPic]; } else document.all("ponautor").innerHTML="<img border='0' src='../../../img/pix.gif' width='1' heigth='1' />"; } } ]]> </xsl:comment> </script> </body> </HTML> </xsl:template> <xsl:template match="num"> <xsl:if test=". = 1"><xsl:text> </xsl:text>var norteimg = new Array(document.SOURCE.src<xsl:value-of select="."/>.value</xsl:if><xsl:if test=". > 1">,document.SOURCE.src<xsl:value-of select="."/>.value</xsl:if><xsl:if test=". = 3">);</xsl:if> <xsl:if test=". = 1"><xsl:text> </xsl:text>var nortepie = new Array(document.SOURCE.pie<xsl:value-of select="."/>.value</xsl:if><xsl:if test=". > 1">,document.SOURCE.pie<xsl:value-of select="."/>.value</xsl:if><xsl:if test=". = 3">);</xsl:if> </xsl:template> <xsl:template match="foto"> <INPUT type="hidden" id="src{num}" name="src{num}" value="{src}" /> <INPUT type="hidden" id="pie{num}" name="pie{num}" value="{pie}" /> <INPUT type="hidden" id="autor{num}" name="autor{num}" value="{autor}" /> </xsl:template> </xsl:transform> We hope somebody can help us out. <prs/> http://www.pietsieg.com <http://www.pietsieg.com/> http://www.pietsieg.com/dotnetnuke Contributor on www.ASPToday.com <http://www.asptoday.com/> Co-author on "Professional ASP.NET XML with C#", July 2002 by Wrox Press
Current Thread |
---|
|
<- Previous | Index | Next -> |
---|---|---|
[xsl] Creating javascript dynamical, Pieter Reint Siegers | Thread | Re: [xsl] Creating javascript dynam, Robert Koberg |
[xsl] Creating javascript dynamical, Pieter Reint Siegers | Date | Re: [xsl] Creating javascript dynam, Robert Koberg |
Month |