Spring Webflow navigation with JQuery tabs

**knoxor** · Oct 10th, 2012, 05:36 AM

Hi,

I've inherited an SWF application that I need to prepare for a demo.

I want to use JQuery tabs in my header tile and somehow be able to hook into the Spring webflow via some AJAX requests but am not sure how to do this.

Any help or pointers to more information on this would be greatly appreciated.

This is my main tile layout template. Basically I want to be able to click on the tab links and
be able to execute one of the flow steps.

Code:

<%@ taglib prefix="c"        uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn"       uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt"      uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring"   uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form"     uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="tiles"    uri="http://tiles.apache.org/tags-tiles" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="rtol"     tagdir="/WEB-INF/tags" %>

<%@ page contentType="text/html; charset=UTF-8" %>

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <base href="#">
        <link type="text/css" href="<c:url value="/static/jquery/css/ui-lightness/jquery-ui-1.8.24.custom.css"/>" rel="Stylesheet" />
        <script type="text/javascript" src="<c:url value="/static/jquery/js/jquery-1.8.2.min.js"/>"></script>
        <script type="text/javascript" src="<c:url value="/static/jquery/js/jquery-ui-1.8.24.custom.min.js"/>"></script>

    <script>
    $(function() {
        $( "#tabs" ).tabs({
            beforeLoad: function( event, ui ) {
                ui.jqXHR.error(function() {
                    ui.panel.html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. ");
                });
            }
        });
    });
    </script>

    </head>
    <body>
        <div id="centrecontent">
                <div id="tabs">
                    <ul>
                        <li><a href="#tabs-1">Tab1</a></li>
                        <li><a href="#">Tab2</a></li>
                        <li><a href="#">Tab3</a></li>
                        <li><a href="#">Tab4</a></li>
                    </ul>
                    <div id="tabs-1">
                        <tiles:insertAttribute name="content"/>
                    </div>
                </div>
        </div>
      </div>
  </body>
</html>

I've simplified my flow here and removed all views and models as well as any method calls.
This just contains the transitions and flows for reference.

Code:

<?xml version="1.0" encoding="UTF-8"?>

<flow xmlns="http://www.springframework.org/schema/webflow"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="
            http://www.springframework.org/schema/webflow
            http://www.springframework.org/schema/webflow/spring-webflow-2.0.xsd">

    <view-state id="stageOne" >
        <transition on="next" to="stageTwo"/>
        <transition on="cancel" to="cancel"/>
    </view-state>

    <view-state id="stageTwo" >
        <transition on="back" to="stageOne"/>
        <transition on="next" to="stageThree"/>
    </view-state>

    <view-state id="stageThree">
        <transition on="back" to="stageTwo"/>
        <transition on="next" to="stageFour"/>
    </view-state>

    <subflow-state id="stageFour">
        <transition on="confirm" to="confirm"/>
        <transition on="cancel" to="cancel"/>
    </subflow-state>

    <end-state id="confirm" commit="true" view="dashboard/index"/>

    <end-state id="cancel" commit="false" view="dashboard/index"/>

</flow>

thanks

**knoxor** · Oct 12th, 2012, 03:27 AM

I've managed to call the webflow from an ajax script for anyone else interested.

It seems that webflow serializes the form before a POST operation. The following should work and call stepTwo of my example flow. (flowExecutionUrl is provided by webflow).

Code:

<script>
var targetUrl = $("#formId").attr("action") +     '&_eventId_stageTwo=_eventId_stageTwo';
$.ajax({
    type : 'POST',
    data: $("#formId").serialize(),
    url : targetUrl
});
</script>

<form id="formId" action="${flowExecutionUrl}">

......


</form>

Thread: Spring Webflow navigation with JQuery tabs

Thread Tools

Display

Spring Webflow navigation with JQuery tabs

Tags for this Thread

Posting Permissions