Image Refresh in FF Yes in IE No

I'll buy anyone lunch (via paypal) if you have the solution...

I'm aware of how the cache can prevent images from updating, this is over come by appending random characters to the image. That's what I've done below. Yet it doesn't function in IE. The image does not refresh. I need the value in id to be passed to verify-image.php. I have tried swapping the placement of ID and rnum but that had no effect. Do you guys have any ideas?

function reloadImage()
{
   var id = document.form1.id_check.value;
   var rnum = parseInt(Math.random()*10);
   img = document.getElementById('Captcha');
   img.src = "./includes/verify-image.php?"+rnum+"&id="+id;

}

Code (markup):

The Call

<a href="javascript:void(0)" onclick="reloadImage();">[REFRESH IMAGE]</a>

Code (markup):

 

A possible workaround could be using a false url on your client and with mod_rewrite on your server you'll change that false url to the proper url.
Example:

On client (javascript):

img.src = "./includes/"+ id + "/" + rnum + "/verify-image.jpg";

Code (markup):

On server: (.htaccess file)

RewriteRule   ^includes\/([^\/]+)\/[^\/]+/verify-image.jpg     /includes/verify-image.php?id=$1

Code (markup):

 

The results were the same for IE. FF showed a broken image for some reason but looked like it was still attempting to refresh the image. Here's the contents of my original htaccess. Perhaps something in there has caused it to fail?

Options All -Indexes
Options +FollowSymLinks
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) index.php

Code (markup):

 

I don't understand your last sentence: RewriteRule ^(.*) index.php

With that, all the request to your server are being redirected to your index.php script, so your verify-image.php won't be executed

 

That's true, everything is. all arguments are passed through the index.php file. The site is one main file that loads different "parts" according to the arguments passed to the index.php. example index.php?section=3&show=true&release=89

If section is 3 I call the registration module. It is simply an echo statement that shows the image by

echo'<img name="Captcha" id="Captcha" src="includes/verify-image.php?id='.$id.'" width="225" height="50"/>';

PHP:

 

So, are you returning that html code ?

<img name="Captcha" id="Captcha" src="includes/verify-image.php?id='.$id.'" width="225" height="50"/>

Code (markup):

Note that there is not random number there. Also that code is going to be asigned to the .src of your image (javascript: img.src = ...).

IMO you need to return a image, not a HTML code.
I don't know PHP, but in PERL it would be something like this:

    print "Content-type: image/jpeg\n\n"; 
    open FICH, $your_image_file; 
    while (read FICH, $r, 16384) { print $r; } 
    close FICH; 

Code (markup):

 

echo ing it causes it to be executed and it returns the image.

<img name="Captcha" id="Captcha" src="includes/verify-image.php?id='.$id.'" width="225" height="50"/>

PHP:

verify-image.php

if(isset($id))
  {
    $verification_code[0]= $id;

    if(strlen($verification_code[0]) > 0)
      {
        header("Content-Type: image/png");

        $imwidth = 225;
        $imheight = 50;

        // set image width and height
        $im = imagecreate($imwidth, $imheight);

        $background_color = imagecolorallocate ($im, rand(0, 120), rand(20, 120), rand(40, 120));

        $code = $verification_code[0];
        $x=0;


  $stringlength = strlen($code);
  for ($i = 0; $i< $stringlength; $i++)
     {
       $x = $x + (rand (20, 35));
       $y = rand (1, 10);
       $fname = rand (1, 3);
       $text_color = imagecolorallocate ($im, rand(100, 255), rand(200, 255), rand(100, 255));
       $font = imageloadfont($rootpath . 'fonts/'.$fname.'.gdf');
       $single_char = substr($code, $i, 1);

       imagechar($im, $font, $x, $y, $single_char, $text_color);
     }

  $nname = rand (1, 26);
        imagerectangle ($im, 0, 0, $imwidth-1, $imheight-1, $background_color);

        // output the image
        imagepng($im);
        imagedestroy($im);
      }
  }

PHP:

The random number was added in an attempt to prevent IE from caching the image.

 

Well, that seems ok.
Another workaround could be stopping the page being cached completely.
You can do that adding these meta tag to your .html page:

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">

 

I tried that too. Although I did it this way.

header("Content-Type: text/html; charset=$charset");
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Cache-control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0, private");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past

PHP:

 

Sorry, I have no more ideas.
But you can take a look at this page about Caching-related bugs in Explorer

 

I appreciate the thoughts and the link. Thanks.

 

If you find a solution, please post here

 

I will. If I don't find one it's going to be alot of re writting. Stupid IE, it worked the first try around in FF.

 

I don't know how it's done on PHP, but I remember somebody talking about validating submissons with images (to prevent spam on directory submissions) using SESSIONS.

Maybe you can try with a new thread on PHP forum.

 

ok, lunch and dinner now.

 

found another way, thanks guys

 

Hey Robert,

I was wondering if you could have dozens of uniquely named identical php scripts? I know that's not the most elegant solution... but if you're in an any port in a storm situation maybe that would work.

You could have a counter that keeps up with the last script that was used:

img.src = "./includes/verify-image"+counter+".php?id="+id;

Just a thought...
Marty