CODEWITHSUNDEEP
javascriptjqueryxmlxslt
Jonathan
Jonathan

Reputation: 11321

Problems mixing javascript and jquery with XSL transformations, or something with function parameters?

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>

Upvotes: 0

Views: 1021

Answers (1)

hobberwickey
hobberwickey

Reputation: 6414

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.

Upvotes: 2

Related Questions