【问题标题】:Spring Dynamic (Expandable) List formSpring 动态(可扩展)列表表单
【发布时间】:2011-07-27 13:48:59
【问题描述】:

我在春季遇到动态表单问题。在我们的表单中,我们要指定一个标题, 并添加一些问题。我们有一个“添加”按钮来添加问题输入表单 jQuery。

我们的表单在请求时有一个问题字段。每次都添加额外的字段 “添加”按钮被按下。提交时似乎没有额外的字段 提交(第一个由控制器接收)。为什么没有发送额外的字段received

我的代码大致基于this dynamic binding list example

我的模型包含一个“报告”类,它有一个 “标题”和“研究问题”列表。
下面是两个模型类的简短版本。 Roo 负责所有的 getter 和 二传手

@Entity
@RooJavaBean
@RooEntity
public class Report{
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "id")
    private Long id;

    @NotEmpty
    private String title;

    @OneToMany(mappedBy="report")
    private List<Researchquestion> researchquestions;
}



@Entity
@RooJavaBean
@RooEntity
public class Researchquestion {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column(name = "id")
    private Long id;    
    @NotEmpty
    private String question;
}

这里是表单的jspx

<div xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:form="http://www.springframework.org/tags/form"
    xmlns:jsp="http://java.sun.com/JSP/Page"
    xmlns:fn="http://java.sun.com/jsp/jstl/functions"
    xmlns:spring="http://www.springframework.org/tags"
    version="2.0">
    <jsp:output omit-xml-declaration="yes"/>

    <spring:url value="/admin/report/appendquestion" var="insert_url"/>

    <script type="text/javascript">
    $(document).ready(function() {
        var questionPosition = 0;
        $("#addQuestionButton").click(function() {
            questionPosition++;

            $.get("${insert_url}", { fieldId: questionPosition},
                function(data){
                    $("#insertAbove").before($(data));
            });
        });
    });
    </script>

    <div class="list_overview_box span-19">
        <spring:url value="/admin/report/" var="form_url"/>
        <div class="list_overview_content">
            <table>
                <form:form action="${form_url}" method="post" modelAttribute="report">
                    <tr>
                        <th class="span-3">Veld</th>
                        <th>Waarde</th>
                        <th class="span-5">Errors</th>
                    </tr>

        <!-- Title -->
                    <tr class="row">
                        <td class="vmiddle aleft">Title</td>
                        <td><form:input path="title" /></td>
                        <td></td>                           
                    </tr>

           <!-- the "add" button -->
                    <tr class="row">
                        <td class="vmiddle aleft">Researchquestions</td>
                        <td colspan="2"><input type="button" id="addQuestionButton" value="Add question" /></td>
                    </tr>
           <!-- First Researchquestion -->
                    <spring:bind path="researchquestions[0].question">
                        <tr class="row">
                            <td class="vmiddle aleft">Question 1</td>
                            <td><form:input path="${status.expression}" /></td>
                            <td></td>                           
                        </tr>
                    </spring:bind>

        <!--  Save button, extra question's are added here -->
                    <tr id="insertAbove" class="row">
                        <spring:message code="button.save" var="form_submit"/>
                        <td colspan="3"><input id="proceed" type="submit" value="${form_submit}" /></td>
                    </tr>   
                </form:form> 
            </table>
        </div>
    </div>
</div>

下面是控制器在 jquery .get 请求后返回的页面 我的想法是我需要像上面的表格一样使用&lt;spring:bind&gt;。 但是,当我这样做时,我得到一个错误:

java.lang.IllegalStateException: 既不是 BindingResult 也不是普通的 bean 名称“researchquestions[1]”的目标对象可作为请求提供 属性

追加问题.jspx

<jsp:root version="2.0"
    xmlns:jsp="http://java.sun.com/JSP/Page"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:tiles="http://tiles.apache.org/tags-tiles"
    xmlns:form="http://www.springframework.org/tags/form"
    xmlns:spring="http://www.springframework.org/tags"
    xmlns:roo="urn:jsptagdir:/WEB-INF/tags" >

    <tr class="row">
        <jsp:directive.page contentType="text/html;charset=UTF-8" />   

        <td class="vmiddle aleft">Question ${questionNumber +1}</td>
        <td>
            <form:input path="report.researchquestions[${questionNumber}].question" size="40" />
        </td>
        <td></td>
    </tr>

</jsp:root>

这里是我们控制器中相关的@ModelAttribute 和@requestmapping 方法 @ModelAttribute 方法确保 List 的实例 AutoPopulatingList,但我不确定这是否是必需的。
如果我将 @RequestParam Map formdata 添加到 create() (POST) 方法中,那么 formdata 会 包含 researchquestions[0].question 但不包含 researchquestions\[1\].question 或任何其他问题字段 按“添加”按钮后添加的内容

@ModelAttribute("report")
public Report getReport(Long id) {
    Report result;
    if(id != null){
        result = Report.findReport(id);
    } else{
        result = new Report();
    }

    //Make sure the List in result is an AutoPopulatingList
    List<Researchquestion> vragen = result.getResearchquestions();
    if(vragen == null){
        result.setResearchquestions(new AutoPopulatingList<Researchquestion>(Researchquestion.class));
    } else if(!(vragen instanceof AutoPopulatingList)){
        result.setResearchquestions(new AutoPopulatingList<Researchquestion>(
                vragen, Researchquestion.class));
    }

    return result;
}

/**
 * Aanmaken Report
 * @param report
 * @param result
 * @param modelMap
 * @return
 */
@RequestMapping(method = RequestMethod.POST)
public String create(@Valid @ModelAttribute("report") Report report,
        BindingResult result, ModelMap modelMap) {

    if (report == null) throw new InvalidBeanException("A report is required");

    if (result.hasErrors()) {
        modelMap.addAttribute("report", report);
        return "admin/report/create";
    }

    report.persist();

    //create questions
    for(Researchquestion question : report.getResearchquestions()){
        question.setProfielwerkstuk(report);
        question.persist();
    }

    report.merge();
    return "redirect:/admin/report";
}

@RequestMapping(value = "/appendquestion", method = RequestMethod.GET)
public String appendResearchquestionField(@RequestParam Integer fieldId, ModelMap modelMap){
    modelMap.addAttribute("questionNumber", fieldId);
    return "admin/report/appendquestion";
}

其他信息(应 Ralph 的要求)

在Spring生成的HTML下面,researchquestions[0].question默认是表单,点击“添加”按钮后添加researchquestions[1].question

 <tr class="row">
    <td class="vmiddle aleft">Question 1</td>
    <td>
        <input id="researchquestions0.question" type="text" value=""
             name="researchquestions[0].question">
    </td>

    <td></td>
</tr>

<tr class="row">
    <td class="vmiddle aleft">Question 2</td>
    <td>
        <input id="researchquestions1.question" type="text" size="40" value="" name="researchquestions[1].question">
    </td>
    <td></td>
</tr>

在 Live HTTP Headers 的相关信息下方
我在“标题”字段中输入了“这是标题”,在“问题 1”字段中输入了“这是第一个问题”,在“问题 2”字段中输入了“这是第二个问题”(已添加按“添加”按钮。

很明显,researchquestions[0].question 正在提交,但是在 POST 请求中根本没有提交 researchquestions[1].question。

Content-Type: application/x-www-form-urlencoded
Content-Length: 73
   title=This+is+the+title&researchquestions%5B0%5D.question=This+is+the+first+question

我的怀疑 第一个问题(即默认形式)与后续问题的区别在于,第一个问题使用&lt;spring:bind&gt;,而后续问题则不使用。当我删除第一个问题的&lt;spring:bind&gt; 标签时,researchquestions[0] 也没有提交。

如上所述,在将&lt;spring:bind&gt; 添加到 appendquestion.jspx 时,我得到了 IllegalStateException。似乎 spring 搜索对象researchquestions[1] 而不是report.researchquestions[1]

java.lang.IllegalStateException: 既不是 BindingResult 也不是普通的 bean 名称“researchquestions[1]”的目标对象可作为请求提供 属性

【问题讨论】:

  • Fritsie:请使用任何 html 工具(例如 Firebug/Network、Firefox Http Live Headers...)检查参数 onderzoeksvragen[0] 和 onderzoeksvragen[1] ... 是否提交.并将您的观察结果添加到您的问题中。 ——因此可以确定问题出在客户端还是服务器端。 -- 请为 2 个项目添加 html 输出的 sn-p。
  • 我添加了您要求的信息,第二个研究问题“研究问题[1]”未提交。我将荷兰语术语翻译成英文,例如“onderzoeksvragen”现在是“researchquestion”
  • 为什么当用户按下“添加”按钮而不是仅仅在客户端(在 JavaScript 中)构造 HTML 元素时,您要求将额外的 HTML 添加到表单中?在通过 AJAX 检索内容时尝试调用 &lt;spring:bind&gt; 时会收到 IllegalStateException,因为没有将表达式绑定到的命令/表单对象 - 因为这是一个完全独立的请求。
  • 如果这真的是 HTML 并且 Http Post 是用于两个输入字段都有值的地方,那么我不明白原因。 -- 您是否使用一些dojo 小部件扩展了这些字段? (然后我会尝试删除它们) - 如果这没有帮助,那么我会将第二个字段添加到初始表单(ajax relaod),测试它是否有效,并且(如果有效)搜索差异工作和不工作版本之间的 HTML。
  • @Fritsie:matt b 是正确的绑定错误的原因 - 在第一步中,您可以将 &lt;form:input 替换为 norml html &lt;input name="researchquestions[1].question" /&gt;

标签: java jquery spring dynamic-forms


【解决方案1】:

我找到了未正确提交表单的原因。我在 firebug 中注意到以下 HTML:

<form id="researchquestion" method="post" action="/site/admin/researchquestion/"></form>

form标签立即关闭,所以spring生成的HTML不正确。 这似乎是因为表格在表格内切换&lt;table&gt;&lt;form:form&gt; 标记解决了这个问题。

原码

<table>
    <form:form action="${form_url}" method="post" modelAttribute="report">
         <!--  Code here -->  
    </form:form> 
</table>

工作版

<form:form action="${form_url}" method="post" modelAttribute="report">
    <table>
         <!--  Code here -->  
    </table>
</form:form>

&lt;table&gt; 中只允许使用与表格相关的标签,例如&lt;tr&gt; &lt;th&gt;&lt;td&gt;。这可能就是 Spring 立即关闭 &lt;form&gt; 标签的原因。

【讨论】:

  • 我的英雄!您的解决方案可能为我节省了一两天的时间,我的朋友为您点赞!!
猜你喜欢
  • 1970-01-01
  • 2019-09-23
  • 1970-01-01
  • 2018-02-23
  • 1970-01-01
  • 1970-01-01
  • 2017-02-16
  • 2010-12-30
  • 1970-01-01
相关资源
最近更新 更多