Grails WebFlow with 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?