Firefox not running jQuery for XHTML output
- by ScottSEA
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.