[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>&#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


Current Thread
Keywords