Home/ Questions/Q 4625078
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T03:13:15+00:00

I’m using the function below to show a random quote in #quotescontainer each time

  • 0

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. Somehow, 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0