title: jQuery-ui tabs: clear cache
body: <p>I need to clear the cache of a loaded tab so that on the next tab click it is reloaded. The solution from <a href="https://stackoverflow.com/questions/8797486/jquery-ui-tabs-clear-cached-tab">JQuery UI Tabs - Clear Cached Tab</a> doesn't work for me, and I don't know what's wrong. The question/answer doesn't show the actual code used, so the setup might be slightly different to mine.</p>
  
  <p>See <a href="http://jsfiddle.net/A3SHj/" rel="nofollow noreferrer">http://jsfiddle.net/A3SHj/</a> for my use case.</p>
  
  <p>My setup code:</p>
  
  <pre><code>$(function() {
    $( "#tabs" ).tabs({
      //see http://docs.jquery.com/UI/Tabs#option-cache
      cache:true, //make click only load page once
      ajaxOptions: { cache: false }, //but don't cache the ajax request!
      active:0 //first tab is active
    });
  });
  </code></pre>
  
  <p>My clear-cache function:</p>
  
  <pre><code>function clearTabsCache() {
    //see https://stackoverflow.com/questions/8797486/jquery-ui-tabs-clear-cached-tab
    $("#tabs .ui-tabs-nav a").removeData("cache.tabs");
  }
  </code></pre>
  
  <p>For example using Chrome's developer tools you can observe in the Network panel that the PNG in the "Remote page" tab is only fetched once, not re-fetched after 'clear tab cache'. (The fact that the browser shows the image byte stream is not of interest here.)</p>
  
  <p>The js code <code>$("#tabs .ui-tabs-nav a")</code> correctly selects the 2 tabs, and the removeData() method succeeds, but there's no change.</p>