我有一个jsp,我在浏览器的表格中看到保存在数据库中的结果,其中包含编辑,删除每一行的选项。我希望能够单击编辑链接,使用spring MVC和Hibernate从数据库中获取该特定客户的数据,并在编辑模式中显示该数据,以便用户可以查看数据并知道要编辑的内容。
以下是代码段,行
我看到了这个解决方案(Spring MVC Populate Modal Form),但它没有显示如何调用模式来填充ajax中的值。或者还有其他方法吗?有人可以帮忙,谢谢。
<c:forEach var="customer" items="${customers}" varStatus="status">
<tr>
<td><c:out value="${status.count}" /></td>
<td><a title="Go to the Company Certificate Detail">${customer.customerName}</a></td>
<td>${customer.contactName}</td>
<td>${customer.street}</td>
<td>${customer.state}</td>
<td>${customer.zipCode}</td>
<td>${customer.country}</td>
<td>${customer.email}</td>
<!--below line of code till end of tag </td> not showing on browser -->
<td>
<div class="btn-group">
<button type="button"
class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a data-toggle="modal"
data-target="#editCustomerModal">Edit Customer Detail</a></li>
<li><a data-toggle="modal" data-target="#deleteCustomerModal_${customer.id}" >Delete Customer</a></li>
</ul>
</div>
</td>
</tr>
<!--Delete Customer Modal -->
<div id="deleteCustomerModal_${customer.id}" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this Customer? </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<a href="${pageContext.request.contextPath}/delete?id=${customer.id}" title="Delete"><i class="fa fa-trash-o"></i>Delete</a>
</div>
</div>
</div>
</div>
</c:forEach>
我的编辑模式:
<!--Edit Customer Modal -->
<div id="editCustomerModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Create New Customer
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="form-table">
<tbody>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="pool-name">Customer Name:</label></td>
<td><input type="text" id="customerName" title="Company Name" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Contact Name:</label></td>
<td><input type="text" id="contactName" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">Street:</label></td>
<td><input type="text" id="street" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="description">State:</label></td>
<td><input type="text" id="state" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Zip-Code:</label></td>
<td><input type="text" id="zipCode" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Country:</label></td>
<td><input type="text" id="country" path="#"
class="form-control" /></td>
</tr>
<tr valign="top">
<td style="width: 25% !important;"><label
class="not-required" for="expire-after">Email:</label></td>
<td><input type="text" id="email" path="#"
class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div>
<input type="submit" id="createNewCustomer" value="Save"
class="btn btn-default" onClick="alert('To be Implemented');" />
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
尝试此操作,在编辑模型中为客户ID添加隐藏值
<input type="hidden" id="customerId" path="customerId" class="form-control" />
将提交按钮更改为普通按钮以保存客户。
<div class="modal-footer">
<div>
<button type="button" class="btn btn-default updateCustomer" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
你可以玩js,特别是在ajax中,
<script type="text/javascript">
function ajaxCall(customerId) {
$.ajax({
type: "POST",
url: "/clause/getUpdate?customerId="+customerId ,
success: function(result) {
//populate customer list page again..
}
}
});
$('.updateCustomer').on('click', '.accountsEmployees', function () {
customerId=$("#customerId").val();
ajaxCall(customerId);
}
</script>