Menu
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>
733
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 you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
