Getting <script> to validate???

[amin7b5]

I'm really struggling to get a piece of script to validate in xhtml 1.0. The code is the following:

<script type="text/javascript">window.addEvent('domready', function() { new YOOtooltip('yoo-tooltip-1', '<img src="images/latest_work/aos.jpg" alt="Alt Text" /><p>Text goes here</p>', { mode: 'cursor', display: 'block', width: 315, style: 'default', sticky: 0 }); });</script>

This doesn't validate because of the html code within the script tag, however if I replace the '<' and '>' with &lt; and &gt; it will validate but break the script!

My javascript knowledge is limited and this is a third party tool tip script. Thanks in advance for any advice on how to get this to validate!

[whisher]

Hi.
Try to put it in a external file

Bye.

[amin7b5]

Thanks for the reply. I'd like to avoid an external file if possible, mainly because this is a joomla generated article. If it's impossible to make this work though, I'll have to look at including an external file somehow.

[whisher]

Thanks for the reply. I'd like to avoid an external file if possible, mainly because this is a joomla generated article. If it's impossible to make this work though, I'll have to look at including an external file somehow.

AFAIK it's the only way.

[felgall]

XHTML treats the content of the script tag as PCDATA while JavaScript is CDATA. You therefore need to wrap the embedded JavaScript in a CDATA tag.

<script type="text/javascript">
<![CDATA[
window.addEvent('domready', function() { new YOOtooltip('yoo-tooltip-1', '<img src="images/latest_work/aos.jpg" alt="Alt Text" /><p>Text goes here</p>', { mode: 'cursor', display: 'block', width: 315, style: 'default', sticky: 0 }); });
]]>
</script>

Note that will only work with XHTML and not with HTML as the content of the script tag in HTML is CDATA and browsers will not recognise the CDATA tag or its content if you include it in HTML.

[amin7b5]

Thanks for the reply Stephen! I put into place what you suggested and the page will now validate fine, however the script is no longer working. It's like you said, it seems to be ignoring what's between the <![CDATA[ ]]> tag.

My doctype is XHTML 1.0 transitional. Would that be causing an issue? Is there something I'm missing?

[amin7b5]

Throwing regular html comments <!-- --> between the script tag seems to have solved the problem.

I'm still curious though why <![CDATA[ didn't do the trick, and are html comments are the proper way to do this?

[stakes]

Maybe your serving your document as text/html. In order for CDATA to work properly you have to serve the document as application/xhtml+xml.

[AutisticCuckoo]

Throwing regular html comments <!-- --> between the script tag seems to have solved the problem.

No, you can't do that with XHTML. This is a special hack for HTML only. In XHTML the comments will be seen as comments and your script will be entirely hidden.

I'm still curious though why <![CDATA[ didn't do the trick, and are html comments are the proper way to do this?

If a CDATA section doesn't work and HTML comments do, then you're serving your 'XHTML' document as HTML, just like stakes said. That means you're not using XHTML at all; you're using invalid HTML. See the XHTML vs HTML FAQ for more information.

This is acceptable according to Appendix C of the XHTML 1.0 specification, but only if the document still works when served as real XHTML. Relying on it being processed as HTML is harmful.

It's impossible to write this script in a way that works both as real XHTML and pretend-XHTML, because of the different content models of the script element type in the two specifications.

In real XHTML you need to use a CDATA section, or escape the '<' and '>' characters within the script as &lt; and &gt;. But that won't work if you serve it as HTML.

You have two options here: move the script to an external file, or be honest and use an HTML doctype declaration since you're just using HTML anyway.