如何解决JSP / Spring MVC-如何使用添加到模型中的元素动态填充列表javascript / jQuery
首先,我很抱歉,如果这个问题不够清楚。如果方便的话,我将对其进行编辑,以查看将来是否对其他人有帮助。
我在JSP中有一个绑定到Spring MVC模型的表单,该表单将检索用户输入的信息。 问题是,在以下示例中,我将允许多个提交/条目作为列表(电影)传递。每次用户单击“添加”时,这些字段都会被克隆以允许一个新条目(并且以前的字段被隐藏/删除)。最后,当单击Submit(提交)时,表单将发布到控制器以持久保存数据。
一切正常。我要实现的是创建一个列表,该列表动态显示用户每次单击“添加”时要添加的所有条目。
这就是我要使用的列表(这里为了简单起见,只有一个字段)
<form:form id="myForm" method="post" modelAttribute="cinema" action="submitMovies">
<!-- List to be filled dynamically with elements from my model (now empty) ->
<div id="files" class="list-section collapse in">
<div class="item-list-container" id="groupedList">
<div class="labels">
<div class="item">Title</div>
</div>
<div class="grey-background">
<c:forEach items="movies" var="movie" varStatus="loop" >
<div class="itemContainer">
<div class="subGroup ">
<div class="item " id="">Want to display names entered in form here i.e fourth row would show content of movies[3].movieName</div>
</div>
</div>
</c:forEach>
</div>
</div>
</div>
(不是我的问题真正需要的,但可以想象我的模型是带有List电影的Cinema类; 而且Movie.class将具有String movieName属性。)
我有该forEach,但是单击“添加”后,列表未添加行。因此很明显,这并没有刷新其内容。
使用一个字段和“添加”按钮添加下面的其余表单。
添加按钮仅克隆克隆项div中的内容,并更改字段的ID。例如:
<form:input id="movieName${loop.index}" path="movies[${loop.index}].movieName"
最初是id =“ movieName0”绑定到movies [0] .movieName,添加后,创建了一个新元素,并将movieName1绑定到movie [1] .movieName
同样,它工作正常。我唯一要寻找的是一种方式,当我单击“添加”并创建元素(movieName1绑定到电影[1] .movieName)时,动态地在该列表/表中显示一个新行,其中包含具有以前格式的信息(movieName0绑定到movie [0] .movieName)
<!-- List to be filled dynamically with elements from my model (now empty) ->
<div id="files" class="list-section collapse in">
<div class="item-list-container" id="groupedList">
<div class="labels">
<div class="item">Title</div>
</div>
<div class="grey-background">
<c:forEach items="movies" var="movie" varStatus="loop" >
<div class="itemContainer">
<div class="subGroup ">
<div class="item " id="">Want to display names entered in form here</div>
</div>
</div>
</c:forEach>
</div>
</div>
</div>
<!-- Start Clone Item -->
<div class="cloneList" data-count="${movies.size() + 0}">
<c:forEach items="movies" var="movie" varStatus="loop" begin="0" >
<!-- Cloned item -->
<div class="cloneItem" id="innerItem${loop.index}">
<div id="movieNameField${loop.index}" class="form-group">
<label for="movieName${loop.index}">NAME</label>
<div class="status-container">
<form:input id="movieName${loop.index}" path="movies[${loop.index}].movieName" maxlength="35" class="form-control"/>
</div>
<form:errors path="movies[${loop.index}].movieName" cssClass="errorShow" element="div"/>
</div>
</div>
</c:forEach>
</div>
<!-- End Clone -->
<div class="row">
<div class="col">
<a class="btn btn-primary" href="javascript:void(0)" id="addMovie" onclick="addMovie()"><spring:message code="button.add" /></a><br>
</div>
</div>
<!-- More code to submit form etc -->
</form:form>```
**EDIT:** addMovie() content added as requested.
function addMovie() {
var target = $('.cloneList');
//Keep track of number of movies
var listCount = $('.cloneList').attr("data-count");
var innerItem = $('div[id^="innerItem"]:last');
var num = parseInt(innerItem.prop("id").match(/\d+/g),10) + 1;
$('.cloneList').attr("data-count",num);
var clone = innerItem.clone().prop('id','innerItem' + num).find("input:text").val("").end();
clone.find('#movieName' + listCount).attr("name","movies[" + num + "].movieName").attr("id","movieNameField" + num).text("");
clone.find('#movieNameField' + listCount).attr("id","movieNameField" + num).text("");
target.append(clone);
解决方法
您可以循环输入的values
,然后将这些值添加到需要显示名称的div中。在下面的代码中,我使用了<ul></ul>
标签来显示div中的列表,但在这里可以添加与您生成的名称相同的输入字段,以便将其绑定到所需的值。
我已经对您的jquery代码进行了一些更改,因为以前它没有正确地附加输入。因此,我已更正了这一点,现在每行都将附加在cloneItem
内。
演示代码 :
function addMovie() {
var values = ""; //declare this
//Keep track of number of movies
var listCount = $('.cloneList').attr("data-count");
var innerItem = $('div[id^="innerItem"]:last');
var num = parseInt(innerItem.prop("id").match(/\d+/g),10) + 1;
$('.cloneList').attr("data-count",num);
var clone = innerItem.clone().prop('id','innerItem' + num).find("input:text").val("").end();
//added this to show label attr correct value
clone.find("label").attr("for","movieNameField" + num)
clone.find('#movieName' + listCount).attr("name","movies[" + num + "].movieName").attr("id","movieNameField" + num).attr('path',"movies[" + num + "].movieName").text("");
clone.find('#movieNameField' + listCount).attr("id","movieNameField" + num);
clone.insertAfter("div.cloneItem:last")
values = "<ul>"
//loop through all inputs
$(".cloneItem").find("input.values").each(function() {
//check if values ! =null
if ($(this).val() != "") {
//append
values += "<li>" + $(this).val() + " </li>"
}
})
values += "</ul>"
//add values to div
$("#displays").html(values)
}
li {
font-size: 14px;
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="files" class="list-section collapse in">
<div class="item-list-container" id="groupedList">
<div class="labels">
<div class="item">Title</div>
</div>
<div class="grey-background">
<div class="itemContainer">
<div class="subGroup">
<!--added id-->
<div class="item " id="displays">Want to display names entered in form here</div>
</div>
</div>
</div>
</div>
</div>
<!-- Start Clone Item -->
<div class="cloneList" data-count="1">
<!-- Cloned item -->
<div class="cloneItem" id="innerItem1">
<div id="movieNameField1" class="form-group">
<label for="movieName1">NAME</label>
<div class="status-container">
<!--added extra class=values-->
<input id="movieName1" path="movies[1].movieName" maxlength="35" value="Movies1" class="form-control values" />
</div>
<form:errors path="movies[1].movieName" cssClass="errorShow" element="div" />
</div>
</div>
</div>
<!-- End Clone -->
<div class="row">
<div class="col">
<a class="btn btn-primary" href="javascript:void(0)" id="addMovie" onclick="addMovie()">
Add
</a><br>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。