Grails WebFlow with Ajax - ajax

Question

I am trying to transition to next state of a WebFlow using Ajax requests. But it stays in the same state and returns the GSP as response for that state while I am expecting the GSP for the next state.
Following is the WebFlow code:
def gettingStartedAjaxFlow = {
flow1 {
on("next") {
println "flow1"
}.to("flow2")
on("skip").to("flow2")
}
flow2 {
on("next") {
println "flow2"
}.to("flow3")
on("skip").to("flow3")
}
flow3 {
on("next"){
println "flow3"
}.to("finish")
on("skip").to("finish")
finish {
redirect(action:"index")
}
}
}
Following is the Ajax call I am making for the state transition:
$.ajax({
type: "POST",
url: "/UN/user/gettingStartedAjax",
success: function(data) {
$("#wizardDiv").html(data);
}
});
The GSPs for each state (flow1, flow2, flow3) contains a a code fragment having remoteForm & required next and skip submit buttons to transition to next state and as a result update the "wizardDiv" div. Following is the GSP fragment for flow1 state:
<g:formRemote name="flow1Form" url="[controller:'user', action:'gettingStartedAjax']" update="wizardDiv">
<p>You are in flow 1</p>
<g:submitButton name="next" value="Next Flow" />
<g:submitButton name="skip" value="Skip Flow" />
</g:formRemote>

Answer 1

I'm stuck on the same problem, Nearly figured it out,
what you need to do, is send back the Grails webflow "_flowExecutionKey" that keeps
track of the current state,
I'm sure you've seen this, as its the only decent result Google finds.
I send an ajax request to an action, which populates a template and sends it back
with an input tag,
<input id="flowExecutionKey" name="_flowExecutionKey" value="${request.flowExecutionKey}" size="100"/>
But you could try send a temple back marked up like JSON with the "_flowExecutionKey" along with the data you want to send back,
That's my two cents

Answer 2

As well as keeping track of the execution (as Daxon posted), you'll need to make sure your buttons are named _eventId_next and _eventId_skip. g:submitbutton is normally clever enough to do this for you but it might not be inside of a remoteForm.
Also, my web flow code uses the parameter execution, not flowExecutionKey - which version of Grails are you using?

Answer 3

Here a solution that works in grails 2.5.3 at least for one single action. The id and name of the button are automatically modified to include "eventId" as prefix but this still did not work for me unless I added _event_id manually as input parameter. However, I'm not sure how this can work for multiple possible events.
<g:formRemote name="flow1Form" url="[controller:'user', action:'gettingStartedAjax']" update="wizardDiv">
<input type="hidden" id="execution" name="execution" value="${request.flowExecutionKey}"/>
<input type="hidden" id="_eventId" name="_eventId" value="next"/>
<fieldset class="form">
</fieldset>
<fieldset class="buttons">
<g:submitButton name="next" value="Next flow"/>
</fieldset>
</g:formRemote>