Enabling bStateSave causes oColumn undefined error after a refresh

DavidCorrales

Hi everyone,

I'm working on a webpage and would like to enable the automatic state-saving cookie but doing it causes an undefined error after a refresh. If I enable the feature and the cookie doesn't exist it is created successfully and changes are stored as long as I don't refresh the webpage. Doing so produces the following error:

oColumn is undefined in jquery.dataTables.js (line 6461)

[code]
for ( j=0, jLen=oColumn.asSorting.length ; j

DavidCorrales

Just to add some more info, I added the following snippet at line 6435:

[code]
if (typeof(oSettings.aaSorting) === "string")
{
oSettings.aaSorting = jQuery.noConflict().parseJSON(oSettings.aaSorting);
}
[/code]

and it works but later on it breaks another module (prototype.js), saying that this.replace is not a function.

allan

This bit is particularly odd:
> with oSettings.aaSorting having a value of: "[[2, "desc", 1]]"

there is no way that should be happening! Can you run your DataTable through the debugger please ( http://debug.datatables.net )?

If you could give me a link to a text page that shows the problem that would be really helpful - as you can see from the example page, it should work: http://datatables.net/release-datatables/examples/basic_init/state_save.html

Allan

DavidCorrales

Hi Allan,

I tried running the debugging bookmark but I'm behind a proxy and it doesn't seem to like that, it looks stuck. Sadly I cannot provide you with a direct link to the page either because it's not internet-accessible :(

The page is also using other JavaScript APIs such as Rico and Prototype. Maybe they are interfering with something?

Any special place I can instrument to debug this issue?

I'm posting the cookie contents in case they provide more pointers:

{"iCreate":1331141964871,"iStart":0,"iEnd":0,"iLength":10,"aaSorting":"[[2, \"asc\", 0]]","oSearch":{"bCaseInsensitive":true,"sSearch":"","bRegex":false,"bSmart":true},"aoSearchCols":"[{\"bCaseInsensitive\": true, \"sSearch\": \"\", \"bRegex\": false, \"bSmart\": true}, {\"bCaseInsensitive\": true, \"sSearch\": \"\", \"bRegex\": false, \"bSmart\": true}, {\"bCaseInsensitive\": true, \"sSearch\": \"\", \"bRegex\": false, \"bSmart\": true}, {\"bCaseInsensitive\": true, \"sSearch\": \"\", \"bRegex\": false, \"bSmart\": true}, {\"bCaseInsensitive\": true, \"sSearch\": \"\", \"bRegex\": false, \"bSmart\": true}, {\"bCaseInsensitive\": true, \"sSearch\": \"\", \"bRegex\": false, \"bSmart\": true}, {\"bCaseInsensitive\": true, \"sSearch\": \"\", \"bRegex\": false, \"bSmart\": true}, {\"bCaseInsensitive\": true, \"sSearch\": \"\", \"bRegex\": false, \"bSmart\": true}]","abVisCols":"[true, true, true, true, true, true, true, true]"}

Thanks for your time!
-David

DavidCorrales

I found the culprit of the problem. When serializing the string to JSON and reading it back it becomes a string, rather than an array as it should. This happens for these 3 variables:

oData.aaSorting
oData.abVisCols
oData.aoSearchCols

I overloaded the fnStateLoadParams method and changed those values to valid entries and it all works. I'll keep looking as to why this happens.

allan

That's very odd - I don't understand why that would be happening on your page, but not my demo pages. Do you include a JSON library or set any of the DataTables init options other then bStateSave?

Allan

DavidCorrales

Hi again Allan,

Here's the table initialization:

[code]
$j = jQuery.noConflict();
testTable = $j('#testTable').dataTable( {
"bProcessing": false,
"sAjaxSource": '/get_data/',
"bDeferRender": true,
"bServerSide": true,
"sAjaxDataProp": "entries",
"bPaginate" : true,
"bFilter": true,
"bInfo" : true,
"sPaginationType" : "full_numbers",
"aLengthMenu": [[25, 50, 100, 250, 500], [25, 50, 100, 250, 500]],
"bStateSave": true,
"aoColumns": [
(...)
],
"sScrollY": "250px",
"bJQueryUI": true
} );
[/code]

I omitted the columns for brevity and added the noConflict() call to avoid problems with Prototype. Anything suspicious?

Thanks again,
-David

allan

Hi David,

Thanks for posting that. It all looks fine. Can you confirm which version of DataTables you are using please? If you aren't using the 1.9.1.dev version from the download page, could you try it please?

Allan

DavidCorrales

Allan,

I tried version 1.9.0 normal and minified and also the 1.9.1.dev (nightly) and they all behave the same way. I'm using Firefox 10.0.2 on Linux to create the cookie. I did try in a couple of Windows browsers with the same results (Chrome, Firefox and IE 8).

The workaround I'm using is, again, overloading fnStateLoadParams and manually parsing those 3 entries into regular Javascript arrays.

I also did a small test with stringify and parseJSON:

[code]
var test = [1, 2, 3];
var testJSON = JSON.stringify(test);
var parseJSON = jQuery.noConflict().parseJSON(testJSON);
[/code]

After running it, the results for each step are:

[code]
test: [1, 2, 3]
testJSON: ""[1, 2, 3]""
parseJSON: "[1, 2, 3]"
[/code]

It looks like the methods are doing their job as expected. What I don't understand is how it works when it does hehe :)

Regards,
-David

DavidCorrales

SOLUTION: In the end I just did an 'eval' to each of the 3 arrays in the fnStateLoadParams call and pass it to the DataTables framework. If the framework addresses this issue eventually I'll just take it out.

Thanks for the help!
-David