mloseke Posted December 16, 2005 Share Posted December 16, 2005 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 More sharing options...
hacknsack Posted December 17, 2005 Share Posted December 17, 2005 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 More sharing options...
boen_robot Posted December 17, 2005 Share Posted December 17, 2005 @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 More sharing options...
hacknsack Posted December 17, 2005 Share Posted December 17, 2005 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 More sharing options...
Jonas Posted December 17, 2005 Share Posted December 17, 2005 @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?<{POST_SNAPBACK}> Opera 9.0 will have xslt and xpath support... http://snapshot.opera.com/windows/w90p1.html--> Scripting:) Link to comment Share on other sites More sharing options...
boen_robot Posted December 17, 2005 Share Posted December 17, 2005 @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 More sharing options...
hacknsack Posted December 18, 2005 Share Posted December 18, 2005 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 More sharing options...
boen_robot Posted December 26, 2005 Share Posted December 26, 2005 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 More sharing options...
boen_robot Posted December 27, 2005 Share Posted December 27, 2005 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 More sharing options...
hacknsack Posted December 28, 2005 Share Posted December 28, 2005 You're welcome, .Thanks for posting the improved code. Link to comment Share on other sites More sharing options...
boen_robot Posted March 26, 2006 Share Posted March 26, 2006 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 More sharing options...
mie2w3s Posted December 8, 2006 Share Posted December 8, 2006 I'm not advanced in JS. I was looking for this. Thanks. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now