why won't this validate (jquery problem) ?

Question

On my site I'm using the jquery cycle plugin for a slideshow with a pager. This example: http://malsup.com/jquery/cycle/pager.html

So in the head of my document, I have a script similar to:

<script type="text/javascript">
$('#s4').before('<div id="nav">').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 3000, 
    pager:  '#nav' 
});
</script>

My doc type is XHTML Strict.

When I try and validate the page, I get the following errors: "document type does not allow element "div" here" and "end tag for "div" omitted, but OMITTAG NO was specified" because the div tag isn't closed.

Is there a way to use the jquery and get it to validate?

Answer 1

You could probably get rid of the errors by doing:

$('#s4').before('<' + 'div id="nav">').cycle({ ...

This should keep the validator from detecting any HTML inside your script tag. Me - I'd live with the error, knowing it was a problem with the validator not my code.

Answer 2

If you put HTML comment tags into your script block the validator will ignore that block of code and validate correctly.

<script type="text/javascript">
<!--
$('#s4').before('<div id="nav">').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 3000, 
    pager:  '#nav' 
});
//-->
</script>

Answer 3

Actually, the reason your code is not validating is because certain characters are not allowed in XHTML (e.g. "<", etc.) so they must be wrapped in CDATA sections in XHTML (due to the strict nature of XML parsing rules). HTML comment markers (specfically, the double dashes "--") are also not allowed and shouldn't appear in a SCRIPT block since they're not valid understandable JavaScript. So instead of using HTML comment markers, you should wrap your code inside a "CDATA marked section" to pass the validator and not confuse the JavaScript engines:

<script type="text/javascript">
//<![CDATA[
$('#s4').before('<div id="nav">').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 3000, 
    pager:  '#nav' 
});
//]]>
</script>

Take a look at the following pages for more information:

1. XHTML 1.0 recommendation: 4.8. Script and Style elements
2. Properly Using CSS and JavaScript in XHTML Documents