Modifying XML element using Javascript (in XSLT stylesheet)

Question

Using XML markup, I have marked certain features in a piece of poetry (Dante's Divine Comedy). When the reader reads the poem, I want to be able to provide him/her with buttons to show or hide (via a predetermined format change) whichever features she/he wants to.

So, I'm trying to write a function in my XSLT stylesheet that finds all the instances of whichever XML element and modifies the formatting of the contents.

I've done a lot of reading/research and I think I understand that I need a loop that finds all the instances and modifies them, as so:

 <script type="text/javascript">
            function displayal() {
                var elems = document.getElementsByTagName('al');
                for(var i = 0; i &lt; elems.length; i++) {
                    elems[i].style.color = 'blue';
                }
            }                                               
 </script>

FYI, 'al' is the name of the tag I have for alliteration. In theory, the above turns all text found in the 'al' tag blue.

Although the above may be incorrect (and correction certainly appreciated), I believe I have a more basic problem: I simply don't know how to tell the function I'm putting in my XSLT stylesheet to look in the XML document! The only examples I've been able to find that I can make sense of are ones where the element being modified is in the same html document.

If it helps, here is part of my xml file:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="../para3.xsl"?>

<canto id="3">
    <title> Paradiso 3 </title>
    <ter id="1">
        <l1>Quel sol che pria d'amor mi scaldò 'l petto,</l1>
        <l2>di bella verità m'avea scoverto,</l2>
        <l3><rp>provando e riprovando</rp>, il dolce aspetto;</l3>
    </ter>
    <ter id="2">
        <l1>e io, per <al>confessar corretto e certo</al></l1>
        <l2>me stesso, tanto quanto si convenne</l2>
        <l3>leva' il capo a proferer più erto;</l3>
    </ter>
    <ter id="3">   
        <l1>ma visïone apparve che ritenne</l1>
        <l2>a sé me tanto stretto, per vedersi,</l2>
        <l3>che di mia confession non mi sovvenne.</l3>
    </ter>
    [....]
    <cog> ... </cog>

and here is the gist of the xsl file:

<?xml version="1.0" encoding="UTF-8"?>
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:xs="http://www.w3.org/2001/XMLSchema"
        exclude-result-prefixes="xs"
        version="2.0">
<xsl:template match="/">
<html>
    <head>
      <title><xsl:value-of select="canto/title"/></title>
    </head>
    <body>
      <script type="text/javascript">
         function displayal()
            var elems = document.getElementsByTagName('al');
            for(var i = 0; i &lt; elems.length; i++) {
            elems[i].style.color = 'blue';
         }                                               
       </script>   
       <div id="container" style="width:800px;background-color:#FFD700">
       <div id="header" style="background-color:#FFA500;height:100px;">
       <h1 style="margin-bottom:10;">Code and Poetry</h1></div>

       <div id="menu" style="width:200px;float:left;">
       <p>Display Options</p>
         <button onclick="displayil()">Show Alliteration</button>
         <button onclick="undisplayil()">Hide Alliteration</button>
       </div>
       <div id="content" style="background-color:#EEEEEE;width:600px;float:left;">
           <h2><i><xsl:value-of select="canto/title"/></i></h2>
           <xsl:apply-templates select="canto/ter"/>
           <xsl:apply-templates select="canto/cog"/>                       
       </div>

If you have made it this far, bravo. And thanks!

ajm475du · Accepted Answer · 2014-04-13 01:41:59Z

1

You should understand the data flow carefully here. The inputs to the XSL transformation are the XML and XSL stylesheet. The output is HTML including the script element. An HTML browser displays the HTML and waits for user interface events that it will deliver to HTML elements.

You will want to arrange that when the HTML browser notifies one of your HTML elements of some event (your choice), your element will have a handler for that event. Perhaps you will place an onclick handler by adding an onclick attribute to an HTML button input element. Perhaps instead you will simply attach the onclick handler to a span element or div element that holds the text or graphic that represents your clickable area. The onclick handler will specify a JavaScript function to call, such as your function displayal.

Your function displayal will need to act upon elements of the HTML, not the XML in the element canto. So you will want to use not getElementsByTagName('al'), but rather some function that gets hold of whatever HTML elements are produced by your XSL templates such as canto/ter. If those will be HTML unordered list ul elements, then you'll use getElementsByTagName('ul').

By the way, I have suggested an edit to correct the use of braces in the function displayal.

edited Apr 13, 2014 at 1:41

answered Apr 13, 2014 at 1:34

ajm475du

3711 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3528000 Over a year ago

Thank you very much. I (clearly) had no idea that the JS was working on HTML and not the XML itself! I was able to get my button to work by using the initial xsl:template transformation to insert a tag called 'al': <xsl:template match="al"> <al><xsl:apply-templates /></al> </xsl:template> I must say it that this seems that I'm 'inventing' html--I had the idea (from nowhere, really) that you could only put in pre-existing tags like <i> or <style> or whatever. But my grasp of all this stuff is pretty tenuous.

Collectives™ on Stack Overflow

Modifying XML element using Javascript (in XSLT stylesheet)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related