Spring WebFlow2 JavaScript is not submitting page?

StackOverflow https://stackoverflow.com/questions/12284435

Question

Spring WebFlow2 JavaScript is not submitting page?

I am trying to use Spring JavaScript that comes with WebFlow2 to submitted my page with a transition value if the user clicks on one of the radio buttons. I inserted my javascript but the page is not getting submitted on the click?

JSP:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<html>
<head>
<title>Spring 3.0 MVC - Web Flow Example</title>

<script type="text/javascript"
    src="<c:url value="/resources/dojo/dojo.js" />">

</script>
<script type="text/javascript"
    src="<c:url value="/resources/spring/Spring.js" />">

</script>
<script type="text/javascript"
    src="<c:url value="/resources/spring/Spring-Dojo.js" />">

</script>

<link type="text/css" rel="stylesheet"
    href="<c:url value="/resources/dijit/themes/tundra/tundra.css" />" />
</head>
<body>
    <h2>Customer Registration</h2>

    <form:form commandName="customer" id="customer">
        <input type="hidden" name="_flowExecutionKey"
            value="${flowExecutionKey}" />
        <table>
            <tr>
                <td><font color=red><form:errors path="name" /></font><b>Name:
                </b></td>
                <td><form:input path="name" id="name" /> <script
                        type="text/javascript">
                    Spring
                            .addDecoration(new Spring.ElementDecoration(
                                    {
                                        elementId : "name",
                                        widgetType : "dijit.form.ValidationTextBox",
                                        widgetAttrs : {
                                            promptMessage : "This is the name you would like entered into the system."
                                        }
                                    }));
                </script> <br />
                    <p></td>
            </tr>
            <tr>
                <td><font color=red><form:errors path="phoneNumber" /></font>

                    <b>Phone number: </b></td>
                <td><form:input path="phoneNumber" id="phoneNumber" /><br />
                    <script type="text/javascript">
                        Spring
                                .addDecoration(new Spring.ElementDecoration(
                                        {
                                            elementId : "phoneNumber",
                                            widgetType : "dijit.form.ValidationTextBox",
                                            widgetAttrs : {
                                                promptMessage : "This is the phone number for the above name"
                                            }
                                        }));
                    </script></td>
            </tr>
            <tr>
                <td></td>
            </tr>
            <tr>
                <td><b>Row:</b></td>
                <td><form:radiobutton value="B" path="row" id="row" />Row: B<BR>
                    <form:radiobutton value="A" path="row" id="row" />Row: A<BR>
                    <script type="text/javascript">
                        Spring.addDecoration(new Spring.AjaxEventDecoration({
                            elementId : "row",
                            formId : "customer",
                            event : "onChange",
                            params : {
                                _eventId : "loadSchools",
                                fragments : "body"
                            }
                        }));
                    </script></td>
            </tr>
        </table>
        <input type="submit" name="_eventId_proceed" value="proceed"
            id="proceed" />
        <script type="text/javascript">
            Spring.addDecoration(new Spring.ValidateAllDecoration({
                elementId : 'proceed',
                event : 'onclick'
            }));
        </script>
        <input type="submit" name="_eventId_cancel" value="Cancel" />
    </form:form>

</body>
</html>
Was it helpful?

Solution

this is a part of my code that is working (form gets submitted), it is with a select instead of radiobutton but same idea. when you select a value it automatically submits the form and update the values:

<form:form commandName="dateRange">
...
    <select name="fyForDR" id="fyForDR" class='discretFont' style='margin-left:10px;margin-right:10px;'>
            <option value="" selected='selected'>Fiscal Year</option>
            <option value="2011" <c:if test="${fyForDR == '2011'}">selected="selected"</c:if> >FY11</option>
            <option value="2010" <c:if test="${fyForDR == '2010'}">selected="selected"</c:if> >FY10</option>
            <option value="2009" <c:if test="${fyForDR == '2009'}">selected="selected"</c:if> >FY09</option>
            <option value="2008" <c:if test="${fyForDR == '2008'}">selected="selected"</c:if> >FY08</option>
            <option value="2007" <c:if test="${fyForDR == '2007'}">selected="selected"</c:if> >FY07</option>
            <option value="2006" <c:if test="${fyForDR == '2006'}">selected="selected"</c:if> >FY06</option>
        </select>
        <script type="text/javascript">
            Spring.addDecoration(new Spring.AjaxEventDecoration({
                elementId: "fyForDR",
                event: "onchange",
                formId:"dateRange",
                params: {fragments:"body", _eventId: "setFy"}
            }));
        </script>
...
</form:form>

and here is part of the flow definition:

<view-state id="dateRangeForm" model="dateRange">
...
    <transition on="setFy" validate="false" >
                <set name="viewScope.fyForDR" value="requestParameters.fyForDR"/>
                <evaluate expression="dateRange.setStartDate(dateRangeService.getFyStartDate(viewScope.fyForDR))"></evaluate>
                <evaluate expression="dateRange.setEndDate(dateRangeService.getFyEndDate(viewScope.fyForDR))"></evaluate>
    </transition>
...
</view-state>

OTHER TIPS

try putting a different id for each of the rows like this:

    <td><form:radiobutton value="B" path="row" id="rowB" />Row: B<BR>
        <form:radiobutton value="A" path="row" id="rowA" />Row: A<BR>
        <script type="text/javascript">
              Spring.addDecoration(new Spring.AjaxEventDecoration({
                    elementId : "rowA",
                    formId : "customer",
                    event : "onChange",
                    params : {
                        _eventId : "loadSchools",
                        fragments : "body"
                        }
               }));
               Spring.addDecoration(new Spring.AjaxEventDecoration({
                    elementId : "rowB",
                    formId : "customer",
                    event : "onChange",
                    params : {
                        _eventId : "loadSchools",
                        fragments : "body"
                        }
               }));
        </script></td>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top