{"id":141,"date":"2007-02-18T19:19:21","date_gmt":"2007-02-19T00:19:21","guid":{"rendered":"\/cgi\/wp\/?p=141"},"modified":"2019-12-11T08:30:52","modified_gmt":"2019-12-11T13:30:52","slug":"using-javascript-within-xsl","status":"publish","type":"post","link":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/?p=141","title":{"rendered":"Using JavaScript Within XSL"},"content":{"rendered":"

I have upgraded to Visual Studio 2005 Professional<\/strong> and I now have the XML menu with the Show XSLT Output<\/em> and Debug XSLT<\/em> submenu items. Unfortunately,\u00a0it does not appear to work. I get an error. I searched on the Internet and only found one forum thread about this error so apparently not many developers are trying to debug XSLT. I think this is a clue that not many developers are doing anything complicated with XSL. I’m also not finding much discussion about web parts. XSL can get quite complicated and I think developers really need better tools to work with it. While working with the YouTube<\/strong> API yesterday I ran into three more problems that required solutions. First, I had to construct a link using an XML element in the URL. Second, I had to format a number to use commas to show thousands. And third I needed to convert seconds into minutes. That proved to be the most complicated problem of all.<\/p>\n

For the first problem involving the link, I found the solution was to use curly braces to create an attribute value template which allows you to assign a value to an attribute in the output using an expression, rather than a fixed value:<\/p>\n

A link with link text.<\/p>\n

<<\/font>xsl:if<\/font> test=\"position() mod 2 = 1\"><\/font>
\n<<\/font>tr<\/font> bgcolor=\"#EFF3FB\"><\/font>
\n<<\/font>td<\/font> valign=\"top\">
\n<<\/font>b<\/font>><\/font>From: b<\/font>><\/font>
\n<<\/font>a<\/font> href=\"http:\/\/www.youtube.com\/user\/{author}<\/span>\">
\n<<\/font>xsl:value-of<\/font> select=\"author\"\/><\/font>
\n<\/<\/code><\/font>a<\/font>>
\n<<\/font>b<\/font>><\/font> Views: b<\/font>><\/font>
\n<<\/font>xsl:value-of<\/font> select=”format-number(view_count, ‘###,####,###’)<\/span>“\/>
\n<\/<\/code><\/font>td<\/font>>
\n<\/<\/code><\/font>tr<\/font>>
\n<\/<\/code><\/font>xsl:if<\/font>><\/font> <\/font><\/font><\/code> <\/p>\n

An image link.<\/font><\/p>\n

<<\/font>td<\/font> width=\"150\" rowspan=\"5\" valign=\"top\">
\n<<\/span><\/font>a<\/font> href=\"{url}\"><\/font><\/span>
\n<<\/font>img<\/font>>
\n<<\/font>xsl:attribute<\/font> name=\"src\">
\n<<\/font>xsl:value-of<\/font> select=\"thumbnail_url\" \/>
\n<\/<\/code><\/font>xsl:attribute<\/font>>
\n<\/<\/code><\/font>img<\/font>>
\n<\/<\/code><\/font>a<\/font>>
\n<\/<\/code><\/font>td<\/font>><\/font><\/font><\/code><\/p>\n

The solution to the second problem I had formatting numbers can be found in the code above. You just use the format-number XSLT Function. This will format numbers into thousands with commas. Some videos have millions of views so this was necessary for the view count.<\/font>The third problem I ran into was due to the YouTube API returning the running time of a video entirely in seconds. However, on the YouTube web site you can see they show the running time in minutes and seconds. Therefore I needed to convert seconds into minutes. Unfortunately, there\u00a0is no built-in XSLT Function capable of doing time conversions. I did find some JavaScript capable of converting seconds into minutes so I began my quest to use JavaScript within my XSL file. After trying two methods that did not work I finally managed to come up with this code:<\/p>\n

1.<\/strong> Declare a namespace for your methods in the \u00a0element<\/p>\n

<\/font><<\/font>?xml<\/font> version=\"1.0\" encoding=\"utf-8\" ?><\/font>
\n<<\/font>xsl:stylesheet<\/font> version=\"1.0\" xmlns:xsl=\"http:\/\/www.w3.org\/1999\/XSL\/Transform\" xmlns:msxsl=\"urn:schemas-microsoft-com:xslt\" xmlns:extension=\"http:\/\/extensionnamespace\"<\/span>><\/font><\/code><\/p>\n

2.<\/strong> Call the JavaScript function in a xsl:value-of select element and pass it a XSL variable. the XSL variable is given the value of a XML element and referenced using a $ sign.<\/font><\/p>\n

<<\/font>xsl:if<\/font> test=\"length_seconds != ''\">
\n<<\/font>xsl:if<\/font> test=\"position() mod 2 = 1\">
\n<<\/font>tr<\/font> bgcolor=\"#EFF3FB\">
\n<<\/font>td<\/font> valign=\"top\">
\n<<\/font>xsl:variable<\/font> name=\"pos\">
\n<<\/font>xsl:value-of<\/font> select=\"length_seconds\"\/>
\n<\/<\/code><\/font>xsl:variable<\/font>>
\n<<\/font>xsl:value-of<\/font> select=”extension:secs2mins($pos)<\/span>“\/>
\n<\/<\/code><\/font>td<\/font>><\/font>
\n<\/<\/code><\/font>tr<\/font>>
\n<\/<\/code><\/font>xsl:if<\/font>><\/font><\/code><\/p>\n

3.<\/strong> Enclose the JavaScript in CDATA tags<\/font><\/p>\n

<<\/font>msxsl:script<\/font> language=\"JScript\" implements-prefix=\"extension\"<\/span>>
\n[CDATA[<\/font>
\nfunction secs2mins(s) {
\nvar mn = Math.floor((s%3600)\/60);
\nvar sec = round2(s%60);
\nreturn mn + ':' + sec;
\n}
\nfunction round2(myNumber) {
\nreturn Math.floor(Math.round(myNumber * 100)) \/ 100
\n}
\n]]><\/font>
\n<\/<\/code><\/font>msxsl:script<\/font>><\/font> <\/font><\/code><\/p>\n

<\/font><\/font><\/p>\n","protected":false},"excerpt":{"rendered":"

I have upgraded to Visual Studio 2005 Professional and I now have the XML menu with the Show XSLT Output and Debug XSLT submenu items. Unfortunately,\u00a0it does not appear to work. I get an error. I searched on the Internet … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts\/141"}],"collection":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=141"}],"version-history":[{"count":1,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts\/141\/revisions"}],"predecessor-version":[{"id":3419,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=\/wp\/v2\/posts\/141\/revisions\/3419"}],"wp:attachment":[{"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=141"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/williamsportwebdeveloper.com\/cgi\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}