Firefox not running jQuery for XHTML output
        Posted  
        
            by ScottSEA
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by ScottSEA
        
        
        
        Published on 2009-07-27T21:32:53Z
        Indexed on 
            2010/04/30
            23:17 UTC
        
        
        Read the original article
        Hit count: 464
        
Okay, I did a crappy job of describing the issue in my previous post. I think the discussion got sidetracked from the core issue - so I'm going to try again. Mea Culpa to Elzo Valugi about the aforementioned thread.
I have an XML file:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="wtf.xsl"?>
<Paragraphs>
  <Paragraph>Hi</Paragraph>
</Paragraphs>
Simple enough. I also have a stylesheet to create XHTML output:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" 
            xmlns="http://www.w3.org/1999/xhtml"
            xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="xml"
          indent="yes"
          doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
          doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
          omit-xml-declaration="yes"/>
  <xsl:template match="/*">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
        <title>FF-JS-XHTML WTF</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="wtf.js"></script>
      </head>
      <body>
        <xsl:apply-templates />
      </body>
    </html>
  </xsl:template>
  <xsl:template match="Paragraph">
    <p>
      <xsl:apply-templates />
    </p>
  </xsl:template>
</xsl:stylesheet>
Last but not least, I have the following jQuery in toto (wtf.js, from the script tag in the stylesheet):
$(function() {
    alert('Hiya!');
    $('<p>Hello</p>').appendTo('body');
});
Extremely simple, but sufficient for the demonstration. When I run this in Internet Explorer, I get the alert 'Hiya!' as well as the expected:
Hi
Hello
but when I run it in Firefox (3.0.1), I still get the alert, but the jQuery does not insert the paragraph into the DOM, and I just get this:
Hi
If I change the stylesheet to method="html" it works fine, and I get (along with the alert):
Hi
Hello
Why doesn't Firefox run the jQuery with an XHTML document? Has anyone any experience with this problem?
EDIT: ADDITIONAL INFO
I can successfully insert elements into the documents this way in Firefox (method="xml"):
var frag = document.createDocumentFragment();
var p = document.createElement('p');
p.appendChild(document.createTextNode('Ipsum Lorem'));
frag.appendChild(p);
$('body').append(frag);
but I'm running into a similar problem with the .remove() method.
It is looking more and more that Firefox doesn't construct a DOM from XML that jQuery can relate to, or somesuch.
© Stack Overflow or respective owner