[XSL-LIST Mailing List Archive Home]
[By Thread]
[By Date]
[xsl] Creating javascript dynamically using XSLT
Subject: [xsl] Creating javascript dynamically using XSLT From: Pieter Reint Siegers Kort <pieter.siegers@xxxxxxxxxxx> Date: Wed, 28 Apr 2004 19:50:00 -0500 |
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 -> |
---|---|---|
RE: [xsl] Xsl not able to Pick XML , Pieter Reint Siegers | Thread | RE: [xsl] Creating javascript dynam, Kenny Akridge |
RE: [xsl] Xsl not able to Pick XML , Pieter Reint Siegers | Date | RE: [xsl] Creating javascript dynam, Kenny Akridge |
Month |