Hi, I wonder if any of you could help me? Apologies in advance for the length of this post but felt the background to it was relevant to help explain why (on the face of it) I am probably trying to implement XSL/XML in a crasy way!
Anyway I am having trouble running an XSL transformation in the browser (firefox and IE). I have only been working with XSL/XML for about 2 weeks and have muddled through this far adapting exampleâs from various web sites.
I have been asked to code some evaluation questionnaires on a weeks worth of learning materials that are hosted inside our Virtual Learning Environment (WebCT). The xml data that makes up the questionnaires will eventually come from a âremoteâ (cross domain) source. I know this is a difficult thing to do so in this first instance I am trying to get it working on static xml in the same domain as the xsl.
Here is my XML:
http://unthank.nottingham.ac.uk/gemtest_forjon.xml
Here is my XSL:
http://unthank.nottingham.ac.uk/gem.xsl
I haven't listed the xml/xsl here as they are huge and they run OK.
Here is the page which runs the transformation in IE only:
http://unthank.nottingham.ac.uk/I_combine.htm
Code:
<html>
<body>
<script type="text/javascript">
// Load XML
var xml = new ActiveXObject("Microsoft.XMLDOM")
xml.async = false
xml.load("gemtest_forjon.xml")
// Load XSL
var xsl = new ActiveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("gem.xsl")
// Transform
document.write(xml.transformNode(xsl))
</script>
</body>
</html>
I know that you should simply add:
Code:
<?xml-stylesheet type="text/xsl" href="gem.xsl"?>
to the xml to 'link' it to the xsl. I don't want to do this because eventually the same xml source will generate a calendar (as well as this questionaire).
I know that the above example only works in IE because I am using an Microsoft ActiveXObject to do the transform.
I find this example which runs the transformation in firefox:
http://developer.mozilla.org/en/docs...:Basic_Example and implement it here:
http://unthank.nottingham.ac.uk/I_combine2.htm
I now have two separate pages one which runs the browser transformation in IE (I_combine.htm) and one in firefox (I_combine_2.htm)
I also find this example:
http://www.w3schools.com/xml/xml_http.asp which cleverly gets collects the xml using XMLHttpRequest() for firefox or Microsoft.XMLHTTP for IE and displays it to the screen. I notice similarities in the way it gets the data and set to work amending this script so it will use the correct xmlhttp⦠to get both my xml and xsl and then run the correct browser transformation.
My result is here:
Code:
<html>
<head>
<script type="text/javascript">
var xmlhttp
var xslhttp
function loadXMLDoc(xml_url,xsl_url)
{
xmlhttp=null
xslhttp=null
// code for Mozilla, etc.
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest()
xslhttp=new XMLHttpRequest()
}
// code for IE
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
xslhttp=new ActiveXObject("Microsoft.XMLHTTP")
}
if (xmlhttp!=null && xslhttp!=null)
{
xmlhttp.onreadystatechange=state_Change
xslhttp.open("GET",xsl_url,true)
xslhttp.send(null)
xmlhttp.open("GET",xml_url,true)
xmlhttp.send(null)
}
else
{
alert("xmlhttp or xslhttp is not equal to null")
}
}
function state_Change()
{
// if xmlhttp and xslhttp shows "loaded"
if (xmlhttp.readyState==4 && xslhttp.readyState==4)
{
// if the data is OK
if (xmlhttp.status==200 && xslhttp.status==200)
{
// Run the function which runs the transformation
the_transform(xmlhttp.responseText,xslhttp.responseText);
}
else
{
alert("Problem retrieving the data")
}
}
}
function the_transform(xml_txt,xsl_txt) {
alert("Got the Data. Sitting in the transformation function")
document.write ("<p>Here is the xsl:</p><P>"+xsl_txt+"</p>");
document.write ("<p>Here is the xml:</p><P>"+xml_txt+"</p>");
// code for Mozilla, etc.
if (window.XMLHttpRequest)
{
var xslStylesheet;
var xsltProcessor = new XSLTProcessor();
var myDOM;
var xmlDoc;
xslStylesheet = xsl_txt;
xsltProcessor.importStylesheet(xslStylesheet);
xmlDoc = xml_txt;
var fragment = xsltProcessor.transformToFragment(xmlDoc, document);
document.getElementById("the_output").innerHTML = "";
myDOM = fragment;
document.getElementById("the_output").appendChild(fragment);
}
// code for IE
else if (window.ActiveXObject)
{
document.getElementById('the_output').innerHTML=(xml_txt.transformNode(xsl_txt))
}
}
</script>
</head>
<body onload="loadXMLDoc('gemtest_forjon.xml','gem.xsl')">
<span id="the_output"></span>
</body>
</html>
You will see from my live example that it collects both the xml and xsl regardless of browser. However it just wonât run the transformation.
IE throws javascript error:
âObject doesnât support this property or methodâ on line:
Code:
document.getElementById('the_output').innerHTML=(xml_txt.transformNode(xsl_txt))
Firefox throws javascript error:
Can anyone help me or even point me in the direction of some code that will run a client side transformation using a local xsl and a remote xml in both firefox and IE.
Just FYI. I cannot use any server side processing or install any component on the Virtual Learning environment server. Everything has to be done client side.
I realise that I have wandered significantly off XML onto Ajax and Javascript put would post here first.
I also know that firefox has inbuilt security that will prohibit me getting remote stuff via xmlhttp (
http://www.captain.at/howto-ajax-per...ttprequest.php) but I will cross that bridge later!
Feel free to ask any questions this is my main focus at the mo and I will check back regularly. Many Thanks for reading and in advance of your help.
Browser transform using local XSL and remote XML
