JQuery Ajax Tabs + Keeping State

Question

Hi there, i've been stuck on a problem and can't seem to find any help for it.. I've tried my own code, searched for tutorials on the matter but nothing seems to hit the mark..

I am currently using JQuery UI tabs for an application. Each tab click is actually loading its contents using Ajax. I now need to expand the functionality and keep the state between the tabs.

Example:

Click Tab A and fill in form documentation. Click Tab B to look up some information. Click Tab A and the information still be present.

Does anyone have some insight in how i could accomplish this?

Answer 1

Maybe set a hidden field in your page that said to not execute the TAB A ajax query and only read the data already loaded in your form.

Or you can create javascript object where you will save the data loaded.

Answer 2

I think you can do it if you set the cache option on your tabs to true, e.g.:

$('#tabs_selector_here').tabs({
    cache : true,
    ...
    whatever other options
    ...
});

Edit: it worked for me.

Edit 2: If you're looking for something a little more advanced, you can bind a function to one of the tabs events (try tabsselect) that scrapes everything from your form and either sends it to the server with an Ajax call or just saves it to somewhere in the DOM.