【发布时间】：2017-09-15 17:30:15
【问题描述】：
ajax 和引导模式的新手，我正在尝试使用引导模式实现编辑功能。当用户单击编辑链接时，我需要将 DB 中的内容加载到模式中。我正在使用 ajax 执行此操作，下面是我如何实现它但是，我在浏览器上收到以下错误：
-script.js:62 Uncaught TypeError: Cannot read property 'on' of undefined at script.js:62（匿名）@script.js:62（我的 ajax 函数开始的行）
有人可以帮忙吗？谢谢。
代码片段：
我的 JSP：（加载模式的编辑链接）
<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>
<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" data-customer-id="${customer.id}">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 -->
</c:forEach>
我的编辑模式：（在forEach标签之外）
<!--Edit Customer Modal -->
<div id="createCustomerModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Edit Customer
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="form-table">
<tbody>
<tr>
<td><input type="hidden" id="customerId" path="#" class="form-control" /></td></tr>
<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>
我的 script.js：
$(document).on('shown.bs.modal','#editCustomerModal', function () {
var customerId = this.dataset.customerId;
var id = $('#customerId').val(customerId);
//var customerId= $('#customerId').val();
var customerName= $('#customerName').val();
var contactName= $('#contactName').val();
var email= $('#email').val();
var street= $('#street').val();
var zipCode= $('#zipCode').val();
var state= $('#state').val();
var country= $('#country').val();
$.ajax({
type: "post",
url: "/UtilityCertificateWebApplication/edit?id=" + customerId,
cache: false,
contentType:'application/json',
dataType: 'json',
data:"customerName="+ customerName + "&contactName=" + contactName + "&street=" + street +
"&state=" + state + "&zipCode=" + zipCode + "&country=" + country +"&email=" + email ,
success: function(response){
alert("inside edit modal");
var obj = JSON.parse(response);
$('#customerName').val(obj.userName);
$('#contactName').val(obj.userName);
$('#email').val(obj.userName);
$('#street').val(obj.userName);
$('#zipCode').val(obj.userName);
$('#state').val(obj.userName);
$('#country').val(obj.userName);
},
error: function(){
alert('Error while edit request..');
}
});
});
【问题讨论】：
标签： javascript jquery ajax spring bootstrap-modal