Question

I’m trying to use a submitToRemote button for webflow in my grails application. I’m using jquery to handle the ajax. I’ve created a custom taglib which alters the submitToRemote button to be within a web flow and attache the eventId as such…

def remoteWebFlowSubmit = {attrs, body ->

        def elementName = attrs['name'].replaceAll(/ /, "_")
        def button = submitToRemote(attrs, body) //<-- standard grails submitToRemote button

        button = button.replaceFirst(/data\:jQuery/, "data:\'_eventId_${elementName}=1&\'+jQuery")

        out << button
    }

This works in Fire Fox and Chrome but does not submit any form data in IE 9,8, or 7. The generated button looks like this in IE:

<input name="next" onclick="showSpinner('webFlowContainer');;jQuery.ajax({type:'POST',data:'_eventId_next=1&'+jQuery(this).parents('form:first').serialize(), url:'/MySite/MyController/run?execution=e3s1',success:function(data,textStatus){jQuery('#webFlowContainer').html(data);},error:function(XMLHttpRequest,textStatus,errorThrown){jQuery('#webFlowContainer').html(XMLHttpRequest.responseText);}});return false" type="button" value="Next"/>

What am i doing wrong? I see no errors in the JS console.

UPDATE:

1.) I’ve also added a grails filter to prevent the ajax response from being cached. Here is the filter:

class AjaxFilters {
    def filters = {
        all(controller:'*', action:'*') {
            before = {
                if (request.getHeader('X-Requested-With')?.equals('XMLHttpRequest')) {
                    response.setHeader('Expires', '-1')
                }
            }
        }
    }
}

Answer 1

The issue seems to be that I’m calling the onclick="showSpinner('webFlowContainer'); on the same div that contains the form elements I’m trying to submit. If I use a different div to display a ajax spinner it works fine.

Thanks!