Error: Uncaught SyntaxError: Unexpected token <

Question

For some reason, I'm getting this error message:

Uncaught SyntaxError: Unexpected token < 

For this line of code:

title: '<img src="/images/text/text_mario_planet_jukebox.png" id="text_mario_planet_jukebox"/>', 

In this context:

$(document).ready(function() {     $('#infobutton').click(function() {         $('#music_descrip').dialog('open');     });         $('#music_descrip').dialog({             title: '<img src="/images/text/text_mario_planet_jukebox.png" id="text_mario_planet_jukebox"/>',             autoOpen: false,             height: 375,             width: 500,             modal: true,             resizable: false,             buttons: {                 'Without Music': function() {                     $(this).dialog('close');                     $.cookie('autoPlay', 'no', { expires: 365 * 10 });                 },                 'With Music': function() {                     $(this).dialog('close');                     $.cookie('autoPlay', 'yes', { expires: 365 * 10 });                 }             }         });     }); 

I think everything should be good to go, but I don't understand why the < is somehow throwing this off..

whoops, forgot to show where this is happening! My bad,

http://www.marioplanet.com/index.asp

Any ideas?

Answer 1

This is a browser issue rather than a javascript or JQuery issue; it's attempting to interpret the angle bracket as an HTML tag.

Try doing this when setting up your javascripts:

<script> //<![CDATA[      // insert teh codez  //]]> </script> 

Alternatively, move your javascript to a separate file.

Edit: Ahh.. with that link I've tracked it down. What I said was the issue wasn't the issue at all. this is the issue, stripped from the website:

<script type="text/javascript"     $(document).ready(function() {     $('#infobutton').click(function() {         $('#music_descrip').dialog('open');     });         $('#music_descrip').dialog({             title: '<img src="/images/text/text_mario_planet_jukebox.png" id="text_mario_planet_jukebox"/>',             autoOpen: false,             height: 375,             width: 500,             modal: true,             resizable: false,             buttons: {                 'Without Music': function() {                     $(this).dialog('close');                     $.cookie('autoPlay', 'no', { expires: 365 * 10 });                 },                 'With Music': function() {                     $(this).dialog('close');                     $.cookie('autoPlay', 'yes', { expires: 365 * 10 });                 }             }         });     }); 

Can you spot the error? It's in the first line: the <script tag isn't closed. It should be <script type="text/javascript">

My previous suggestion still stands, however: you should enclose intra-tagged scripts in a CDATA block, or move them to a separately linked file.

That wasn't the issue here, but it would have shown the real issue faster.