当前计划概念:
- 使用传递的 dataInput id 填充页面,然后创建一个表,其中包含一个按钮
input type=submit
调用函数edit()
当使用带有 dataInput id 的onclick()
按下时。 edit()
函数然后使用 dataInput id 值对/getData
进行 ajax 调用。getData/
在查询调用后返回结果。- 然后在
/editData
页面中动态创建并填充表单。
期望的输出:
- 使用传递的 dataInput id 填充页面,然后创建一个表,其中包含一个按钮
input type=submit
调用函数edit()
当使用带有 dataInput id 的onclick()
按下时。 edit()
函数然后使用带有 dataInput id 值的/getData
进行 ajax 调用以在屏幕上创建 bootstrap 4 模态。getData/
在查询调用后返回结果。- 然后动态创建模式中的表单并在当前页面中填充检索到的数据。
这是我当前的功能:
function populateData(dataInput) {
var row = $('<tr id=' + dataInput.id + '/>');
$('#table').append(row);
row.append($('<td>' + dataInput.name + '</td>'));
row.append($('<td>' + dataInput.description + '</td>'));
row.append($(
'<td><input type="submit" class="btn btn-warning" value="edit" onclick="edit(' +
dataInput.id + ')"/>'));
}
function edit(id) {
$.ajax({
type: 'GET',
url: '/getData?id=' + id,
success: function(data) {
var dataInput = JSON.parse(data)[0];
window.location = '/editData?id=' + dataInput.id;
}
})
}
app.get('/getData', function(req, res) {
var content = {};
mysql.pool.query('SELECT * FROM dataTable WHERE id=?', [req.query.id],
function(err, rows, fields) {
if (err) {
next(err);
return;
}
content.results = JSON.stringify(rows);
res.send(content.results);
});
});
具有 html 表单布局的处理程序:
<div>
<form id="form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="">
<label for="description">Description:</label>
<textarea id="description" name="description" rows="4" cols="50"></textarea>
</form>
<div class="centerButton">
<input id="submit" class="btn btn-primary" type="submit" value="Save" onclick="save()" />
</div>
</div>
引导模式示例:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
最佳答案
我有一个类似的问题,经过大量研究,我终于建立了一个js函数来根据我的要求动态创建模态。使用此功能,您可以在一行中创建弹出窗口,例如:
puyModal({title:'测试标题',heading:'标题',message:'这是示例消息。'})
或者您可以使用其他复杂的功能,例如 iframe、视频弹出窗口等。 您可能希望将其链接到 ajax 请求成功后调用的编辑功能。这样您就可以实时创建模态,而不必担心在 HTML 中填充数据。 在 https://github.com/aybhalala/puymodals 上找到它如需演示,请访问 http://pateladitya.com/puymodals/
关于Javascript 通过 AJAX 实现 Bootstrap Modal,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49312658/