RE: [xsl] Creating javascript dynamically using XSLT

["Kenny Akridge" <kenny@xxxxxxxxxxxxxxxxx>]

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>&#10;</xsl:text>var norteimg = new
Array(document.SOURCE.src<xsl:value-of select="."/>.value</xsl:if><xsl:if
test=". &gt;  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>&#10;</xsl:text>var norteimg = new
Array(document.SOURCE.src<xsl:value-of select="."/>.value</xsl:if><xsl:if
test=". &gt;  1">,document.SOURCE.src<xsl:value-of
select="."/>.value</xsl:if><xsl:if test=". = 3">);</xsl:if>  <xsl:if test=".
= 1"><xsl:text>&#10;</xsl:text>var nortepie = new
Array(document.SOURCE.pie<xsl:value-of select="."/>.value</xsl:if><xsl:if
test=". &gt;  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>&#10;</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>&#10;</xsl:text>var norteimg = new
Array(document.SOURCE.src<xsl:value-of select="."/>.value</xsl:if><xsl:if
test=". &gt;  1">,document.SOURCE.src<xsl:value-of
select="."/>.value</xsl:if><xsl:if test=". = 3">);</xsl:if>  <xsl:if test=".
= 1"><xsl:text>&#10;</xsl:text>var nortepie = new
Array(document.SOURCE.pie<xsl:value-of select="."/>.value</xsl:if><xsl:if
test=". &gt;  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