Question

For the record, I am using Windows XP SP3, running FireFox 5 and IE 8.

I am working on a project that is using code from the stone ages, trying to refactor it, modernize it. It only worked on IE and involves heavy use of XML and XSLT.

When the page loads, content is dynamically placed inside a div using XSLT and XML preprocessing. This content consists of an img, map, and input tag, which is retrieved from an XSL file. That works fine in both Firefox and Internet Explorer; it loads fine and the image displays correctly, with the proper mappings, utilizing usemap attribute on the img.

There is a select box that allows the user to load a different image — this is where I’m having issues. When the user makes a selection in the select box, it mirrors the steps when the page first loaded: XSLT, via an XML object and an XML file. Essentially, the contents of the div is reloaded.

This works well in Internet Explorer (IE); however, FireFox is is not transforming at all.

I found a jquery transform plugin and here is the line of code I am using:

function TransformXML()
{
  var html = null;
  var XML_Image = null;
  // Load XML document into XML_Image and do manipulation on it before transformation
  // ...
  // Further down in the function..

  if (document.implementation && document.implementation.createDocument)
  {
    html = $.transform({async:false, xmlobj:XML_Image, xsl:"xsl/ImageData.xsl"});
    document.getElementById("DivContent").appendChild(html);
  }
  else
  {
    html = $.transform({async:false, xmlobj:XML_Image, xsl:"xsl/ImageData.xsl"});
    document.getElementById("DivContent").innerHTML = html;
  }
}

As I said, IE works fine. Unfortunately, the html variable value is blank (FireBug reports “”). What could be the issue???

The XSL file does use XSL:import, but the jquery transform plugin worked fine for IE; I don’t know if FireFox doesn’t like it, though (FireBug is awful at debugging XSLT).

Thank you in advance for any help!

UPDATE

I have determined that it is something with the XSL file. I tried using a sample XML and XSL file from the jquery transform plugin and it worked. Then, I tried using my XML object, XML_Image, and the sample XSL file and it worked, too. Finally, I tried using a sample XML file and my XSL file, ImageData.xsl, and it did not work. I am not sure what is wrong with the XSL file, however.

UPDATE2

Well, I think it is something with the XSL file. Here it is:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="xml" indent="yes"/>

  <xsl:template name="chgBR">

    <xsl:param name="str"/>
    <xsl:choose>
      <xsl:when test='$str = ""'>
        <br/>
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="$str"/>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>

<xsl:template name="replace">
  <xsl:param name="str"/>
  <xsl:param name="src"/>
  <xsl:param name="dst"/>
  <xsl:if test='$str != ""'>
    <xsl:choose>
    <xsl:when test='substring-before( $str, $src ) = "" '>
      <xsl:value-of select='$str'/>
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-of select='substring-before( $str, $src )'/>
    <xsl:choose>
      <xsl:when test='$dst = "&lt;br/&gt;"'>
        <xsl:element name="br"/>
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select='$dst'/>
      </xsl:otherwise>
      </xsl:choose>
      <xsl:call-template name='replace'>
        <xsl:with-param name='str' select='substring-after( $str,$src )'/>
        <xsl:with-param name='src' select='$src'/>
        <xsl:with-param name='dst' select='$dst'/>
      </xsl:call-template>
    </xsl:otherwise>
    </xsl:choose>
  </xsl:if>
</xsl:template>


<xsl:template match="/">
  <xsl:apply-templates select="Figure" />
</xsl:template>

<xsl:template match="Figure">

  <input type="hidden" name="pdfpath" id="pdfpath">
    <xsl:attribute name="value">Catalog/PDF/<xsl:call-template name='replace'>
        <xsl:with-param name='str' select='./nm_pdf'/>
        <xsl:with-param name='src' select='" "'/>
        <xsl:with-param name='dst' select='"%20"'/>
      </xsl:call-template>
    </xsl:attribute>
  </input>
</xsl:template>

</xsl:stylesheet>

UPDATE3

I downloaded an XML editor, in hope it could debug my XML and XSL files and execute a transformation of it, outside of the browser. The XSL file appeared to be okay; so, I went back to testing if the XML was, somehow, corrupt. As it turns out, the XML editor was able to transform the XML file using the XSL file. I can say the XML file does contain english and eastern asian language characters, encoded as UTF-8. But IE was able to parse and transform it, as well as the XML Editor. So, perhaps Firefox has a problem with the XML Files’ UTF-8 encoding?

Having no answer to this problem, I tried this:

if (window.DOMParser)
{
  var serializer = new XMLSerializer();
  var XMLString = serializer.serializeToString(XML_Image);
  var parser = new DOMParser();
  var XML_Image_Again = parser.parseFromString(XMLString, "text/xml");
}

var Works = $.transform({async:false, xmlobj:XML_Image_Again, xsl:"xsl/ImageData.xsl"});
var AlsoWorks = $.transform({async:false, xmlstr:XMLString, xsl:"xsl/ImageData.xsl"});

Works = Works.replace(/"/g,"\"");
Works = htmlfixed.replace(/(.gif).*?\"/g,"$1\"");

document.getElementById("DivContent").innerHTML = Works;

What I did was serialize the XML to a string. Then, I parsed the string and attempted to convert it back to a XML DOM object. For some reason, it stayed a string. As a result, Works takes the value of a string. AlsoWorks* takes the value of a string, as well, but this is the desired result. What’s odd is after I transformed the XML and passed it to Works, most of the quotation symbols got messed up and some some other data was appended to the end of the image I’m retrieving (.gif). Because Works is a string, I could not use the appendChild method to attach it to the DOM tree. I was left with no choice but to use innerHTML, which I did.

All this time and energy because the project I’m working with is entrenched with XML and XSL files.

I found that this blog also documents difficulties with FireFox and XSLT/XML/XSL:

http://ajaxandxml.blogspot.com/search/label/Firefox

It works now, but I’m still scratching my head. In the beginning, I mentioned it works in IE just fine. And, perhaps more importantly, it works in BOTH FireFox and IE the first time I attach content to the div, which is upon initialization of the page. It’s only on subsequent times I am attaching content to the div that FireFox doesn’t cooperate (and Firebug doesn’t help much, nor does it report errors, unlike IE’s web devleoper toolbar). And upon initialization, I’m not even using jquery, just native DOM. And, yet, when I used sample XML and XSL file pairs from the jquery transform plugi, those worked fine. It’s only when I use both my XML and XSL files together that it complains (again, not when the page first loads). The strange thing is it wouldn’t transform the XML object, but after I serialized it, the transformation worked fine.

Too many questions. I say it’s probably FireFox and not the XML or XSL, because if the XML and XSL files were at fault, then the transformation should fail when the page loads and, yet, it does not.

I sure as heck would love to know why appending the object to the div didn’t work but serializing the object to a string and setting it to the innerHTML property, after transformation, passed with flying colors.

UPDATE4

In my XSL file, I placed the first two templates in a separate XSL file and am using the xsl:import feature, instead. This broke it again. So, FireFox and jquery transform plugin do not respond well to the xsl:import feature (IE has no issue with it). I tried using the sample XML and XSL files from the transport plugin, the example which specifies how to use xsl:import, and it failed in firefox.

UPDATE5

I refactored the code, such that it does not use jquery, to investigate if xsl:import will fail.

// Test for Firefox only, purposely not including IE code
function TransformNodeTest(xmlobj, xslpath)
{
  var xslobj = LoadXSML(xslpath);
  var xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(xslobj);
  return(xsltProcessor.transformToFragment(xmlobj, document));
}
function LoadXSML(xslpath)
{
  var xhttp=new XMLHttpRequest();
  xhttp.open("GET",xslpath,false);
  xhttp.setRequestHeader("Pragma", "no-cache");
  xhttp.send();
  return xhttp.responseXML;
}

// ImageData.xsl contains xsl:import statement
// XML_Image is an XML obj
var FireFoxHTML = TransformNodeTest(XML_Image, "xsl/ImageData.xsl");

It worked fine.

Conclusions for replacing XML/XSL content in div with XML/XSL content–

jquery transform plugin::

IE: Works fine; no issues with xsl:import feature in xsl file.

FireFox: Does not like xsl:import feature for some unknown reason (to me). My stopgap, until a better solution comes along, is copy/paste all XSL statements into one file and not use xsl:import. Also, need to serialize the XML obj and, optionally, parse it back to an XML object to transform. Why does serializing fix it? I do not know.

XML DOM::

IE: Works fine; no issues with xsl:import feature in xsl file.

FireFox: No issue with xsl:import feature. Need to serialize the XML obj and, optionally, parse it back to an XML object to transform. Why does serializing fix it? I do not know.

To reiterate, when the page loads initially, XSLT is conducted on the div and it works fine in FF and IE. It’s only on subsequent times does it fail in FF (but not IE).

Answer 1

My solution was abandoning XSLT and writing HTML in JavaScript and attaching it to the DOM. If it was one XSLT call for a page, then I suppose I would’ve made further attempts to achieve cross-browser compatibility. And I believe it was partially failing due to some timing and loading issues. I may revisit it later and update this space.