jquery submit triggers multiple times

Zeghra

The table that I'm using has nested tables in each row. I'm trying to submit data into this nested datatable. In the header of nested datatables there is also a button that opens a modal form. If submit is pressed on modal, it should trigger its click function only once, but it triggers multiple times and I don't know why. The first submit works good, but when I open again a modal after first submit and I submit new data, the itemForm still has content from previous submit and it places data into all rows that has previously submitted
ie
1. submit places new data to right row (nested datatable),
2. submit places new data to 1. submit row and to right row as well,
3. submit places new data to 1. and 2. submit row and to right row as well...

How can I clear itemForm?

Here is my code:
The modal form:
<form id="itemForm">
<div class="modal fade" id="newItemModal" 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">New Item</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <div class="form-group"> <label for="descInput" class="col-form-label">Desc</label> <input type="text" class="form-control" id="descInput"> </div> <div class="form-group"> <label for="dateInput" class="col-form-label">Date</label> <input type="date" id="dateInput" name="dateInput"> </div> <div class="form-group"> <label for="pcsInput" class="col-form-label">Pcs</label> <input type="number" class="form-control" id="pcsInput"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <input id="saveNewItem" type="submit" class="btn btn-primary" value="Save"></input> </div> </div> </div> </div> </form>

Creating nested table:
var tablemini = $('#' + id).DataTable({ ... dom: 'Bfrtip', buttons: [{ "text": '<i class="fa fa-plus-circle" aria-hidden="true"></i> New Item', "className": 'btn btn-success', "action": (e, dt, node, config)=>{ $('#newItemlModal').modal('show'); } }], ...

Submit itemForm:
$('#saveNewItem').on('click',( function(e) {
e.preventDefault();
var desc = document.getElementById('descInput').value;
var date = document.getElementById('dateInput').value;
var pcs = document.getElementById('pcsInput').value;
var data = {"desc ": desc , "date ":date , "pcs":pcs };
$.ajax({
url: '/szallitas/'+tetelIdString+'',
type: 'POST',
data: data,
success: function(data){
$('#newItemModal').modal('hide');
tablemini.row.add(data).draw(false);
}); } }));

Zeghra

I forgot to mention that I tried the
e.stopImmediatePropagation(); in the on click function, but it stops after submitting into first submit row and not at the last row that should actually be updated with new data.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Zeghra

Sorry, I don't know how to set my case on fiddle or bin. I'm using ejs and I am a beginner. Though I tried.
I use this table:
http://live.datatables.net/bihawepu/4370/edit
but with this format(d) function:
function format ( d ) {
return '<table id="'+d._id+'" cellpadding="5" cellspacing="0" border="0"
style="padding-left:50px;">'+
'</table>';
}

After this part:
else {
// Open this row
row.child( format(row.data()) ).show();

comes my nested table,

var id = row.data()._id;
var tablemini = $('#' + id).DataTable({...

which is like this:
https://datatables.net/examples/api/form.html

I'm adding data to nested table like this:
https://datatables.net/examples/api/add_row.html

I don't know how to add id for the form. Since $('#itemForm') is used always and not with individual id, the data accumulates in the $('#itemForm') form.

allan

I'm not seeing a submit anywhere in the code in your live example?

My guess is that the submit event handler is being added twice, but without a test case showing the issue I'm afraid I really don't know for sure.

Allan

Zeghra

It seems I found the answer, though I'm facing different problem now.
I used this example http://live.datatables.net/bihawepu/4370/edit The var row I used is referring to main table row, and I used its id.
My solution was this:
In the nested table, for the button in the header I added the row's id to className value
buttons: [{
"className": 'btn btn-success '+row.data()._id,
I made a global variable for this id in
$(document).ready(function() {
var globalRowId;
In the buttons' action I get the className's substring (the row id) and set this as the globalRowId
buttons: [{
"action": (e, dt, node, config)=>{
var className = node[0].className;
globalRowId = className.substring(33,className.length); I know it's not nice, the split to last indexof('.') didn't work somehow
So when button in header is pressed, the action sets the rowid to globalrowid and opens modal.
When on modal, the Save button is pressed its function checks if current row.data()._id equals to global row id, then it saves only to row where modal was opened (New Item button in tablemini header was pressed).
$('#saveNewItem').on('click',(e)=>{
e.preventDefault();
if (row.data()._id == globalRowId) {
var desc = document.getElementById('descInput').value;
var date = document.getElementById('dateInput').value;
var pcs = document.getElementById('pcsInput').value;
var data = {"desc ": desc , "date ":date , "pcs":pcs };
$.ajax({
url: '/szallitas/'+tetelIdString+'',
type: 'POST',
data: data,
success: function(data){
$('#newItemModal').modal('hide');
tablemini.row.add(data).draw(false);
}); } }));
My problem now is that
tablemini.row.add(data).draw(false);
does not handle the buttons in this row. Should the added data contain this?

Zeghra

@allan I found the live example on net, it's not mine, I couldn't fit completely to my table, since I have nested table and not extended rows. My submit is in modal (original question). There is a button:
<input id="saveNewItem" type="submit" class="btn btn-primary" value="Save"></input>
This calls the
$('#saveNewItem').on('click',(e)=>{
on click function.

colin

We need the test case to be able to debug the issue, so it needs to demonstrate the problem you want help with. Is that the case with yours? If so, please can you provide step-by-step instructions on how to reproduce the problem,

Colin

Zeghra

@colin I solved all issues with this case, though I appreciate your effort.
I also solved the Edit/Delete button functions for newly added rows (save new item). Now they function too.
In the $('#saveNewItem').on('click',(e)=>{ function after saving data on server side (main table row id, desc, date, pcs), so after ajax success when saved item has id, I put in ajax success the buttons function:
delete function
$('#delete'+itemId).on('click',(function(){
$.ajax({
url: '/deleteitem/'+itemId+'',
type: 'post',
data: itemId,
success: (data)=>{
tablemini.row($(this).parents('tr')).remove().draw();
}
});
}));

edit function
$('#edit'+itemId).click(()=>{
var desc = document.getElementById('desc'+itemId);
var date = document.getElementById('dateinput'+itemId);
var pcs = document.getElementById('pcsinput'+itemId);
var data = {tableitemId: item.tableitemId, desc: desc.value,
date: date.value, pcs: pcs.value}
$.ajax({
url: '/edititem/'+itemId+'',
type: 'post',
data: data,
success: (data)=>{
}
});
});

itemId is the id of nested table row and it comes from server side to ajax success after save (get data and made data.table.forEach((item, i) => {. tableitemId is the main table row's id which has the nested table (tablemini).
I'm using editable table for nested table, like this:
https://datatables.net/examples/api/form.html