Issue when calling fnSetFilteringDelay() on multiple DataTables
Issue when calling fnSetFilteringDelay() on multiple DataTables
I lost an entire afternoon on what turned out to be a really stupid issue. I've been unable to find anyone with a similar issue so I figured I'd post it here just in case anyone else has a similar problem:
I have a page with two datatables. Both have server side processing, and both have links within them that open up within a colorbox. The colorbox content allows the users to edit records, so when they close the colorbox I have the datatable refresh.
Here's a portion of the dataTable initialization, which has worked well:
[code]
"fnServerParams": function (aoData) { aoData.push({ "name": "forcerefresh", "value": bForceRefresh }); },
"fnDrawCallback": function () {
$("#tblOneID a.boxit").colorbox({
width: "80%",
height: "90%",
iframe: true,
onClosed: function () {
bForceRefresh = true;
jQuery('#tblSubmitted').dataTable().fnDraw();
bForceRefresh = false;
}
});
}
[/code]
(Note: the bForceRefresh stuff is a parameter passed back to the server to tell my code to rebuild some objects instead of relying on cached objects. Not really relevant to this issue.)
Here's where I ran into major problems: Although each table has its own ID, they share a class name. I added FilteringDelay to both with this line of code:
[code]jQuery('.tableclass').dataTable().fnSetFilteringDelay();[/code]
This worked great...but I found that whenever the colorbox was closed, I was getting a JS error:
[quote]Uncaught TypeError: Cannot read property 'oFeatures' of null[/quote]
This is what killed my afternoon.
Long story short, I replaced the line of code above with this:
[code]
jQuery('#tblOneID').dataTable().fnSetFilteringDelay();
jQuery('#tblTwoID').dataTable().fnSetFilteringDelay();
[/code]
This resolved the problem. I hope this helps someone else.
I have a page with two datatables. Both have server side processing, and both have links within them that open up within a colorbox. The colorbox content allows the users to edit records, so when they close the colorbox I have the datatable refresh.
Here's a portion of the dataTable initialization, which has worked well:
[code]
"fnServerParams": function (aoData) { aoData.push({ "name": "forcerefresh", "value": bForceRefresh }); },
"fnDrawCallback": function () {
$("#tblOneID a.boxit").colorbox({
width: "80%",
height: "90%",
iframe: true,
onClosed: function () {
bForceRefresh = true;
jQuery('#tblSubmitted').dataTable().fnDraw();
bForceRefresh = false;
}
});
}
[/code]
(Note: the bForceRefresh stuff is a parameter passed back to the server to tell my code to rebuild some objects instead of relying on cached objects. Not really relevant to this issue.)
Here's where I ran into major problems: Although each table has its own ID, they share a class name. I added FilteringDelay to both with this line of code:
[code]jQuery('.tableclass').dataTable().fnSetFilteringDelay();[/code]
This worked great...but I found that whenever the colorbox was closed, I was getting a JS error:
[quote]Uncaught TypeError: Cannot read property 'oFeatures' of null[/quote]
This is what killed my afternoon.
Long story short, I replaced the line of code above with this:
[code]
jQuery('#tblOneID').dataTable().fnSetFilteringDelay();
jQuery('#tblTwoID').dataTable().fnSetFilteringDelay();
[/code]
This resolved the problem. I hope this helps someone else.
This discussion has been closed.
Replies
Allan