Jump to content

XSL - transformations with js

mloseke

By mloseke
in JavaScript

 Share

Recommended Posts

mloseke Newbie

mloseke

Posted
Posted

The code below is given on the w3 site as an example of how to use javascript to apply a client side transformation using IE. How is this accomplished with FF/Mozilla browsers?

<html><body><script type="text/javascript">// Load XMLvar xml = new ActiveXObject("Microsoft.XMLDOM")xml.async = falsexml.load("cdcatalog.xml")// Load XSLvar xsl = new ActiveXObject("Microsoft.XMLDOM")xsl.async = falsexsl.load("cdcatalog.xsl")// Transformdocument.write(xml.transformNode(xsl))</script></body></html>

I have searched the mozilla site for help as well and came up with this url: http://www.mozilla.org/projects/xslt/js-interface.html but I can't tell if it's doing the same thing

Link to comment
Share on other sites
hacknsack Member

hacknsack

Posted
Posted

Please don't try this at home....What I mean is, I've just started studying XML and XSLT so anything in this post should be taken "as just that". In my searching, the IE flavor of the code seems pretty universal, surprised that I could only find one source of a working version for Mozillaharriot's postAll the source files came from:W3 Try It Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>  <title>First XML Data Import</title><script type="text/javascript">var sourceXML = 'cdList.xml';var sourceXSL = 'cdStyle.xsl';var xmlhttpXML, xmlhttpXSL, loadedStyle, loadedXML;function getIEXML(){  var writeObj = document.getElementById('xmlData');  // Load XML  var xml = new ActiveXObject("Microsoft.XMLDOM");  xml.async = false;  xml.load(sourceXML);  // Load the XSL  var xsl = new ActiveXObject("Microsoft.XMLDOM");  xsl.async = false  xsl.load(sourceXSL);  // Transform  writeObj.innerHTML = xml.transformNode(xsl);}    function startMozXML(){   // Load the XSL  xmlhttpXSL = new XMLHttpRequest();  xmlhttpXSL.open("GET", sourceXSL, false);  xmlhttpXSL.send(null);  loadedStyle =  xmlhttpXSL.responseXML;   // Load the XML  xmlhttpXML = new XMLHttpRequest();  xmlhttpXML.open("GET", sourceXML, false);  xmlhttpXML.send(null);  var xmlDoc = xmlhttpXML.responseXML;    // Transform and display  var writeObj = document.getElementById('xmlData');  var xsltProcessor = new XSLTProcessor();  var xmls = new XMLSerializer();  xsltProcessor.importStylesheet(loadedStyle);  var xmlDoc = xsltProcessor.transformToDocument(xmlhttpXML.responseXML);  writeObj.innerHTML = xmls.serializeToString(xmlDoc); }function init(){   //  Test Browser's Support  if(window.ActiveXObject){    getIEXML();    }  else if(window.XMLHttpRequest && window.XSLTProcessor){    startMozXML();    }  else {    document.getElementById('xmlData'). innerHTML = 'No Support In This Browser..'  }}window.onload = init;</script></head><body><div id="xmlData">Please Wait...</div></body></html>

Tested in NN8, FF and IE6. :)(Edit: First testing locally, worked fine in all, later testing from server Mozilla fails)(Did find a good article Understanding XML.)(Edit 2: Fixed, I had no mime type set up in my Apache config)If nothing else maybe a start on "search terms".Good Luck,(Edit 3 (by Jonas): Changed 

 to [CODEBOX])
Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

@hacknsack thank you! This script is something I was looking for as well. This will allow me(and not only me of ofcourse :) ) to insert XSLTs in fragments of my XHTMLs instead of having a whole page in XSLT only. I mean... the example at w3schools didn't worked properly with IE nor Firefox with me. But this one works with both of them.There's only one thing bugging me. Opera doesn't support XSLT. So, isn't there a way for the JavaScript to process the XSLT and return the raw XHTML that will be resulted? Or is this only possible through server side scripting?

Link to comment
Share on other sites
hacknsack Member

hacknsack

Posted
Posted

boen_robot,Glad you posted because I need your expertise in solving the riddle:Why does the page work fine for me locally, but if I fire up Apache and use it as localhost -or- if I upload the files to a server Mozilla kicks up an error.Is there something wrong with the format of the xsl, is it the use of "transformToDocument()" .If the page is working well for your applications could you create a small zip file that I could study, I would appreciate it.The question about Opera, in my testing I've noticed that you can also grab the contentsof the files using responseText, would it be possible to write those to an iframe?I would appreciate your help with optimizing this.

Link to comment
Share on other sites
Jonas Devoted Member

Jonas

Posted
Posted
@hacknsack thank you! This script is something I was looking for as well. This will allow me(and not only me of ofcourse :( ) to insert XSLTs in fragments of my XHTMLs instead of having a whole page in XSLT only. I mean... the example at w3schools didn't worked properly with IE nor Firefox with me. But this one works with both of them.There's only one thing bugging me. Opera doesn't support XSLT. So, isn't there a way for the JavaScript to process the XSLT and return the raw XHTML that will be resulted? Or is this only possible through server side scripting?

Opera 9.0 will have xslt and xpath support... :)http://snapshot.opera.com/windows/w90p1.html--> Scripting:)
Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

@hacknsackI have no idea how Mozilla browsers or servers work. The ones I test my pages with are only IE6, FireFox 1.5, Opera 8 and from today Netscape Navigator 8. Mozilla probably don't have XML and/or XSLT support. I don't know.I also don't know much JavaScript(I haven't read any of the "Advanced" section of the site and I don't remember much of the basics) so I can't even start to think what could be the reason for that error(if it's in the script that is).By the way, for some unknown reason IE doesn't return a thing now(it did earlyer today thogh :) ). I copyed the same code again, just to ensure there wasn't anything altered accedently and still...nothing.I saw Opera 9(10x Jonas), and it returned nothing, just like IE :) . Hm... let's look this on the bright side. I could atleast preview the full XSLTs in Opera and they will work later in the process if I make XSLT only pages.

Link to comment
Share on other sites
hacknsack Member

hacknsack

Posted
Posted

OK, the reason it wouldn't work for "localhost", there was no mime type set for .xml or .xsl files. :) After I set the mime type the above code works both "locally"(no host) and with my localhost(Apache). I'll throw together a zip file and get it to you.

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

Ok, so am I the only one who can't see the XSL in IE at all?The code works with FireFox but not with IE. The XSL files themselves work everywhere, so the problem must be somewhere in the JavaScript code, but where?!?!

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

Thanks to a PM from hacknsack I was able to solve my problem. By the way, I made some small improvements to the code. I don't know much JavaScript but the code describes itself I guess. Notice that the function and usabillity is still the same. But if you are going to use a DOCTYPE(that was the reason for my problem) you must use this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <title>First XML Data Import</title><script type="text/javascript">var sourceXML = 'test.xml';var sourceXSL = 'test.xsl';var container = 'xmlData' ;function getIEXML(){	var writeObj = document.getElementById(container);		// Load XML	var xml = new ActiveXObject("Microsoft.XMLDOM");	xml.async = false;	xml.load(sourceXML);		// Load the XSL	var xsl = new ActiveXObject("Microsoft.XMLDOM");	xsl.async = false	xsl.validateOnParse = false;	xsl.load(sourceXSL);		// Transform	writeObj.innerHTML = xml.transformNode(xsl);}function startMozXML(){	//Load the XML	xmlhttpXSL = new XMLHttpRequest();	xmlhttpXSL.open("GET", sourceXSL, false);	xmlhttpXSL.setRequestHeader("Content-Type", "text/css")	xmlhttpXSL.send(null);	loadedStyle =  xmlhttpXSL.responseXML;		//Load the XSL	xmlhttpXML = new XMLHttpRequest();	xmlhttpXML.open("GET", sourceXML, false);	xmlhttpXML.setRequestHeader("Content-Type", "text/xml")	xmlhttpXML.send(null);	var xmlDoc = xmlhttpXML.responseXML;		//Transform	var writeObj = document.getElementById(container);	var xsltProcessor = new XSLTProcessor();	var xmls = new XMLSerializer();	xsltProcessor.importStylesheet(loadedStyle);	var xmlDoc = xsltProcessor.transformToDocument(xmlhttpXML.responseXML);	writeObj.innerHTML = xmls.serializeToString(xmlDoc);}function init(){  if(window.ActiveXObject)  	{    getIEXML();    }	else		if(window.XMLHttpRequest && window.XSLTProcessor)  			{    		startMozXML();    		}  		else  			{    		document.getElementById(container). innerHTML = 'No Support In This Browser..'  			}}window.onload = init;</script></head><body><div id="xmlData">In order to see this, you must turn on your JavaScript.<br />If yo have turned on your JavaScript, refresh the page and wait.</div></body></html>

The big change was the line

xsl.validateOnParse = false;

Thanks again hacknsack.The other small change I made was that I exported xmlData as a separate variable called "container". That way, If you use multiple copies of this script for different XMLs and/or XSLTs in tags with different IDs you can change the name of the container ID instantly instead of looking for it in the middle of the document.

Link to comment
Share on other sites
  • 2 months later...
boen_robot w3schools Guru

boen_robot

Posted
Posted

I tryed using two of theese scripts today. Only the last one called gets rendered. How come :) ? I mean... they target different pairs of XMLs, XSLTs and containers (both divs), both are in their own files and called with the scr attribute of the script element. What could be wrong :) ?

Link to comment
Share on other sites
  • 8 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...