title: Changing background image src periodically using jQuery and AJAX
body: <p>I'm trying to have the background image of the body of my page change every (approximatly) N seconds. For this i have a PHP function that echoes random image src when i call it using AJAX. I then replace the current body background image src by this newly generated one, but i can't get it to work.</p>
  
  <p>Here is the code, is there anything wrong in it ?</p>
  
  <pre><code>(function($) {
  
      var $body = $('body');
  
      window.setInterval(function() {
          $.ajax({
              url: 'http://localhost/some_path/index.php?exec=getNewBkgImgSrc',
          }).done(function(data) {
              var newImage = new Image();
              newImage.onload = function() {
                  $body.css('background-image', newImage.src);
              };
              newImage.src = data;
          });
      }, 5000);
  
  })(window.jQuery);
  </code></pre>
  
  <p>And the PHP function which does work :</p>
  
  <pre><code>public function getNewBkgImgSrc() {
      echo CONTENT_URL_DIR.'/Wallpapers/wallpaper ('.rand(1, 20).').jpg';
  }
  </code></pre>
  
  <p>Could this be because i'm using localhost ? I can mremeber having AJAX problems before when i was developping locally.</p>
  
  <p>EDIT : A clue maybe is that the style property of the body element doesn't sseem to change / be set in Firebug. I also tried <code>$('body').first()</code> and <code>$(document.body)</code> and using <code>url("")</code> (in the value of background-image property) but it doesn't work either. The onload event does fire however.</p>
  
  <p>Thanks for your help.</p>