Checbox not handled correctly in initialization
Checbox not handled correctly in initialization
dmclean
Posts: 55Questions: 2Answers: 0
I have a column that is an input field of type checkbox. When I first create the table, all accesses to that column tell me that it is a Text object:
[fnHandleCheck] child is: [object Text]
After the first update, it is correctly identified:
[fnHandleCheck] child is: [object HTMLInputElement]
This is what one of the rows looks like:
[code]
2011-08-24T15:11:56
11082419115471303gaffney
gaffney71303
NORMAL
163:34
Local
stopped by operator
18
256
0/236
yes
stoppedbyoperator
241
[/code]
The table and table creation code (shown below) the rows are added by the server code into the section with the tags.
[code]
$(document).ready(function() {
oTable = $('#requestData').dataTable({
"sScrollY": "600px",
"bPaginate": false,
"bSortClasses": false,
"aoColumns": [
{ "bSortable": false },
null,
null,
null,
null,
{ "sType": "natural" },
null,
null,
null,
null,
{ "sType": "natural" },
null,
{ "bVisible": false },
{ "bVisible": false }
],
"aaSorting": [
[1,'asc']
],
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
nRow.setAttribute("class", aData[12]);
return nRow;
},
"fnDrawCallback": function() {
if (this.fnSettings().bFiltered) {
this.fnUncheckHidden();
}
}
});
});
Receipt Time
Request ID
Tracking ID
Priority
Age
Delivery Mode
State
Root Names
Files
Delivered
OTF?
[/code]
[fnHandleCheck] child is: [object Text]
After the first update, it is correctly identified:
[fnHandleCheck] child is: [object HTMLInputElement]
This is what one of the rows looks like:
[code]
2011-08-24T15:11:56
11082419115471303gaffney
gaffney71303
NORMAL
163:34
Local
stopped by operator
18
256
0/236
yes
stoppedbyoperator
241
[/code]
The table and table creation code (shown below) the rows are added by the server code into the section with the tags.
[code]
$(document).ready(function() {
oTable = $('#requestData').dataTable({
"sScrollY": "600px",
"bPaginate": false,
"bSortClasses": false,
"aoColumns": [
{ "bSortable": false },
null,
null,
null,
null,
{ "sType": "natural" },
null,
null,
null,
null,
{ "sType": "natural" },
null,
{ "bVisible": false },
{ "bVisible": false }
],
"aaSorting": [
[1,'asc']
],
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
nRow.setAttribute("class", aData[12]);
return nRow;
},
"fnDrawCallback": function() {
if (this.fnSettings().bFiltered) {
this.fnUncheckHidden();
}
}
});
});
Receipt Time
Request ID
Tracking ID
Priority
Age
Delivery Mode
State
Root Names
Files
Delivered
OTF?
[/code]
This discussion has been closed.
Replies
[code]
$.fn.dataTableExt.oApi.fnHandleCheck = function (oSettings) {
if (disableChecking) {
console.log("[fnHandleCheck] checking disabled.");
return;
}
console.log("[fnHandleCheck] enter.");
var checkCount = 0;
var bitFlags = 65535;
for (var j = oSettings._iDisplayStart; j < oSettings._iDisplayEnd; j++) {
var nRow = oSettings.aoData[ oSettings.aiDisplay[j] ].nTr;
var cells = nRow.cells;
var cell = cells[CHECKBOX_INDEX];
var child = cell.childNodes[0];
console.log("[fnHandleCheck] child is: " + child);
if (child.checked) {
checkCount += 1;
var rowData = oSettings.aoData[ oSettings.aiDisplay[j] ]._aData;
var cellData = rowData[FLAGS_INDEX];
var flags = parseInt(cellData);
bitFlags = (bitFlags & flags);
}
}
console.log("[fnHandleCheck] count: " + checkCount + ", flags: " + bitFlags);
};
[/code]
the initial onChange that generated the "[fnHandleCheck] child is: [object Text]" probably happened before $(document).ready(), in which case it's not a concern. at that time, the table code was not interpreted and converted into dom elements, and the contents of the cell were still considered text.
are you actually getting errors during run time? and if so, what issues are you having?
"[fnHandleCheck] child is: [object Text]" is occurring when I click on the checkbox after the page is fully rendered, but only before the first update. In fact, in the first call to my update function (shown below), the child is still a text object. After the update it changes to an HTMLInputElement.
Note that Firefox knows that it's a checkbox (otherwise the call to fnHandleCheck would not be happening.
[code]
$.fn.dataTableExt.oApi.fnUpdateWOScroll = function (oSettings, data, rPos) {
try {
var pos = $('div.dataTables_scrollBody').scrollTop();
// console.log("[fnRevisedUpdate] pos is: " + pos);
var row = this.fnGetNodes(rPos);
var cells = row.cells;
var cell = cells[CHECKBOX_INDEX];
var child = cell.childNodes[0];
console.log("[fnUpdateWOScroll] child is: " + child);
var checked = child.checked;
this.fnUpdate(data, rPos);
row = this.fnGetNodes(rPos);
cells = row.cells;
cell = cells[CHECKBOX_INDEX];
child = cell.childNodes[0];
child.checked = checked;
$('div.dataTables_scrollBody').scrollTop(pos);
}
catch(e) {
console.log("Exception: " + e)
}
};
[/code]
There is certainly something funny going on, but I can't put my finger on it I'm afraid. Are you able to give me access to the system so I can see it in action?
One thing I would suggest is to drop the DOM0 events and use a jQuery live listener instead of putting the fnHandleCheck into the DOM.
[code]
$('table tbody input[type=checkbox]').live( 'click', function () {
oTable.fnHandleCheck();
} );
[/code]
should be all that is needed for that.
Allan
Duh.