Checbox not handled correctly in initialization

dmclean

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]

fbas

where/when do you call the code that outputs "[fnHandleCheck] child is: [object Text]"?

dmclean

Good question.

[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]

dmclean

Just to clarify, fnHandleCheck is called by "onChange" for the input checkbox (see the sample row in the first code block).

fbas

my theory:

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?

dmclean

I'm afraid that your theory cannot be correct.

"[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]

allan

I've just tried to replicate this problem in both Firefox and Safari, but I'm afraid I haven't been able to do so. The console messages finds the input element as an input as expected.

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

dmclean

My mistake. When I first created the rows, there was an extra space in front of the input field. The update didn't have the space.

Duh.