我试图在一个模式窗口中的表中选择一行,然后让该模式窗口中的一个按钮('new btn')使用该行的选定id向服务器发送post请求。 该按钮应在按下时发送最后选定行的数据,但它发送的帖子数与先前单击某行的次数相同(而不是仅发送最后一个)。因此,如果先前单击了第1,2,3行,它将发送3个帖子,而不是仅发送1个第3行选择的帖子。
我怀疑括号放置不正确,但当将该按钮置于模态函数之外时,它根本不会触发。 任何帮助都不胜感激。
null
var table= $('#example').DataTable();
var tableBody = '#example tbody';
var form = new FormData();
$(document).ready(function() {
$(tableBody).on('click', 'tr', function () {
var cursor = table.row($(this));//get the clicked row
var selected_id = cursor.data()[0];// this will give the id in the current row.
$('#myModal').on('shown.bs.modal', function (event) {
$("#testbutton").trigger("click");
});
$("#newBtn").on("click",function(){
form.set("selected_id", selected_id);
var settings = {
"url": "http://127.0.0.1:5000/test",
"method": "POST",
"timeout": 0,
"processData": false,
"mimeType": "multipart/form-data",
"contentType": false,
"data": form
};
$.ajax(settings).done(function (response) {
console.log(response);
});
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog" style="min-width: 1080px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="display" id="example" style="text-align: center; width: 100%">
<thead>
<tr>
<th>id</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>'2020-06-01'</td>
</tr>
<tr>
<td>2</td>
<td>'2020-06-02'</td>
</tr>
</tbody>
</table>
</div>
<button type="button" id="newBtn" class="btn btn-sm btn-info">Send post</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
null
var table= $('#example').DataTable();
var tableBody = '#example tbody';
var form = new FormData();
在里面使用这个代码
$(document).ready(function() { });
并删除下面的脚本
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
标题中的脚本实际上是
null
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>