I have been using jQuery tabs in several places in one of my websites. And most of the tabs I have are setup as AJAX tabs. ie they are fetching data only when they are clicked on. This has been working fine in all other browsers except in IE8. IE8 doesnt show the latest content within a tab. If I go and delete a data row or add a data row, IE8 will keep on showing the old dataset. At first, I thought, this must be a case of telling IE8 not to cache anything. So, I added the following 2 meta tags in the page.
[xml]
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
[/xml]
I thought that should fix it, but it didn’t. I was still having the same issues. I then started looking into jQuery docs to see if some attribute I could use. Sure enough, there is a “cache:false” option you can pass in on your tabs. So, I did this next.
[javascript]
$("#tabs").tabs({
cache:false
,spinner: ”
});
[/javascript]
Unfortunately, that didnt solve it as well. Then, my last option was to just add some random number to the URL so IE8 identifies it as a different URL and gets new data. So, I did this :-
[xml]
<li><a href="url/rows?randomseed=<cfoutput>#randrange(1,10000)#</cfoutput>" id="favorites"><span>Favorites</span></a></li>
[/xml]
And that solved my issue. So, I guess jQuery cache:false is not doing something right here.
I just wanted to share my experience here and see if anyone has any different thoughts.
Anuj,
Try this…
cache: false,
ajaxOptions: {cache: false}
I was having this issue, and shutting off the ajaxOptions cache seemed to fix is
@Curt, that works mate! thanks for the tip.
Also, for other AJAX requests, I typically add a variable to the query string named _r witha value of Math.random()
Thanks heaps Curt, that worked a treat for me too. Thank goodness the Internet exists, otherwise resolving these issues for jquery development might be harder… 😛
Thank you so much for sharing the information, I was trying to fix this issue for last couple of weeks but dont find the solution till now, But now I have the solution because of your post 🙂 , please keep posting any new updates regarding Ajax.
Free jQuery & UI eBook:
http://www.heronote.com/files/jQuery.htm
Is there a lot of issues with this….?
Curious?
-david
Thanks for the help Curt…
I was able to get it after that…
Thanks again
I just started with jQuery Tabs. I set cache:true. When I click on a tab and immediately clicks on another tab, the data is not fetched for earlier tab and shown as blank. As cache is ON, on all subsequent click shows blank tab page only.
Thanks Curt… perfect!
Thanks Curt and Anuj, the AjaxOptions stuff works like a charm.
i have this problem in IE, not chrome. i cant use “cache: false” because i need the static/non-ajax tabs to keep the user’s options. i used “ajaxOptions: {cache: false}” but that didnt fix the problem. I changed the call from $.get to $.post and that worked, IE stopped caching the content, sounds reasonable… 15 years later, i am still complaining about IE. i’ll give it another 5 yrs, if it still sux, i’m getting a lobotomy.
Thanks James … that was the trick. Changed the ajaxOptions’ type to POST.
See below:
// Initialize tabs
$(“#dvTabs”).tabs({
cache: true,
‘ajaxOptions’: {
cache: true,
error: GlobalErrorHandler,
type: ‘POST’
},
spinner: ‘Retrieving data …‘,
fx: { opacity: ‘toggle’ }
});
That’s great, thanks… now what will work for me to fix the same problem in IE9, I wonder. Grrr…
Oh, I see, I managed to get it to work. I had two calls to .tabs on the page, one without the cacheing turned off.
same issue in my code also.but abouve all code did not work in IE8 and IE9.
Please have any other solution.
this is my code :
$(document).ready(
function()
{
var jtlTabs = $(“#jtlTabs”).tabs(
{
scrollable : true,
cache :false,
ajaxOptions: {cache: false,type:”POST”},
changeOnScroll : false,
add : function(event, ui)
{