Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>After futzing around, I think I finally found a solution to my problem. I decided not to use JQuery because the Firebug errors really bug me. </p> <p>I incorporated this <code>getElementsByClassName()</code> function from <a href="https://stackoverflow.com/questions/1933602/how-to-getelementbyclass-instead-of-getelementbyid-with-javscript">How to getElementByClass instead of GetElementById with Javascript?</a> into my solution. I created my own JS called "xml.js":-</p> <p><strong>xml.js</strong></p> <pre><code>function getElementsByClassName(node,classname) { if (node.getElementsByClassName) { // use native implementation if available return node.getElementsByClassName(classname); } else { return (function getElementsByClass(searchClass,node) { if (node == null) { node = document; } var classElements = [], els = node.getElementsByTagName("*"), elsLen = els.length, pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j; for (i = 0, j = 0; i &lt; elsLen; i++) { if ( pattern.test(els[i].className) ) { classElements[j] = els[i]; j++; } } return classElements; })(classname, node); } } window.onload=function() { var elements = getElementsByClassName(document, "html"); for (var i = 0; i &lt; elements.length; i++) { var e = elements[i]; e.innerHTML = e.innerHTML.replace(/&amp;lt;/g, "&lt;").replace(/&amp;gt;/g, "&gt;"); } }; </code></pre> <p><strong>XSL</strong></p> <p>I added this JS reference in the XSL:-</p> <pre><code>&lt;script type="text/javascript" src="xml.js"&gt;&lt;xsl:comment/&gt;&lt;/script&gt; </code></pre> <p>I basically added <code>class="html"</code> on the tags that require HTML formatting, for example:-</p> <pre><code>&lt;p class="html"&gt; &lt;xsl:call-template name="getDoc" /&gt; &lt;/p&gt; </code></pre> <p><strong>XML</strong></p> <p>My XML has bunch of markups:-</p> <pre><code>&lt;doc&gt; &lt;![CDATA[ &lt;b&gt;Hello!&lt;/b&gt; this is a &lt;i&gt;test&lt;/i&gt;. Email me at &lt;a href="mailto:cow@dung.com"&gt;Moo&lt;/a&gt;. ]]&gt; &lt;/doc&gt; </code></pre> <p>The HTML within the CDATA seems to get rendered properly in the browser.</p> <p><strong>UPDATE</strong></p> <p>Just a side note, I also tried removing CDATA and escape &lt; and >:-</p> <pre><code>&lt;doc&gt; &amp;lt;b&amp;gt;Hello!&amp;lt;/b&amp;gt; this is a &amp;lt;i&amp;gt;test&amp;lt;/i&amp;gt;. Email me at &amp;lt;a href="mailto:cow@dung.com"&amp;gt;Moo&amp;lt;/a&amp;gt;. &lt;/doc&gt; </code></pre> <p>Then, I do the following:-</p> <pre><code>&lt;xsl:value-of select="..." disable-output-escaping="yes" /&gt; </code></pre> <p>... and here's the result:-</p> <ul> <li>IE 8: works, rendered correctly.</li> <li>Chrome 9: works, rendered correctly</li> <li>Safari 5: works, rendered correctly</li> <li>Firefox 4: does not work - shows up tag instead of bolded word.</li> </ul> <p>It seems like every browser is handling the rendering differently... pretty disappointed with FF4... bah. </p> <p>At least for now, I'll stick with the javascript solution until I find a better one.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload