[#GPJQUERY-6] submitToRemote not working with jQuery - Grails JIRA

Details

Type: Bug
Status: Closed
Priority: Major
Resolution: Fixed
Affects Version/s: None
Fix Version/s: Grails-jQuery 1.4.0.1
Component/s: None
Labels:
None

Description

submitToRemote tag does not serialize form inputs.
For example, with this form, the edit action can't find the id parameter

<g:form>
<g:hiddenField name="id" value="${produitInstance?.id}" />

<g:submitToRemote update="body" class="edit" action="edit" value="Edit" />


<g:submitToRemote update="body" class="delete" action="delete" value="Delete"
onclick="return confirm('Are you sure?');" />

</g:form>

Activity

Ascending order - Click to sort in descending order

Hide

Permalink

Nabil Adouani added a comment - 06/Jan/10 11:22 AM

i used Grails 1.2.0, and Grails jQuery Plugin version 1.3.2.4

Show

Nabil Adouani added a comment - 06/Jan/10 11:22 AM i used Grails 1.2.0, and Grails jQuery Plugin version 1.3.2.4

Hide

Permalink

Pedro Herrera added a comment - 09/Jan/10 4:07 PM

I have the same error. When I change to library="prototype" works fine. I´m using grails 1.2 and jQuery Plugin version 1.3.2.4

Herrera

Show

Pedro Herrera added a comment - 09/Jan/10 4:07 PM I have the same error. When I change to library="prototype" works fine. I´m using grails 1.2 and jQuery Plugin version 1.3.2.4 Herrera

Hide

Permalink

Nabil Adouani added a comment - 09/Jan/10 4:15 PM

when you change library to "prototype", you just tell to Grails to use "prototype" and not "jquery", the problem is that the generated jquery code in the input's onclick event doesn't serialize the form elements, but the input button itself.

try to add attributes (for example "id") to your submitToRemote tag, and it works fine : example:

<g:form>

<g:submitToRemote id="${produitInstance?.id}" update="body" class="edit" action="edit" value="Edit" />


<g:submitToRemote id="${produitInstance?.id}" update="body" class="delete" action="delete" value="Delete"
onclick="return confirm('Are you sure?');" />

</g:form>

Nabil

Show

Nabil Adouani added a comment - 09/Jan/10 4:15 PM when you change library to "prototype", you just tell to Grails to use "prototype" and not "jquery", the problem is that the generated jquery code in the input's onclick event doesn't serialize the form elements, but the input button itself. try to add attributes (for example "id") to your submitToRemote tag, and it works fine : example: <g:form> <g:submitToRemote id="${produitInstance?.id}" update="body" class="edit" action="edit" value="Edit" /> <g:submitToRemote id="${produitInstance?.id}" update="body" class="delete" action="delete" value="Delete" onclick="return confirm('Are you sure?');" /> </g:form> Nabil

Hide

Permalink

Finn Herpich added a comment - 09/Jan/10 4:42 PM - edited

Hey guys,

since jQuery 1.4 is coming out within the next weeks I'm working on the new version and will fix this issue.

Thanks for reporting

Cheers

Show

Finn Herpich added a comment - 09/Jan/10 4:42 PM - edited Hey guys, since jQuery 1.4 is coming out within the next weeks I'm working on the new version and will fix this issue. Thanks for reporting Cheers

Hide

Permalink

Mario added a comment - 17/Jan/10 9:42 AM - edited

I have the same issue. For the time being I use the following workaround. It is not nice but it works till the fix is made.
You can use the workaround if you have a delete button (which only needs the id attribute to submit) and an update button which has a couple of attributes needed by the form submit.

<g:formRemote name="productImageEditForm" url="[action: 'remoteUpdate']" update="productImageContainer">
    <g:hiddenField name="id" value="${productImageInstance?.id}" />
    <g:hiddenField name="version" value="${productImageInstance?.version}" />

...

    <div class="buttons">
        <span class="button"><input class="save" type="submit" value="${message(code: 'default.button.update.label', default: 'Update')}" /></span>
    	<!-- WORKAROUND for GRAILSPLUGINS-1824 -->
	<span class="button"><g:remoteLink action="remoteDelete" id="${productImageInstance?.id}" update="productImageContainer">${message(code: 'default.button.delete.label', default: 'Delete')}</g:remoteLink></span>
    </div>
</g:formRemote>

After the fix the following should work.

<g:form name="productImageEditForm">
    <g:hiddenField name="id" value="${productImageInstance?.id}" />
    <g:hiddenField name="version" value="${productImageInstance?.version}" />

...

    <div class="buttons">
        <g:submitToRemote class="save" update="productImageContainer" action="remoteUpdate" value="${message(code: 'default.button.update.label', default: 'Update')}" /></span>
        <g:submitToRemote class="delete" update="productImageContainer" action="remoteDelete" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" /></span>
	</div>
</g:form>

Thanks for your work, Finn!

Mario

Show

Mario added a comment - 17/Jan/10 9:42 AM - edited I have the same issue. For the time being I use the following workaround. It is not nice but it works till the fix is made. You can use the workaround if you have a delete button (which only needs the id attribute to submit) and an update button which has a couple of attributes needed by the form submit.

<g:formRemote name="productImageEditForm" url="[action: 'remoteUpdate']" update="productImageContainer">
    <g:hiddenField name="id" value="${productImageInstance?.id}" />
    <g:hiddenField name="version" value="${productImageInstance?.version}" />

...

    <div class="buttons">
        <span class="button"><input class="save" type="submit" value="${message(code: 'default.button.update.label', default: 'Update')}" /></span>
    	<!-- WORKAROUND for GRAILSPLUGINS-1824 -->
	<span class="button"><g:remoteLink action="remoteDelete" id="${productImageInstance?.id}" update="productImageContainer">${message(code: 'default.button.delete.label', default: 'Delete')}</g:remoteLink></span>
    </div>
</g:formRemote>

After the fix the following should work.

<g:form name="productImageEditForm">
    <g:hiddenField name="id" value="${productImageInstance?.id}" />
    <g:hiddenField name="version" value="${productImageInstance?.version}" />

...

    <div class="buttons">
        <g:submitToRemote class="save" update="productImageContainer" action="remoteUpdate" value="${message(code: 'default.button.update.label', default: 'Update')}" /></span>
        <g:submitToRemote class="delete" update="productImageContainer" action="remoteDelete" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" /></span>
	</div>
</g:form>

Thanks for your work, Finn! Mario

Hide

Permalink

Finn Herpich added a comment - 17/Jan/10 12:44 PM

Ok guys, I fixed the bug.
One more bugfix to go, a few tests and the release will come tomorrow =)

Show

Finn Herpich added a comment - 17/Jan/10 12:44 PM Ok guys, I fixed the bug. One more bugfix to go, a few tests and the release will come tomorrow =)

Hide

Permalink

Mario added a comment - 17/Jan/10 12:51 PM

Great!

Show

Mario added a comment - 17/Jan/10 12:51 PM Great!

People

Assignee:

Finn Herpich

Reporter:

Nabil Adouani

Vote (2)

Watch (2)

Dates

Created:

06/Jan/10 11:19 AM

Updated:

25/Mar/11 1:34 AM

Resolved:

17/Jan/10 12:44 PM