views:

393

answers:

3

Hi, I have created a Practice.xsl file to transform the source Practice.xml to an html from javascript and add the generated html to n empty DIV element, which is working fine with IE But same html is not rendered correctly on Firefox.

here is the Practice.xml

<feed>
 <feedback>
  <user>Naresh</user>
  <date>12 Oct, 2009</date>
  <comments>This blog has no stuff to rate it</comments>
 </feedback>
 <feedback>
  <user>Pokuri</user>
  <date>21 Dec, 2009</date>
  <comments>Naresh is right</comments>
 </feedback>
 <feedback>
  <user>Subbu</user>
  <date>30 Dec, 2009</date>
  <comments>I don't agree with both Naresh n Pokuri</comments>
 </feedback>
</feed>

Here is the Practice.xsl

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format"&gt;
<xsl:output method="html" indent="yes"/>
<xsl:template match="feed/feedback">
<html>
 <head>
  <title>Feedback Forum</title>
 </head>
 <body>
 <span style="display:block; padding: 5px 10px; background-color: #C9F0F9; width: 100%; margin-top:10px; border-left:10px solid #F9EBC9; border-bottom: 1px solid #000000;"><xsl:apply-templates select="user"/> on <xsl:apply-templates select="date"/></span>
 <span style="display:block; padding: 5px 10px; background-color: #CDF5CD; width: 100%; border-left:10px solid #F9EBC9;"><xsl:apply-templates select="comments"/></span>
 </body>
</html>
</xsl:template>
</xsl:stylesheet>

Here is the javascript for work with XSLT transformations on Firefox

function listOrders(){ 
 var XSLT = loadXSLT("Practice.xsl");
 var trasformedText;
 if(window.ActiveXObject){
  trasformedText = XMLDOM.transformNode(XSLT);
  document.getElementById("rightDIV").innerHTML=trasformedText;
 } else if(document.implementation && document.implementation.createDocument){
  **xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(XSLT);
  trasformedText = xsltProcessor.transformToFragment(XMLDOM, document);
  document.getElementById("rightDIV").appendChild(trasformedText);**
 } else {
  alert("Sorry your browser may not support xsl transformation.\n+Please check your browser documentation for further help");
 }

}


Relative images for professionals to identify the problem easily

In Firefox: http://img97.imageshack.us/img97/8509/firefoxk.jpg

+1  A: 

View the generated HTML source. Does it look right? You're displaying a complete <html> page for each feedback instead of displaying only the <span>s for each feedback.

Your XSL needs to be altered with a <xsl:for-each> for each feedback:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format"&gt;
<xsl:output method="html" indent="yes"/>
<xsl:template match="feed">
<html>
 <head>
  <title>Feedback Forum</title>
 </head>
 <body>
 <xsl:for-each select="feedback">
  <span style="display:block; padding: 5px 10px; background-color: #C9F0F9; width: 100%; margin-top:10px; border-left:10px solid #F9EBC9; border-bottom: 1px solid #000000;"><xsl:apply-templates select="user"/> on <xsl:apply-templates select="date"/></span>
  <span style="display:block; padding: 5px 10px; background-color: #CDF5CD; width: 100%; border-left:10px solid #F9EBC9;"><xsl:apply-templates select="comments"/></span>
 </xsl:for-each>
 </body>
</html>
</xsl:template>
</xsl:stylesheet>

IE is too forgiving in displaying multiple <html>s in one response, that's why it worked in this browser. Firefox more strictly adheres the standards: there can be only one <html> element in the DOM.

BalusC
Yeah I am generating only span tags right now. But that doesn't work. If i debug the script using Firebug in Firefox, then it reflects the transformation properly. How come that is happening?
Pokuri
A: 

I know this doesn't really answer the question, but client-side xslt transform is pretty dicey and you're not guaranteed much consistency. I would consider using server side XSLT transformation if I were you.

Tim
Interesting point of view, XSLT 1.0 is pretty straight forward with little room for ambiguity. Whats the source of your opinion? Can you point to any examples of inconsistency?
AnthonyWJones
A: 

Might be the slowness of Firefox in loading xsl file. So I made following code changes to cope with it, which i have ignored as the files are small.

wrote the statement XMLDOM.async=false; XSLT.async=false;

function loadXML(){
    var XMLDOM;
    // if it is IE
    if(window.ActiveXObject){
     XMLDOM = new ActiveXObject("Microsoft.XMLDOM");
            // following staement added
     XMLDOM.async=false;
     XMLDOM.load("Practice.xml");
    } else if(document.implementation && document.implementation.createDocument){  
     XMLDOM = document.implementation.createDocument("", "", null);
            // following staement added
     XMLDOM.async=false;
     XMLDOM.load("Practice.xml");
    } else {
     alert("Sorry your browser may not support loading an external file.\n+Please check your browser documentation for further help");
    }
    return XMLDOM;
}

function loadXSLT(xsltFile){
    var XSLT;
    // if it is IE
    if(window.ActiveXObject){
     XSLT = new ActiveXObject("Microsoft.XMLDOM");
                // following staement added
     XSLT.async=false;
     XSLT.load(xsltFile);
    } else if(document.implementation && document.implementation.createDocument){  
     XSLT = document.implementation.createDocument("", "", null);
                // following staement added
     XSLT.async=false;
     XSLT.load(xsltFile);
    } else {
     alert("Sorry your browser may not support loading an external file.\n+Please check your browser documentation for further help");
    }
    return XSLT;
}
Pokuri