I am having trouble trying to do delete items from an array based on an id. If a user selects a checkbox the table row values are added to the array based on the row id. If a user unselects the checkbox, then the item should be deleted from the array based once again on the id.
However, what i happening, is that the array is getting populated correctly but if a user unchecks the box the id seems to be the id of the previous selection.
For example, I have 3 checkboxes. 1,2,3. If a user clicks boxes 2 and 3 it adds to array fine. If he then removes checkbox 2 it still has the value of 2 instead of 3. I think it has to do with hoisting.
I would be grateful if someone could check my code and help me to correct it. Many thanks
Added code to post
$(function () {
$(document).on('click', '#rowClk', function () {
jsonString = JSON.stringify(info);
//$("#rack").dialog("open");
console.log(jsonString);
//$("#rack").dialog("open");
});
});
$(function() {
info = [];
var id;
$(document).on('click', '.rowChk', function() {
if (this.checked) {
$('#rowClk').show();
var currentRows = $(this).closest("tr");
var rackid = currentRows.find("td:eq(0)").html();
// var rackidnumber = currentRows.find("td:eq(1)").html();
var rackservice = currentRows.find("td:eq(2)").html();
var rackactivity = currentRows.find("td:eq(3)").html();
var rackdept = currentRows.find("td:eq(4)").html();
var rackcompany = currentRows.find("td:eq(5)").html();
var rackaddress = currentRows.find("td:eq(6)").html();
var rackuser = currentRows.find("td:eq(7)").html();
var rackitem = currentRows.find("td:eq(8)").html();
var rackddate = currentRows.find("td:eq(9)").html();
var rackdate = currentRows.find("td:eq(10)").html();
id = rackid;
data = {};
data.rackids = id;
// data.idnumber = rackidnumber;
data.service = rackservice;
data.activity = rackactivity;
data.dept = rackdept;
data.company = rackcompany;
data.address = rackaddress;
data.user = rackuser;
data.item = rackitem;
data.intakedate = rackdate;
data.destroydate = rackddate;
info.push(data);
console.log(info);
} else {
var index = info.findIndex(function(item) {
return item.id === id;
});
if (index !== -1) {
info.splice(index, 1);
if (info.length === 0) {
$('#rowClk').css('display', 'none');
}
}
}
});
});
DataTables button
"fnDrawCallback": function()
{
$("#nirqst_info").append("<input style='float:left; margin-right: 17px; display:none;' type='button' id='rowClk' value='Action'>");
},
Datatables input
{ data: null, 'width': '20', render: function (data, type, row, meta)
{
if (type === 'display')
{
data = '<input type="checkbox" class="rowChk" name="rowChk[]" />';
}
return data;
}
},
html table
<table cellspacing="0" class="display stripe" id="nirqst" width="100%">
<!-- <caption>New Intake Requests</caption>-->
<thead>
<tr>
<th style='width: 4%;'>ID#</th>
<th>Select<!--<input type="checkbox" id="select_all" name="select_intake" />--></th>
<th>Service</th>
<th>Activity</th>
<th>Dept</th>
<th>Company</th>
<th>Address</th>
<th>User</th>
<th>Box#</th>
<th>Destroy Date</th>
<th>Request Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>