Prototype/JQuery mixup with Grails formRemote

Question

I'm trying to rearrange certain of my forms and I have a weird issue with one of them. I've always used jquery instead of prototype so the jquery plugin is installed and configured, my layout has a <g:javascript library="jquery" plugin="jquery"/> tag in its head, and Config.groovy contains the grails.views.javascript.library="jquery" line. So far so good.

Now I have ag:formRemote declared like this in my page:

<g:formRemote id="signUpForm" name="signUpForm" 
    url="[controller:'user', action:'register']" 
    onLoading="showRegistrationProgress()" 
    onComplete="hideRegistrationProgress()" 
    onSuccess="processRegistrationResponse(data)">
...
</g:formRemote>

But when I click the submit button, it completely bypasses the jquery event handlers and does a standard non-ajax submit.

When I look at the javascript debugger in Chrome, I notice the following error message when I submit my form: "Ajax not defined". And indeed when I look at the generated HTML, I see that the form looks like this:

<form onsubmit="new Ajax.Request('/kodesk/user/register',...)" 
    method="POST" 
    action="/kodesk/user/register" 
    id="signUpForm" name="signUpForm">
....
</form>

Where does this "new Ajax.Request" come from? Isn't it prototype code?

Answer 1

Try throwing moving the <g:javascript library="jquery" /> down into your view instead of the layout. I've noticed this solves the issue for me in the past. Also try running a clean before you try the run-app again.

Answer 2

I found a way to make it work after I read this post: http://grails.1312388.n4.nabble.com/newb-ajax-jquery-question-td1386031.html

I just added <g:setProvider library="jquery"/> to my page head, and now it works. I still don't know why it didn't work before but this solution is good enough for me.