Я пытаюсь, чтобы навигационные кнопки на моей странице загружали файлы содержимого, но некоторые из этих файлов являются XML и должны быть стилизованы с помощью преобразований XSL.Я имел успех в прошлом, используя код XSL On Client от w3schools.com, поэтому я адаптировал его ниже.Однако, похоже, что-то не работает с моим сочетанием javascript и jquery, или, может быть, я неправильно передаю параметры?Firebug говорит мне, что не может загрузить переменную 'xsl'.Что-то выглядит не так с этим синтаксисом?Я очень новичок в этом и не могу понять, что я делаю неправильно.
<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>