JQuery UI Tabs - Clear Cached Tab

Question

I have a set of JQuery UI tabs on a given page and have set the cache property to true for them to reduce the number of requests that are issued. I also have a select list outside of the tabs which is used to provide a parameter to the requests that are made to load the tabs.

Problem: If the user clicks all the tabs and all of them load and then selects a different item from the select list, the tabs will all be showing information from the previously selected select option.

I would like to be able to clear the tab cache when the user selects a new option from the select list so that when they click on the tabs again, there is nothing in the cache and a new request is made with the newly selected option being supplied as a parameter.

Does anyone know how to clear the page cache for the tabs?

Answer 1

When they click on a different item just use:

$("#tabs .ui-tabs-nav a").removeData("cache.tabs");

That will remove the cache for all the tabs and it will recache when they click on items.