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?

Can you link to your HTML or post a sample of your HTML?

RedWolves
– RedWolves

2009-05-19 14:12:33 +00:00
Commented May 19, 2009 at 14:12 — RedWolves
– RedWolves, Commented May 19, 2009 at 14:12
Nevermind, I got the same problem on Mikes example page.

RedWolves
– RedWolves

2009-05-19 14:14:04 +00:00
Commented May 19, 2009 at 14:14 — RedWolves
– RedWolves, Commented May 19, 2009 at 14:14

David Lantner · Accepted Answer · 2009-05-19 20:41:55Z

8

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:

edited May 19, 2009 at 20:41

answered May 19, 2009 at 20:30

David Lantner

5612 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

emanu Over a year ago

Thanks, very useful to know. Much better than trying to get round the validator in roundabout ways.

RedWolves · Accepted Answer · 2009-05-19 14:23:12Z

8

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>

answered May 19, 2009 at 14:23

RedWolves

10.4k12 gold badges51 silver badges69 bronze badges

1 Comment

Jeff Atwood Over a year ago

the validator didn't seem to respect the pseudo-HTML comment; using <div><\/div> (eg escaping the slash) worked instead

tvanfosson · Accepted Answer · 2009-05-19 14:13:01Z

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.

answered May 19, 2009 at 14:13

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Collectives™ on Stack Overflow

why won't this validate (jquery problem)?

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related