?
Solved

Parsing xml - xslt in javascript with Firefox

Posted on 2007-07-28
10
Medium Priority
?
2,224 Views
Last Modified: 2013-11-18
I am trying to transform an XML document using an XSLT document in Firefox:
       
        var objDOMParser = new DOMParser();
        var xml = objDOMParser.parseFromString(XMLValue, "text/xml");
        xml.async = false;
       
        alert('xml doc:' + xml.xml); //shows: undefined
       
        xsl = document.implementation.createDocument("","",null);    
        //xsl.load(XSLRef);
        try
        {
            xsl.load('XSLT/Vacaturebank.xslt');
        }
        catch(e)
        {
            alert(e.message);
        }
       
        alert('xsl doc:' + xsl.xml); //shows: undefined

        var oProcessor = new XSLTProcessor()
        oProcessor.importStylesheet(xsl);

        var oResultDom = oProcessor.transformToDocument(xml);
        alert(oResultDom.xml); //shows: undefined


All the results as stated in the above code give me: undefined. What's wrong? Is in oResultDom.xml the .xml an invalid property? Or am I missing something else?
0
Comment
Question by:frollo
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 13

Accepted Solution

by:
R7AF earned 1000 total points
ID: 19584489
Try to use Sarissa to do the transform. You can download this free library.
http://dev.abiss.gr/sarissa/

You can use the following code, works in Firefox and IE.
It's sometimes better to use .xsl as extension instead of .xslt.

#################### sarissa.html ####################

<!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>Sarissa Transformation</title>
      
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
            <script type="text/javascript" src="../../js/sarissa/sarissa.js"></script>
            <script type="text/javascript" src="../../js/sarissa/sarissa_ieemu_xpath.js"></script>
            <script type="text/javascript" language="JavaScript">
                  <!--
                  var oXmlDoc;
                  var oXslDoc;
                  
                  // create the xml document object
                  oXmlDoc= Sarissa.getDomDocument();
                  oXmlDoc.async = false;
                  oXmlDoc.load("xml.xml");
                  
                  // create an object from the xsl
                  oXslDoc= Sarissa.getDomDocument();
                  oXslDoc.async = false;
                  oXslDoc.load("Vacaturebank.xsl");
                  
                  function show()
                  {
                        var xsltProc  = new XSLTProcessor();
                        xsltProc.importStylesheet(oXslDoc);
                        var res= xsltProc.transformToDocument(oXmlDoc);
                        document.getElementById("transform").innerHTML = new XMLSerializer().serializeToString(res);
                  }  
                  //-->
            </script>
      </head>

      <body onload="show();">
            <div id="transform"></div>
      </body>
      
</html>
0
 
LVL 60

Assisted Solution

by:Geert Bormans
Geert Bormans earned 1000 total points
ID: 19588912
I do agree with R7AF that Sarrissa is a very good library for cross browser XSLT...
but sometimes people just want to make it work in Firefox...

the .xsl versus .xslt extensions have nothing to do with the loading through javascript functions,
so you can safely ignore that comment here

I see some possible issues with your code

let us start with the loading of the XSLT
Firefox users typically use an asynchrone funtion onLoad, like this

      xsl = document.implementation.createDocument("","",null);    
        try
        {
            xsl.onload = doTransform();
            xsl.load('XSLT/Vacaturebank.xslt');
        }

I tend to not follow that style.
but if you don't you need to set the load to synchronous, or you will wait for ever
      xsl = document.implementation.createDocument("","",null);    
        try
        {
            xsl.async = false;
            xsl.load('XSLT/Vacaturebank.xslt');
        }
you do that for the XML, but not for the XSLT

Then, .xml as a DOM method is an extension for MS ActiveX DOM objects and as far as I know not supported in Firefox
but you could check for the number of elements of a specific name to test for correct loading of the XML
alert("nodes found: " + xmlDoc.getElementsByTagName('designer').length);

cheers

Geert
0
 
LVL 4

Author Comment

by:frollo
ID: 19599818
Thanks, I'm not at home at the moment, will try it as soon as I'm home, sarissa didn't work, gave me an "undefined" result, just like my code did.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 13

Expert Comment

by:R7AF
ID: 19599864
Maybe you could post your XSLT and a good test-sample of your XML here. Then we can test of that's the problem.
0
 
LVL 4

Author Comment

by:frollo
ID: 19602671
Almost there, Everything works except.... Displaying the result file.

Like:
alert(oResultDom.xml);  

Above statement works in IE, not in Firefox the ".xml" part is not a valid method in Firefox just like Gertone said.

Any suggestions?
0
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 19602993
Do you need to show the xml in the alert popup?
If so, I am not sure how to do that, but I believe you need to walk the tree and explicitely add start and end tags with the data
A good hint can be found in the main sarissa.js
0
 
LVL 4

Author Comment

by:frollo
ID: 19603067
Final sollution:

        var objDOMParser = new DOMParser();
        var xml = objDOMParser.parseFromString(XMLValue, "text/xml");
        xml.async = false;
       
        xsl = document.implementation.createDocument("","",null);    
        try
        {
            xsl.async=false;
            xsl.load('XSLT/Vacaturebank.xslt');
        }
        catch(e)
        {
            alert(e.message);
        }
       

        var oProcessor = new XSLTProcessor()
        oProcessor.importStylesheet(xsl);

        var oResultDom = oProcessor.transformToDocument(xml);
        var serializer = new XMLSerializer();
        return serializer.serializeToString(oResultDom);

Thanks guys
0
 
LVL 60

Expert Comment

by:Geert Bormans
ID: 19603102
welcome
0
 

Expert Comment

by:mrbaseball2usa
ID: 23863280
Apparently quite late to the party, but spent 3 hrs Googling this fix before I found this post, so I wanted to add a little relevancy again.

Thanks for the help / advice guys! Works perfectly now.
0
 
LVL 4

Author Comment

by:frollo
ID: 23863482
Indeed quite late, but it still shows up in my mail :) Glad I / we could be of help. I know it was a brainbreaker for me back then. Hope other people also post their final sollution to their problems posted. It helps the people that google, but also the people reacting to understand the question asked.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question