Velocity - How to avoid ParseErrorException when using jQuery?

Question

I'm trying to add a jQuery post to some JavaScript on a web page. The entire page is built up of several Velocity templates. Everything has been fine until I've tried to add the jQuery post, now I get:

org.apache.velocity.exception.ParseErrorException: Encountered "," at line 282, column 24 of /WEB-INF/velocity/www/comments.vm
Was expecting one of:
    "(" ...
    <RPAREN> ...
    <ESCAPE_DIRECTIVE> ...
~~~snip~~~

Line 282 is $.post(... and column 24 appears to be the first "," character. Initially I had the JSON on this line, but I moved it up (to the var myJSONObject ... line)as I thought the error related to invalid JSON (tabs at the start of the line gave a misleading column number).

var myJSONObject = {"body": "", "action": "postcomment", "submitted": "true", "ajax": "true"};
myJSONObject.body = $("body").val();
$.post("$!{articleurl}", myJSONObject, function(result){            
    btn.textContent='Comment sent successfully.';  
});

---

Minor Update

I changed the following lines:

var url = "$articleurl";

$.post(url, myJSONObject, function(result){
~~~snip~~~

The parse exception still focuses on the first ",". I'm assuming the issue is that Velocity thinks it should be able to resolve $.post - when in fact, it's jQuery. I've used jQuery in other Velocity VM templates without any problem. Is there a way to get Velocity to ignore certain lines / statements when parsing?

---

Update 2

I found this link about escaping references in Velocity, but it does not resolve my issue. Adding a "\" before $.post gives me the exact same error, but the column is one extra, because of the character added at the start of the line.

Answer 1

You can wrap your javascript with #[[ ... ]]# which tells Velocity to not parse the enclosed block (new in Velocity 1.7)

#[[ 
<script>
    ...
</script>
]]#

Answer 2

Ok, there appears to be two solutions for this:

First, with jQuery we can just avoid using the global alias $ and instead use the jQuery object directly:

jQuery.post(url, myJSONObject, function(result){
~~~snip~~~

In my case, the above works great. But I suspect in other scenarios (non-jQuery) this may not be possible. In which case, we can 'hide' our character within a valid Velocity reference like this:

#set( $D = '$' )
${D}

Source: http://velocity.apache.org/engine/devel/user-guide.html#escapinginvalidvtlreferences

I'd still like to know why the backslash escape didn't work, but the above will at least get me moving again. :)

Answer 3

I think this is a bug in version 1.6.x, because it works fine in 1.7(If it did not, please tell me, I test it many times..), according to the reference, the $ takes effect only when it is followed by a-zA-Z. I want to try do debug what happened really, but the translation code is generated by Java CC tool, it is too hard to recognize the logic...

Answer 4

you must create a js file with your javascript code and import your js file into your vm code

Answer 5

I couldn't get it to work with any of the other fixes like escaping "$" in velocity unfortunately. I got it working by loading an external js-file with the jQuery instead of writing jQuery directly in velocity. Worked out for me at least, hope it helps someone :)

/björn