我正在显示一个数据库（通过HTML表和Ajax请求），通过点击一行，我想在一个模态中显示其内容。我通过列表框显示几个数据库内容。一切看起来都能正常工作，但我唯一的问题是，一旦我展示了一个Modal，其他的内容与第一个相同。 我试图在关闭模式时擦除模态的内容，但没有成功。这是我的功能。如果有人可以提供帮助，我们将不胜感激！ ：）
我遍历数据库并通过执行以下操作生成每一行：
for (var i=0; i < data.length; i ++) {
//headContent is an Array containing the names of the head columns
output = "<tr data-toggle='modal' data-target='#create-item' aria-hidden='true' onclick='openModal("" + dbname + "", " + (i+1) + ", headContent);' style='cursor:pointer;'>";
for (var j=0; j < data[i].length; j ++) {
output += "<td title='Click on the line to perform action.' style='text-align: center;'>" + data[i][j] + "</td>";
}
output += "</tr>";
$("#resultsAdmContent").append(output); //#resultsAdmContent is an empty DIV
}
我希望每次点击一行时都会生成一个Modal，使用下面的函数：
function openModal(dbname, line, titles) {
var titleTab = [];
var valueTab = [];
$.ajax({
type: "post",
url: "./php/readLine.php",
dataType: 'json',
data: { dbname: dbname, line: line },
success: function(data) {
for (var i=1; i < data.length; i ++) { // We don't need the 0, because it's the line number
data.forEach(function (a) {
Object.keys(a).forEach(function(key) {
a[key] = Number(a[key]) || a[key]; // Converts String in number (when a number appears)
});
});
}
lsTab = data[0];
var modalBegBlk = "<div class='modal fade' id='create-item' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>";
modalBegBlk += "<div class='modal-dialog'>";
modalBegBlk += "<div class='modal-content'>";
modalBegBlk += "<div class='modal-header'>";
modalBegBlk += "<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>";
modalBegBlk += "<h4 class='modal-title' id='myModalLabel'>Perform action in the database</h4>";
modalBegBlk += "<h5 class='control-label' for='title'>Line selected: " + line + "</h5>";
modalBegBlk += "</div>";
modalContent += modalBegBlk;
for (var k = 1; k < titles.length; k ++) {
modalContent += "<div class='modal-body' style='padding:3px;text-align:right;margin-right:33%;'>";
modalContent += "<label>" + titles[k] + " </label><input type='text' id='nameTab" + k + "' name='" + titles[k] + "' value='" + lsTab[k] + "'/>";
modalContent += "</div>";
titleTab[k] = titles[k];
valueTab[k] = lsTab[k];
}
var modalFooter = "<div class='modal-footer'><button type='button' class='btn btn-success' onclick='updateRecord("" + dbname + "", " + line + ");'>Update</button><button type='button' class='btn btn-info' onclick='cloneRecord("" + dbname + "", " + line + ");'>Clone</button><button type='button' class='btn btn-danger' onclick='deleteRecord("" + dbname + "", " + line + ");'>Delete</button><button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button></div>";
var modalEndBlk = "</div></div></div>";
modalContent += modalFooter;
modalContent += modalEndBlk;
$("#updateDBUI").append(modalContent);
},
error:function(request, status, error) {
console.log("Reading PHP database went wrong. Error " + request.responseText);
}
});
$('.modal').on('hidden.bs.modal', function (e) {
console.log("Modal hidden!");
titles = []; //DOESN'T WORK
lsTab = []; //DOESN'T WORK
});
}
我不知道如何清空模态。我试过$(".Modal").empty();没有效果。也许我在这里遗漏了一些东西，或者我做错了。请帮忙！谢谢！ ：）
答案 0 :(得分：1)
不是每次在jQuery中创建一个新的模态，你应该只在HTML标记中放入一个“create-item”模式。
<div class="container" id="updateDBUI">
<table class="table">
<tbody id="resultsAdmContent">
</tbody>
</table>
<div id="create-item" class="modal fade" tabindex="-1" role="dialog">
<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">Perform action in the database</h4>
<h5 id="modalLabel">Line selected:<span id="selectedLine"></span></h5>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
然后，当AJAX调用完成时，根据需要用什么内容/数据更新模态部分......
function openModal(dbname, line) {
var titleTab = [];
var valueTab = [];
$.ajax({
type: "POST",
url: "...",
dataType: 'json',
success: function(data) {
// ajax data returned
for (var i=1; i < data.length; i ++) { // We don't need the 0, because it's the line number
data.forEach(function (a) {
Object.keys(a).forEach(function(key) {
a[key] = Number(a[key]) || a[key]; // Converts String in number (when a number appears)
});
});
}
lsTab = data[0];
// update modal title content
$('#selectedLine').text(line);
// update modal body content
for (var k = 1; k < titles.length; k ++) {
modalContent += "<label>" + titles[k] + " </label><input type='text' id='nameTab" + k + "' name='" + titles[k] + "' value='" + lsTab[k] + "'/>";
titleTab[k] = titles[k];
valueTab[k] = lsTab[k];
}
$('.modal-body').html(modalContent);
// update footer content
var modalFooter = "<button type='button' class='btn btn-success' onclick='updateRecord("" + dbname + "", " + line + ");'>Update</button><button type='button' class='btn btn-info' onclick='cloneRecord("" + dbname + "", " + line + ");'>Clone</button><button type='button' class='btn btn-danger' onclick='deleteRecord("" + dbname + "", " + line + ");'>Delete</button><button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>";
$('.modal-footer').html(modalFooter);
},
error:function(request, status, error) {
..
}// end ajax return
});
}
通过这种方式，您可以在每次更改其内容时使用一种模式。
演示：https://www.codeply.com/go/LDLLNDGRR5
注意：在你的代码中，我没有看到titles=[]被设置在任何地方，所以我不知道那些数据是什么样的，但这应该可以让你开始。