How can I stop IE7-8 from caching the display of this jQuery function?_问答_开发者

I'm using the function below to show a random quote in #quotescontainer each time there is a tab change in jQuery Tabs UI. Works fine in everything except IE7-8 (of course).

What happens in IE7-8 is the first quote is displayed and a second, random quote appears in #quotescontainer right below the first quote. In all other browsers, only one quote shows and it rotates on tab change. So IE is grabbing the first quote in div.quote from quotes.html, showing it and also showing a random quote underneath the first quote.

What can I try to force IE to correctly swap the quotes? And not get 'stuck" on the first quote?

Is this a cache prooblem? Or a problem with the function always reading quote1 and appending quote2 below it?

I'm not using caching in .htaccess. I've tried adding $.ajaxSetup({cache: false}); in the function with no luck.

6/01/11 fix; issue was some html inside the <div class="quote">quote text</div> in quotes.html. Someho开发者_开发知识库w, that was breaking IE7-8.

jsfiddle: http://jsfiddle.net/YAEe5/28/

My function: with help from Matthew Ratzloff below

    select: function(event, ui) {

    var random = Math.floor(Math.random() * (Math.pow(2, 32) - 1));
  $('div#quotescontainer').load('http://mydomain.com/quotes.html?' + random, function() {
    var quotes = $(this).find('div.quote');
    var index = Math.floor(Math.random() * quotes.length);
    quotes.hide().eq(index).fadeIn();
  });

quotes are displayed on the page in #quotescontainer

quotes.html contains this:

<div class="quote">Quote1</div>
<div class="quote">Quote2</div>
<div class="quote">Quote3</div>

This is a complete, tested, working example of what you want to do. You should be able to pull everything inside of the $(document).ready function into your select handler.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
</head>
<script>
$(document).ready(function() {
  var random = Math.floor(Math.random() * (Math.pow(2, 32) - 1));
  $('div#quotescontainer').load('quotes.html?' + random, function() {
    var quotes = $(this).find('div.quote');
    var index = Math.floor(Math.random() * quotes.length);
    quotes.hide().eq(index).fadeIn();
  });
});
</script>
<div id="quotescontainer"></div>
</html>

If no-cache or other caching options dont work , you can try

$('div#quotescontainer').html('')

after this call your function and load

$('div#quotescontainer').load('http://mydomain.com/quotes.html',function

Append a random number to the end of that URL: http://mydomain.com/quotes.html?rand=439786

It'll keep your browser from caching it.

This is the code problem, not the browser problem.

You code doesn't need data caching. So, stop using it. To do it from your code, just stop using the HTTP GET command (which is used by the .load() function). Load your html, json, script or whatever data your URL mydomain.com/quotes.html? sends back with global $.post() function which uses HTTP POST command. Post data doesn't get cached. You can do it in page's load event by assigning the returned data to a global var and then sending it to your div element. Or something like that.

Or to solve it from your client, open Internet Options of IE. In the Browsing History section (I'm using IE9 right now) click button Settings. In the dialog, select "Every time I visit the page" instead of default "Automatically". Then clear browser's cache (Ctrl+Shift+Delete) and reload the page.

Do you have to load all quotes from quotes.html everytime you switch a tab? I'd load the quotes 'on docuemnt ready' make all hidden and perform only the selection on a tab select. Example code here: http://jsfiddle.net/YAEe5/40/

Tested on IE8 and in compat mode, seems to work.