说明:
我有一个asp.net应用程序,我可以通过单击按钮检索车辆信息。然后,车辆详细信息显示在模式屏幕中,其中包含以下数据:id、车辆名称、年份和车辆文档。
车辆文档显示在锚定标记中,锚定标记使用javascript创建。我的期望是,当我检索车辆详细信息时,将显示其相关的车辆文档,并在锚定标记中创建。如果检索到另一个车辆详细信息,也会在锚定标签中创建相关的车辆文档。
我遇到的问题是,当为车辆详细信息创建锚定标记时,我无法在下次检索其他车辆详细信息时创建锚定标记。我已经在下面概述了我不断遇到的错误。
我在下面提供了完整的工作代码,包括我遇到的错误消息。希望有人能帮助我。
详细控制器:
DetailController:
[HttpPost]
public ActionResult GetDetail(int? id)
{
return _context.Vehicle.Where(v => v.ID == id).Select(x => new VehicleModel(){
ID = x.ID,
VEHICLENAME = x.VEHICLENAME,
YEAR = x.YEAR,
VEHICLE_DOCUMENTATION = x.VEHICLE_DOCUMENTATION
}).FirstOrDefault();
}
详细信息页面:
Button
------
<button type="button" data-toggle="modal" data-target="#detailModal" onclick="postData(id)"></button>
Modal window appears when button is clicked
-------------------------------------------
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="detailModalTitle">Vehicle Detail</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
ID: <label id="ID"></label><br />
VEHICLE NAME: <label id="VEHICLENAME"></label><br />
YEAR: <label id="YEAR"></label><br />
VEHICLE DOCUMENTATION: <label id="VEHICLE_DOCUMENTATION"></label><br />
</div>
</div>
</div>
</div>
AJAX POST to GetDetail method:
------------------------------
<script>
function postData(id) {
response = '';
$.ajax({
async: true,
type: "POST",
url: "/Detail/GetDetail",
data: { 'id': id},
success: function (xhr) {
response = xhr;
$('#ID').text(response.data.ID);
$('#VEHICLENAME').text(response.data.VEHICLENAME);
$('#YEAR').text(response.data.YEAR);
$('#VEHICLE_DOCUMENTATION').text(response.data.VEHICLE_DOCUMENTATION);
//Create anchor tags
if (response.data.VEHICLE_DOCUMENTATION.length !== 0) {
for (const doc of response.data.VEHICLE_DOCUMENTATION) {
const anchor = document.createElement('a');
const list = document.getElementById('VEHICLE_DOCUMENTATION');
const li = document.createElement('ol');
anchor.href = 'www.vehicledocumentationexample.com';
anchor.innerText = `${doc}`;
//THIS IS WHERE THE ERROR IS BEING FLAGGED:
li.appendChild(anchor);
list.appendChild(li);
}
//Delete/Remove elements
} else if (response.data.VEHICLE_DOCUMENTATION.length == 0) {
response.data.VEHICLE_DOCUMENTATION = [];
document.getElementById("VEHICLE_DOCUMENTATION").outerHTML = "";
//WHAT I'VE TRIED:
//document.getElementById('VEHICLE_DOCUMENTATION').remove();
//document.getElementById('VEHICLE_DOCUMENTATION').outerHTML = "";
}
},
error: function (xhr) {
response = xhr;
}
})
}
</script>
浏览器错误消息:
Uncaught TypeError: Cannot read property 'appendChild' of null
at Object.success (...)
at fire (jquery.js:3240)
at Object.fireWith [as resolveWith] (jquery.js:3370)
at done (jquery.js:9061)
at XMLHttpRequest.<anonymous> (jquery.js:9303)
1条答案
按热度按时间dbf7pr2w1#
当你把:
您要做的是删除label元素,因此当您从
由于元素不再存在,它将返回null
您不应该使用“outerhtml”,而应该使用“innerhtml”,这是它们之间的区别: