My goal is to select a row within a Table that is located inside a Modal window, and then have a button ('newBtn') within that Modal window trigger a post request to the server with the selected id of the row.
However, the issue I am encountering is that when the button is pressed, it sends multiple posts corresponding to every previous click on a row, instead of just sending one post with the selection of the last clicked row. For example, if rows 1, 2, and 3 have been previously clicked, the button will send 3 posts rather than only sending the data from the most recent click on row 3.
I suspect that there may be an incorrect placement of brackets in the code, but moving the button outside of the modal function results in it not firing at all. Any assistance would be greatly appreciated.
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 provide 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>