Spring WebFlow2 Javascript 仅适用于第一个单选按钮答案

【问题标题】：Spring WebFlow2 Javascript only working on first radio buttonSpring WebFlow2 Javascript 仅适用于第一个单选按钮
【发布时间】：2012-08-30 11:31:17
【问题描述】：

Spring WebFlow2 Javascript 仅适用于第一个单选按钮

如果用户单击其中一个单选按钮，我正在尝试使用 WebFlow2 附带的 Spring JavaScript 提交带有转换值的页面。

我使用 onclick 和 onchange 在页面上插入了我的 javascript，它仅在选择第一个单选按钮时才有效。我不知道为什么，但我想我什么都试过了……有人可以告诉我这是否是 Spring JavaScript 的问题。

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="rowBtn" />Row: B<BR>
                    <form:radiobutton value="A" path="row" id="rowBtn" />Row: A<BR>
                    <script type="text/javascript">
            Spring.addDecoration(new Spring.AjaxEventDecoration({
                elementId: "rowBtn",
                event: "onchange",
                formId:"customer",
                params: {fragments:"body", _eventId: "proceed"}
            }));
        </script>

        <script type="text/javascript">
            Spring.addDecoration(new Spring.AjaxEventDecoration({
                elementId: "rowBtn",
                event: "onclick",
                formId:"customer",
                params: {fragments:"body", _eventId: "proceed"}
            }));
        </script>

        </td>
            </tr>
            <tr>
            <td>Year of Birth:</td>
            <td>
            <form:select path="byear">
            <form:option value="2012" label="2012" />
            <form:option value="2011" label="2011" />
            <form:option value="2010" label="2010" />
            </form:select>

        <script type="text/javascript">
            Spring.addDecoration(new Spring.AjaxEventDecoration({
                elementId: "byear",
                event: "onchange",
                formId:"customer",
                params: {fragments:"body", _eventId: "proceed"}
            }));
        </script>
        </td></tr>

        </table>
        <input type="submit" name="_eventId_proceed" value="proceed"
            id="proceed" />
            <input type="submit" name="_eventId_cancel" value="Cancel" />
    </form:form>

</body>
</html>

【问题讨论】：

标签： java javascript spring spring-mvc spring-webflow

【解决方案1】：

你有：

<form:radiobutton value="B" path="row" id="rowBtn" />Row: B<BR>
<form:radiobutton value="A" path="row" id="rowBtn" />Row: A<BR>

您的两个单选按钮具有相同的元素 ID。 AjaxEventDecoration 会根据该 elementId 进行查找。它假定它在页面上是唯一的，并且它不期望具有相同 id 的多个元素。你应该给第二个单选按钮另一个 id。

您可能也应该为该 ID 重新输入 AjaxEventDecoration。如果 Spring.AjaxEventDecoration 允许您基于元素类（而不是 elementId）做类似的事情，也许您可以这样做，而不是复制当前的 Spring.AjaxEventDecoration sn-p。

【讨论】：