Friday, January 22, 2010

jQuery Ajax Tabs IE Caching

The tabs feature is by far one of the more useful user interface options in jQuery.
http://jqueryui.com/demos/tabs/

However, I recently ran across some an odd caching when using the jQuery UI tabs along with the Internet Explorer browser.  When attempting to load or reload an ajax tab in IE, it would get stuck in IE's cache and not reload. This issue would only happen in IE, and not in my tests with Firefox or Chrome.

After some research I did find that there is a "cache" option for the tabs, and also an ajaxOptions.

$("#tabs").tabs({
ajaxOptions: { cache: false },
cache: false
});

At first this seemed to fix the problems. But soon after I ran into the problem again. Now the problem just seemed to be more random based on the content and the URL, which really didn't help me at all and would likely just confuse the end users even more.

Finally the solution came by making sure the URL and content would be random enough to get around the issues with IE. By adding in a random number in the URL, IE finally seems to be smart enough not to cache the ajax loaded page.

http://yoururl/?rannumber=#randrange(1,10000)#

It's not the ideal scenario, but it works, and since this is only being used to load a behind the scene ajax page, the user doesn't even have to see the extra random number being tagged on.

2 comments:

Anonymous said...

My code works when I link static files, but when I link .cfm files, I do not see any content at the bottom. Help!

Alan Quinlan said...

can you give an example of your code?