Refresh when loading image

Refresh when loading image

Hello,

  I have a problem when I  have modified an image and asked AJAX to reload it.
  Below is the code.

 In a php procedure, I create dynamically a  map of a different French area  (called "department"). 
According to values found in a cookie  several parameter are retrieved  by the procedure. It could be :
- department name
- map size, -
- colors 

Because the user has no button to trigger the refresh, this is done on an interval time basis.
Everything works fine except when the department name (that is the picture name)  has not changed.
 
For exemple if I want just to  modify the map size (not changing the name) it still display the previous picture.
(Of course I checked in my image folder that the new picture have been correctly created). 

I spent hours debugging my php to understand why in this particular case  things does not work,  to finally understand it came  from my ajax code.

In the php procedure after the image has been  generated  there is only one line returned :

     echo ' <img src="./img/'.$ImageName.'" />' ;

I was wondering whether AJAX keeps in a sort of cache the last image ?

I tought of using a byapss in creating a randomly image name.  But I'm pretty sure  it could be a much better and cleaner way.

Thanks in advance for any explanation and ,if possible, a correction.

Gerard

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html lang="FR">
  3. <head>
  4.        <title></title>
  5.        <html><head> <meta http-equiv="Content-type" content="text/html; charset=Windows-1252"/>
  6.  
  7.  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  8.  <script>
  9.               var minuteur  =setInterval(function(){myTimer()},1000);
  10.               var str ="";
  11.        
  12. function myTimer()
  13. {
  14.     if (readCookie("TailleCentre") == null) return;
  15.     var options   = readCookie("OPTIONS") ;
  16.    
  17.     if (options == null) options ="France";
  18.     if (str != options)
  19.     {
  20.         clearInterval(minuteur);
  21.         lancerAjax("#affichage") ;
  22.         str=options;
  23.         minuteur = setInterval(function(){myTimer()},1000);
  24.     }   
  25. }

  27. function readCookie(name)
  28. {
  29.     var nameEQ = name + "=";
  30.     var ca = document.cookie.split(';');
  31.     for(var i=0;i < ca.length;i++)
  32.     {
  33.         var c = ca[i];
  34.         while (c.charAt(0)==' ') c = c.substring(1,c.length);
  35.         if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  36.     }
  37.     return null;
  38. }
  39. function lancerAjax(id)
  40. {
  41.     var request = $.ajax(
  42.     {
  43.         url: "affichage.php",
  44.         type: "POST",
  45.         dataType: "html"
  46.         });
  47.        
  48.         request.done(function( msg )
  49.         {
  50.             $( id ).html( msg );
  51.         });
  52.         request.fail(function( jqXHR, textStatus ) {
  53.         alert( "Request failed: " + textStatus );
  54.     });               
  55. }
  56. </script>
  57. </head>
  58. <body bgcolor="#D6E7CB">
  59. <center>
  60. <div id="affichage"></div>
  61.  </center></body></html>