XSLT breaks jQuery/Prototype Script in Firefox

Question

I am working on a school project. It's an internet page with XML / XSLT. For the design we thought about an image fading effect in the background.

I made it as you can see and it works perfectly on IE7. But checking it in FF 3.6 throws some suspicious errors in firebug und does not work.

For example:

alert($('menu_bg').innerHTML);  

works when used with document ready / observe. But none of these work:

$('#menu_dots').append("content"); // jQuery
$('menu_dots').insert("content");  // prototype

The point is, that I do not understand, why everything works without XSLT in both browsers. But when I do the same with XSLT it breaks in FF.

http://nak.erline.eu/index.xml

same domain /js/_script.js

I thought the problem is jQuery based, that's why I started to translate it to prototype. On my half way I realized, that the problem still happens. That's why the code is still with jQuery (commented) and Prototype.

Have you an idea?

Answer 1

If you have to work with XSLT, the HTML DOM, XML and cross-browser functionality, I can highly recommend Sarissa. It will make working with Microsoft's hard and incompatible ActiveX DOM and all other W3C-based DOMs a lot easier.

The problem you are (likely, not necessarily) facing is that the resulting DOM objects do not belong to the same origin XML Documents, which is default DOM behavior. As a result, jQuery or Prototype cannot find the new elements. One workaround is to insert them as text and have them reparsed, but that's costly. There are other workarounds, but the easiest is probably to have a look at Sarissa and learn to use it. It's not hard and makes your code more readable. You'll find that Sarissa takes care of these and other subtleties so you can worry about more important things..

Answer 2

At the top of your XSLT File change:

<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" />

to

<xsl:output method="html" indent="yes" 
    doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" />

Notice that the output method type should be html instead of xml. That fixed the problem in my tests.

I found the hint to the answer here: http://stackoverflow.com/questions/2687777/why-does-my-simple-strict-xhtml-file-give-errors-when-i-include-jquery

Also in my test, I removed the following script references

<script src="src/scriptaculous.js" type="text/javascript"/>
<script type="text/javascript" src="js/_script.js"/>

and added a reference to jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

and tested with your jQuery code snippet.

<script>
    $(document).ready(function(){
        $('#menu_dots').append("content");
    });
</script>