Possible Issue in Ajax override example: localstorage.html

tpaulsme

Referring to:

http://editor.datatables.net/release/DataTables/extras/Editor/examples/localstorage.html

I've been playing with this so my localStorage has stuff in it. So, first I'll explain what I'm doing to delete it, in a way that might help a novice, too.

[Wish I'd seen this a BUNCH of hours ago! Would have been easier to figure this stuff out.]

using Firefox + Firebug, select Console (make sure it's enabled and enable it and refresh if not), type 'localStorage' on the command line (to right of >>>) and press enter.

if it exists, select/expand the datatable_todo property

right-click delete

refresh the page.

You should see:
No data available in table

using buttons on example:

New, add item: 'bat 0'
New, add item: 'bat 1'
New, add item: 'bat 2'

Now, go back to Console and localStorage and expand datatable_todo property and you should see:

"[{"DT_RowId":"row_0","item":"bat 0","status":"To do"},{"DT_RowId":"row_1","item":"bat 1","status":"To do"},{"DT_RowId":"row_2","item":"bat 2","status":"To do"}]"

So far, so good.

Now, select 'bat 1' and Edit and change it to 'bat 3'

Now, go back to Console and localStorage and expand datatable_todo property (or refresh it) and I see:

"[{"DT_RowId":"row_0","item":"bat 3","status":"To do"},{"DT_RowId":"row_1","item":"bat 1","status":"To do"},{"DT_RowId":"row_2","item":"bat 2","status":"To do"}]"

yet, in the table on the page I see:

bat 0
bat 2
bat 3

which corresponds to what I see in the DOM using Firebug under:

TableTools._aInstances[0].s.dt.aoData

[NOTE: mostly because of my ignorance, it took me a loooong time of poking around to find the location above. Wish there was a little tutorial on referencing the DOM in Firebug as it relates to this DataTables, et al.]

========================================
ISSUE:
To me, it looks like localStorage is not keeping up to date with the TableTools in DOM.

Now, I'm too ignorant to say why. Allan, that's where you come in! My guess is that there's something amiss in localstorage.html.

Also, I played around with deleting localStorage and then tested deleting rows that were added to the table and saw what looked like errors. I think that it would make sense to re-index the row_0, row_1, etc. after a remove and get that into localStorage. Note that if I cleared everything out of DOM, or used a fresh browser/machine, the first go-round, removing rows seemed to work. But after I manually deleted localStorage is when I noticed removes had issues.
========================================

This is an issue, I discovered because I went to integrate this method into an existing form. I wanted to pass this data to a PHP script, and after some poking around came up with this method, using it in a Function inside the onsubmit event for the form:

var store = JSON.stringify( localStorage.getItem('datatable_todo') );
document.my_form_name.hidden_table_json_data.value=store;

and I kept get the wrong values over on the PHP script under the $_POST variable. Now trying to figure this out made me late for lunch!

Also, if I do the above, and then refresh the browser, I get the localStorage data back on the table on the page,

bat 1
bat 2
bat 3

instead of whats in the DOM under TableTools._aInstances[0].s.dt.aoData.

So, what's the right way to get the JSON data into a hidden form element on submit, for an existing form on the page, so that it shows up in $_POST over in the PHP script?

Well with a little more investigation I got this to work:

function myOnSubmitRoutine(){
var sData = oTable.fnGetData();
var sString = JSON.stringify(sData);
document.doctor_details.hidden_specialty_table_json_data.value=sString;
return true;
}

with this way down at the bottom of the area

oTable = $(\'#example\').dataTable();

Now, on submit I can grab it in my $_POST['hidden_specialty_table_json_data'] on my PHP script. And it has the added benefit of getting the data under the DOM, where it appears to be correct instead of localStorage.

Note that I don't want to use the Editor form method that exits in the examples, because I've already got a form that I'm integrating this into and don't want to have nested forms.

Cheers!

Note that I don't want to use the Editor form method that exits in the examples, because I've already got a form that I'm integrating this into and don't want to have nested forms.

allan

I'm a little confused I'm afraid - I'm not 100% sure exactly what you are asking. I'll try to answer the individual points raised:

1.

[quote]
TableTools._aInstances[0].s.dt.aoData
[NOTE: mostly because of my ignorance, it took me a loooong time of poking around to find the location above
[/quote]

You really don't want to be accessing those variables directly - they are private (anything starting with an underscore in DataTables land is considered private). Might be useful for debugging, but I'd really recommend you just use the public API to get data and manipulate the table. Certainly manipulating `aoData` is a great way to break things :-).

2.

> So, what's the right way to get the JSON data into a hidden form element on submit, for an existing form on the page, so that it shows up in $_POST over in the PHP script?

You are trying to get the data form the table, or from the localStorage element? From the table use fnGetData - from localStorage, just read it directly. Editor should keep the localStorage up-to-date when working with it's crud controls. It might not be perfect for your use case - there might be some changes needed (it uses indexing as the row ID for example, which is fairly useless if you have a server-side database somewhere with a unique serial column).

It sounds like localStorage and the data are getting out of sync. I'm sure sure why that is - a link would be useful to see what is happening.

Allan