JQuery and XSLT

Question

Good day, I have stumbled upon a bug or some strange behaviour and I can't find the solution anywhere.

I use XSLT to display HTML from a XML document. Inside that stylehsheet, I use javascript/jQuery to add some contents. But apparently you can not append anything but texts to any container.

<script type="text/javascript">
<![CDATA[
 $(function() {
  $("div#topbanner" ).html('<img src="images/load-top.gif" class="load" />');
 });
]]>

It's working perfectly under Firefox but with IE7, after the codes execution, only the unrendered HTML appears into my DIV. Like if the <> got replaced by > < respectively.

To make it work under IE7, I must take out the CDATA tag but doing so, Firefox do not render it.

Is there a way to make the information into the html method execute as html code?

Thank you in advance

Answer 1

I've seen this when I forget to use

disable-output-escaping="yes"

in my <xslvalue-of../>

Answer 2

The jQuery is working like expected but the html generated from the jQuery method html is shown as text and not rendered as HTML tag.

After executing:

$("div#topbanner" ).html('<img src="images/load-top.gif" class="load" />');

My div contains the string <img src="images/load-top.gif" class="load" /> and not the image itself.

I suspected it was because of the ![CDATA[ tag I use to wrap my javascript code.

Note that it's doing the expected behavior under IE7 WITHOUT the ![CDATA[ but not in Firefox. To make it work under Firefox, I must USE the ![CDATA[ but its no longer working with IE7.

I'm stuck between two browsers capabilities.

Help would be appreciated!

Answer 3

Embedded Javascript & XSLT = Insanity ;-)

The solution:

<script type="text/javascript">
    //<xsl:comment><![CDATA[
     $(function() {
      $("div#topbanner" ).html('<img src="images/load-top.gif" class="load" />');
     });
    //]]></xsl:comment>
</script>

Answer 4

What happens if you try this?

<![CDATA[
 $(function() {
  $("<img>").addClass("load").attr("src","images/load-top.gif").appendTo("div#topbanner");
 });
]]>

or if that still doesn't work... try this method

<![CDATA[
 $(function() {
  myimg = new Image();
  $(myimg).addClass("load").attr("src","images/load-top.gif").appendTo("div#topbanner");
 });
]]>

Answer 5

I have found a solution. I must keep my javascript in a external file.

Thank you to anyone who tried to help.