Internet Explorer Not Refreshing from PHP/jQuery

Question

I have created a "background" for a page made up of divs with background images. The result is blocks of random images that fade in, wait, fade out and reload using jQuery and PHP.

This is working in Chrome, Firefox, Safari, Opera (although a little more clunky), Safari/iPad, Android Phone. It "works" in ie8 and ie9 with one exception: The same images come up every time in both version of IE (tested on IE8/Win7, IE9/Vista).

I've been using PHP for a while so I know that part is good. I'm rather new to jQuery but as I mentioned it works in all other browser (although it may not be done the most efficient way). Here is the jQuery I'm using:

var auto_refresh = setInterval(function () {
    var $data = $('#backgrounder');
    $data.fadeOut(2000, function() { 
        $data.load('background.php', function() { 
            $data.delay(2000).fadeIn(2000); 
        }); 
    });

}, 10000); // refresh every 10000 milliseconds

The PHP just creates divs with random file names from a folder.

It outputs this type of HTML:

<div class="outerbackgroundbox">
<div style="background-image: url(images/backgrounds/a5.jpg);" class="blocks"></div>
<div style="background-image: url(images/backgrounds/a2.jpg);" class="blocks"></div>
...
<div style="background-image: url(images/backgrounds/a6.jpg);" class="blocks"></div>
<div style="background-image: url(images/backgrounds/a7.jpg);" class="blocks"></div>
</div>

Any thoughts as to why this isn't updating in Internet Explorer (besides the obvious "IE Sucks" thoughts, that is. ;-)

Thanks!

possible duplicate of [Stop jQuery .load response from being cached](http://stackoverflow.com/questions/168963/stop-jquery-load-response-from-being-cached) — jprofitt, Mar 16 '12 at 18:38
setInterval has no second parameter (ms). Is this on purpose? See https://developer.mozilla.org/en/window.setInterval — T. Junghans, Mar 16 '12 at 18:41

score 2 · Accepted Answer · answered Mar 16 '12 at 18:49

2

It's probably a caching issue. To prevent extra overhead IE is just reusing what it got before from the same URL.

http://api.jquery.com/jQuery.ajaxSetup/

$.ajaxSetup({cache: false});

That should disable caching for all AJAX requests you make with jQuery.

answered Mar 16 '12 at 18:49

CLo

3,650
3
26
44

Adding that right above the "var $data = " seciton got it. Thanks! – Chris Cummings Mar 16 '12 at 18:53
@ChrisCummings You should be able to add it outside of the method call. Reason being, it sets the setting for **all** AJAX requests. You may not want to have it rewrite that on every refresh of the background. – CLo Mar 16 '12 at 18:57

Ben Barden · Answer 2 · 2012-03-16T18:49:59.843

1

I'm not sure if this is the fix you're looking for, but I handled a lot of my IE caching issues by calling .hide() and .show() in quick succession before the data.delay call. Doing that right after the reload might work (though it can also cause some odd flashing as it redraws - wasn't so much an issue for me in most cases, but might be for you.)

edited Mar 16 '12 at 18:49

answered Mar 16 '12 at 18:44

Ben Barden

2,001
2
20
28

Internet Explorer Not Refreshing from PHP/jQuery

2 Answers2