Announcement Announcement Module
Collapse
No announcement yet.
Spring Webflow navigation with JQuery tabs Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • Spring Webflow navigation with JQuery tabs

    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

  • #2
    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>

    Comment

    Working...
    X