Javascript通过AJAX实现引导模式 [英] Javascript Implementing Bootstrap Modal via AJAX
问题描述
当前程序概念：使用传入的dataInput id填充页面，然后创建一个包含按钮<$的行的表格使用 onclick（）按下时调用函数 与dataInput id。 edit（）的c $ c> input type = submit
edit（）函数然后调用ajax调用 getData 与dataInput id值。 getData / 在查询调用后返回以及结果。 / editData 页面中。期望的输出：
- 使用传入的dataInput ID填充页面，然后创建一个表，其中包含一个按钮
input type = submit，用于调用函数edit（）当使用onclick（）与dataInput ID进行按压时。 -
edit（）函数使用ajax调用在屏幕上使用/ getData与dataInput id值在屏幕上创建引导程序4模式。 -
getData /在查询调用后返回并返回结果。然后
- 然后模态中的表单被动态地创建，并用数据填充到当前页面
- 然后模态中的表单被动态地创建，并用数据填充到当前页面
以下是我目前的功能：
函数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 =submitclass =btn btn-warningvalue =editonclick =edit（'+
dataInput.id +'）/>'））;
函数编辑（id）{
$ .ajax（{
类型：'GET'，
url：'/ getData？id = '+ id，
success：function（data）{
var dataInput = JSON.parse（data）[0];
window.location ='/ editData？id ='+ dataInput。 id;
$ b}
}）
}
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>名称：< / label>
< input type =textid =namename =nameplaceholder =>
< label for =description>说明：< / label>
< / form>
< div class =centerButton>
< input id =submitclass =btn btn-primarytype =submitvalue =Saveonclick =save（）/>
< / div>
< / div>
Bootstrap模式示例：
< div class =modal fadeid =exampleModaltabindex = - 1role =dialogaria-labelledby =exampleModalLabelaria-hidden =true>
< div class =modal-dialogrole =document>
< div class =modal-content>
< div class =modal-header>
< h5 class =modal-titleid =exampleModalLabel>模式标题< / h5>
< span aria-hidden =true>& times;< / span>
< / button>
< / div>
< div class =modal-body>
...
< / div>
< div class =modal-footer>
< button type =buttonclass =btn btn-secondarydata-dismiss =modal>关闭< /按钮>
< button type =buttonclass =btn btn-primary>保存更改< / button>
< / div>
< / div>
< / div>
< / div>
类似的问题，经过很多研究，我终于建立了一个js函数，根据我的需求动态创建模态。使用此功能，您可以在一行中创建弹出窗口，例如：
puyModal（{title：'Test Title'，heading：'Heading' ，message：'This is sample message。'））
或者您可以使用其他复杂功能，例如iframe，视频弹出窗口等。
您可能想要将它连接到您在ajax请求成功后调用的编辑函数。这样您就可以实时创建Modal，而不必担心在HTML中填充数据。
在 https://github.com/aybhalala/puymodals 上找到它对于演示，去 http://pateladitya.com/puymodals/
Current Program Concept:
- Page populates using the passed dataInput id which then creates a table with a row that has a button
input type=submitthat makes a call to the functionedit()when pressed usingonclick()with the dataInput id. - the
edit()function then makes an ajax call to the/getDatawith the dataInput id value. getData/returns after a query call and with the results.- Then the form is dynamically created and populated in the
/editDatapage.
Desired Output:
- Page populates using the passed dataInput id which then creates a table with a row that has a button
input type=submitthat makes a call to the functionedit()when pressed usingonclick()with the dataInput id. - the
edit()function then makes an ajax call to create a bootstrap 4 modal on the screen with/getDatawith the dataInput id value. getData/returns after a query call and with the results.- Then the form in the modal is dynamically created and populated in the current page with the data retrieved.
Here are my current functions:
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);
});
});
handler with the html form layout:
<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>
Bootstrap Modal Example:
<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>
I had a similar problem, after researching a lot, I finally built a js function to create modals dynamically based on my requirements. Using this function, you can create popups in one line such as:
puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})
Or you can use other complex functionality such as iframes, video popups, etc. You might want to link it up to your edit function that is being called after the ajax request is successful. This way you would be creating the Modal in real time and would not have to worry about populating data inside HTML. Find it on https://github.com/aybhalala/puymodals For demo, go to http://pateladitya.com/puymodals/
这篇关于Javascript通过AJAX实现引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
