jQuery tabs and IE8 caching

On January 20, 2010, in Javascript, Browsers, by Anuj Gakhar

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.

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">

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.

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

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 :-

<li><a href="url/rows?randomseed=<cfoutput>#randrange(1,10000)#</cfoutput>" id="favorites"><span>Favorites</span></a></li>

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.

Tagged with:  

16 Responses to jQuery tabs and IE8 caching

  1. Curt Gratz says:

    Anuj,

    Try this…

    cache: false,
    ajaxOptions: {cache: false}

    I was having this issue, and shutting off the ajaxOptions cache seemed to fix is

  2. Anuj Gakhar says:

    @Curt, that works mate! thanks for the tip.

  3. Scott Stroz says:

    Also, for other AJAX requests, I typically add a variable to the query string named _r witha value of Math.random()

  4. Clive says:

    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… 😛

  5. Sandy says:

    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.

  6. david k says:

    Is there a lot of issues with this….?

    Curious?

    -david

  7. Thanks for the help Curt…

    I was able to get it after that…

    Thanks again

  8. Ronak says:

    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.

  9. Thanks Curt… perfect!

  10. Diego says:

    Thanks Curt and Anuj, the AjaxOptions stuff works like a charm.

  11. james says:

    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.

    • Kwex says:

      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’ }
      });

  12. Peter says:

    That’s great, thanks… now what will work for me to fix the same problem in IE9, I wonder. Grrr…

  13. Pramod Tiwari says:

    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)
    {

Leave a Reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 445 other subscribers

© 2011 Anuj Gakhar
%d bloggers like this: