JavaScript not working in Grails/GSP

1
votes

I have the following JavaScript code:

    <script type="text/javascript"><!--
​$(function () {
    $('#add').click(function() {
        $(this).before($('select:eq(0)').clone());
      if ($('select').length > 5) $(this).hide();        
    });
});​
//-->
</script>

Here is the HTML code:

<select name="dropdown">
    <option value="a">Apple</option>
    <option value="b">Bee</option>
    <option value="c">Cat</option>
    <option value="d">Donkey</option>
    <option value="e">Elephant</option>
</select>
<a href="#" id="add">Add</a>

In the jsfiddle demo its working fine, but its not working on my gsp. Any idea or I am missing out something? Whenever I click on the "Add" it just display /# on my url.

The error message I managed to figure out through inspecting the element is as follows: Uncaught SyntaxError: Unexpected token ILLEGAL

Error MessageScreenshot Console error screenshot from Chrome

3
javascriptgrailsgsp
Is the browser debugger showing any errors when you click the Add link? - BobS
"Uncaught SyntaxError: Unexpected token ILLEGAL". I suspect that the way I declare the script on the gsp is wrong? The "Add" is unable to point to the script I guess.. But I have no idea on how to troubleshoot it.. - user1790785
What does the GSP-generated code look like on the browser? (i.e., use "View source" or your browser's equivalent) - BobS
the script is in the header and the html drop list is in the body, although i didnt do any header/body tags in my gsp - user1790785
And is the script intact/unmangled? - BobS

3 Answers

0
votes

There are probably some illegal characters in the <script> block.

Did you copy/paste it from somewhere else? I would suggest you put cursor at the start and end of each line and delete all characters till you are sure there are no non-visible characters.

Alternatively delete the whole script block and retype it manually

0
votes

Try uncommented version (w/o <!-- and //-->):

<script type="text/javascript">
​$(function () {
  $('#add').click(function() {
     $(this).before($('select:eq(0)').clone());
     if ($('select').length > 5) $(this).hide();        
  });
});​
</script>
0
votes

You can probably avoid issues like this if you just put the JavaScript in an external file.