javascript 'for' loop in xslt

mummra1 · December 27th, 2006, 11:59 AM

Hello all,
I'm fairly new to xslt, and trying to integrate some javascript into my stylesheet. I've succeeded with some basic js code but I was trying to do something like:

Code:

<script language = 'javascript'>
for (i = 0; i <tabRow.childNodes.length;i++) {
var tab = tabRow.childNodes[i];
//do something with chidNodes here
}//end for loop

</script>

...in order to control some mouseover functionality with buttons. However, when I declare the 'i' variable, I get an error message 'invalid element name in file' in my error log. How can I get xslt to understand this javascript loop? Thanks!

joefawcett · December 27th, 2006, 03:45 PM

Thre's nothing wrong with your JavaScript, it's that <tabRow etc. looks like an element. You need to put the script into a CDATA section so that the parser treats it as a string of characters and doesn't try to interpret it as XML.

--

Joe (Microsoft MVP - XML)

mhkay · December 27th, 2006, 04:20 PM

I don't know what this error message means, however, your question:

>How can I get xslt to understand this javascript loop?

suggests you are confused about the relationship of the XSLT and the Javascript. The XSLT stylesheet transforms an XML document into an HTML document. The XSLT has no understanding at all of the meaning of the tags in the HTML document you are generating; it doesn't know that <script> elements contain Javascript, for example. You are simply generating an HTML page that contains some Javascript, and as far as XSLT is concerned it could be anything.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

mummra1 · December 27th, 2006, 04:49 PM

Michael and Joe,
I was confused why I'm getting the error in the first place. I'm using a straightforward:

Code:

<script language = 'JavaScript1.2'>

<xsl:comment>
<xsl:call-template name = "javascript"/>

</xsl:comment>

</script>

...and then

Code:

<xsl:template name = "javascript">
<xsl:text>

//javascript here

</xsl:text>
</xsl:template>

So I'm not really sure why it's tripping up. I can do something like:

Code:

var total = tabRow.childNodes.length;
document.write(total);

...and it works, but if I try something like

Code:

var i;
for (i = 0;i < total; i++){

//add some rollover functionality
}

...I get an error message on the same line as the 'i' variable is on in my xsl file. I know it doesn't make sense but this is what is happening...thanks for the input :)

notarysojac · January 3rd, 2007, 07:09 PM

Quote:

quote:Originally posted by mhkay
...you are confused about the relationship of the XSLT and the Javascript...

Mr. Kay - I have purchased two of your books and am also aware of the CDATA requirement in order to include Javascript in an XSL stylesheet.

I have whittled this problem down to the fact that the 'for(...)' construct is the problem. I have reversed the logic and eliminated the '<' character altogether. Still - if there is a for-loop in my code - all of the Javascript in the XSL file is rendered non-functional. No for-loop = all works perfectly. Same goes for a while-loop.

If the code is included in a standard HTML file, it all works without a problem. Somehow or other, the Javascript output within the CDATA declaration gets munged if there is a for-loop in there.

Can you suggest anything? Thanks VERY much!

mhkay · January 3rd, 2007, 07:19 PM

Please try to be a bit more methodical in your postings. Show an example of input that works and of input that doesn't work. Don't say that something "is rendered non-functional", say what the symptoms are (precisely). Show the actual code of your transformation and its input and output.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

mummra1 · January 3rd, 2007, 11:42 PM

Hi notarysojac,
Thanks for checking that out. I'm glad that someone else could reproduce the error b/c I had kind of been pulling my hair out about that one.

mummra

joefawcett · January 4th, 2007, 02:06 AM

Just show the actual HTML output by your XSLT and the HTML you wish to be output. Then we can see whether it's an XSLT or, as I suspect, an HTML/Script problem. Trying to debug a few lines of script in isolation is impossible, where for instance is tabRow defined? Using script type="text/javascript" instead of language might be another option.

--

Joe (Microsoft MVP - XML)

mummra1 · January 4th, 2007, 10:56 AM

All,
Here is the html output by my xsl stylesheet:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script language="JavaScript1.2"><!--
function sortReport() {

    var header2 = document.getElementById("subHead");
    var reportType = header2.innerHTML;




    switch(reportType) {

    case 'rowCount':

    newHeader2 = "Row Count grouped by filename";
    header2.innerHTML = newHeader2;
    header2.style.color = "#536739";



    break;




    case 'attName':
    newHeader2 = "Attribute Name Report";
    header2.innerHTML = newHeader2;
    header2.style.color = "#536739";
    break;

    case 'semType':
    newHeader2 = "Semantic Type Report";
    header2.innerHTML = newHeader2;
    header2.style.color = "#536739";
    break;

    case 'ttyCount':
    newHeader2 = "Term Type Count";
    header2.innerHTML = newHeader2;
    header2.style.color = "#536739";
    break;


    case 'lexCount':
    newHeader2 = "String and Lexical Counts";
    header2.innerHTML = newHeader2;
    header2.style.color = "#536739";
    break;



    default: document.write("blah");

    }//end switch






}//end function sortReport

function buttonColors() {


var tabRow = document.getElementById("subMenu");
var total = tabRow.childNodes.length;

document.write(total);



}



--></script><style type="text/css"><!--



--></style>
<title>Stat reports</title>
</head>
<body onload="sortReport()">
<div id="mastHead">

</div>
<h1 id="mainHeader">MSH stat report
</h1>
<h2 id="subHead">rowCount</h2>

<div id="subMenu" onmouseover="buttonColors()">
<div class="reportTab"><a href="attName.html">Attribute Name Report</a></div>
<div class="reportTab"><a href="rowCount.html">Concept Count</a></div>
<div class="reportTab"><a href="ttyCount.html">Term Type Count</a></div>
<div class="reportTab"><a href="semType.html">Semantic Type Count</a></div>
<div class="reportTab"><a href="lexCount.html">Lexical String Count</a></div>
</div>
<div id="contentArea">
Content here
</div>
</body>
</html>

...the javascript function 'buttonColors' is called when the user tabs over the submenu (div id = 'subMenu'). However, when I add the 'for' loop to the javascript in the xsl file, which would be :

Code:

function buttonColors(){
     if (document.getElementById("subMenu")) {
   var tabRow = document.getElementById("subMenu");
   for (i = 0; i <tabRow.childNodes.length;i++) {
          var tab = tabRow.childNodes[i];

            tab.onmouseover = function() {
              this.style.backgroundColor = "#f9ef7d";
              var tabbed = true;
              this.onmouseout = function(){
              this.style.backgroundColor = "#7d4833";

              }
                        }    


     }//end for loop

   }//endif
 
 
} //end function

...I can't output any html at all, so I can't really show you faulty output, b/c the transformation doesn't take place when the 'for' loop is added to the javascript. (the buttonColors function works perfectly well in my other pages,btw). Thanks again!

mhkay · January 4th, 2007, 12:14 PM

Remember that in XML, a less-than character must always be written as <. I don't know if that's your problem because you indicated that you had ruled that out, but it seems quite likely.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference