Hi Paul. Thanks for reply. I hall try it later and post back. cheers
I have managed to get the following script working which will add and remove from array. However, something weird i happening when I click on a checkbox.
For example, I have 3 checkboxes 1,2,3. When I select a checkbox, this shows the correct row values in the console. However, if I unselect box 2 then it is still displaying values for checkboxes 2 and 3 in the console which was instead of 1 and 3. I hae posted my code and would be grateful if someone help me with this. Need to move on with this. Many thanks.
$(function() {
info = [];
$(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();
var id = rackid;
data = {};
data.rackids = rackid;
// 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');
}
}
}
});
});
Where is id coming from? You only declare it inside the if block, so it will never be defined in the else block as far as the current function scope is concerned (which would actually throw a reference error though).
Edit: Ah forgot about the hoisting of old var declarations. ^^ So inside the else block, id is always undefined; it seems that passing an invalid value will just splice() the array at the first position then.
How do I correct this to work? Also, if it help, this is how the input is declared from datatables and I was wondering if I need a dynamic id as at the moment I am referencing by class, so all inputs in the table are being called in the click handler by class. ie; “rowChk”. Many thanks
{ data: null, 'width': '20', render: function (data, type, row, meta)
{
if (type === 'display')
{
data = '<input type="checkbox" class="rowChk" name="rowChk[]" />';
}
return data;
}
},
I have declared id in the following code.
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;
Just declare and acquire the ID above the conditional blocks, not inside the if block only.
Going with the class should be fine – inside the click handler you have a direct reference via this (or event.target) anyway. BTW since the input is not dynamic, you can replace the render() method with a simple defaultContent property (see my codepen).
I have followed your comment and placed the id outside of the if statement like thus: var id; and still getting the same problem. I have posted the code I am now using? Thanks
PS. Funny thing is, it seems to work for ‘n’ clicks then randomly returns the incorrect id. I think I hall be on valium soon :-). Thanks
$(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 = rackid;
// 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');
}
}
}
});
});
I did say you have to declare and acquire the ID above the if block though – just declaring it outside doesn’t change anything as it’s still undefined. So check your own code where the actual value for the ID is coming from, and then do that assignment at the function top instead.
The actual id is coming from here:
var rackid = currentRows.find("td:eq(0)").html();
So what I did was to place the id declaration like this outside the if block: How do I acquire the ID above the if block if I am not getting the value until the checkbox is checked which is inside the if block?
id = rackid;
Is there any reason that I cannot just grab the value from rackid and not use id at all? Thanks
No, you can certainly use the rackid directly… AFAICT you introduced the additional id variable yourself at some point. ^^ Just make sure it is defined and holds an actual value when using it.
Hooray. Finally got it working. Moved the following from the if block to outside the if block and used rackid.
currentRows = $(this).closest("tr");
rackid = currentRows.find("td:eq(0)").html();
Many thanks for all your help. Couldn’t have done it without you. Cheers
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.