Home/ Questions/Q 6935809
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T12:09:06+00:00

I’m trying to have navigation buttons on my page load content files, but a

  • 0

I’m trying to have navigation buttons on my page load content files, but a couple of these files are XML and need to be styled with XSL transformations. I’ve had success in the past using the XSL On the Client code from w3schools.com, so I’ve adapted that below. However, something doesn’t appear to be working with my mix of javascript and jquery, or maybe I’m not passing the parameters correctly? Firebug tells me that it cannot load the ‘xsl’ variable. Does anything look wrong with this syntax? I’m very new at this and can’t quite figure out what I’m doing wrong. 

<script>
$(document).ready(function(){
    $("#aboutTextButton").click(function(){
        $('#contentContainer').load('about-text.html');
    });
    $("#aboutProjectButton").click(function(){
        $('#contentContainer').load('about-project.html');
    });
    $("#catalogButton").click(function(){
        displayResult("catalog.xml","xml-style2.xsl");
    });
    $("#transcriptionButton").click(function(){
        displayResult("behaviour.xml","xml-style2.xsl");
    });
}); 

//script to transform XML, adapted from w3schools.com 
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send("");
return xhttp.responseXML;
}

function displayResult(xml, xsl)
{
// code for IE
if (window.ActiveXObject)
  {
  ex=xml.transformNode(xsl);
  document.getElementById("example").innerHTML=ex;
  }
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
  {
  xsltProcessor=new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml,document);
  document.getElementById("contentContainer").appendChild(resultDocument);
  }
} 
</script>
</head>

<body>

    <div id="headerImg">
        <img src="cover.jpg">
    </div>

    <div id="menu">
        <ul>
            <li><a id="aboutTextButton">About the Text</a></li>
            <li><a id="aboutProjectButton">About the Project</a></li>
            <li><a id="catalogButton">Browse the Images</a></li>
            <li><a id="transcriptionButton">Read the Text</a></li>
        </ul>
    </div>

    <div id="contentContainer">
    </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You never call loadXMLDoc so the displayResults function isn’t processing a xml doc it’s processing the the file name that you pass the function. The first lines of displayResult should be:

    xml = loadXMLDoc(xml);
xsl = loadXMLDoc(xsl);

    Then your code should work.

    • 0