getElementsByName doesn't work after admin grid ajax request
-
10-12-2020 - |
Question
Im trying to get the selected checkboxs in invoice grid, which is working fine if I don't filter the grid or you can say before ajax request. After ajax request grid refreshes and also I can't get the selected/unselected checkboxs.
I can capture the click event on checkboxs but I want to get all of them to check which are checked & which aren't.
Here is my code
function getCheckedBoxes(chkboxName) {
var checkboxes = document.getElementsByName(chkboxName);
}
Event.observe(window, 'load', function() {
$(document).on('click', 'input[type="checkbox"]', function(event) {
var chkStatus = getCheckedBoxes("invoice_ids");
var checkboxesChecked = [];
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkboxesChecked.push(checkboxes[i]);
}
}
// Do other stuff after that
});
});
Solution
instead of
var checkboxes = document.getElementsByName(chkboxName);
try prototype
var checkboxes =$$('#billship input[type="checkbox"][name="invoice_ids"]');
OTHER TIPS
There is some variable scope issue in your code. Try below one its worked for me:
function getCheckedBoxes(chkboxName) {
var checkboxes = document.getElementsByName(chkboxName);
return checkboxes; // You didn't return selected checkbox object to functional call
}
Event.observe(window, 'load', function() {
$(document).on('click', 'input[type="checkbox"]', function(event) {
var checkboxes = getCheckedBoxes("invoice_ids"); // Change your chkStatus to checkboxes OR you need to define checkboxes as global which should be used in any scope
var checkboxesChecked = [];
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkboxesChecked.push(checkboxes[i]);
}
}
console.log(checkboxesChecked);
// Do other stuff after that
});
});
Hope this will work.
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange