272238 - unable to update a <input type=image> field dynamically

Status: RESOLVED INVALID

(Core :: Networking: HTTP, defect)

Description

[bugzilla]

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322)
Build Identifier: 

I have the following HTML & JavaScript on a page: 

In the head: 

Code:
<script language=JavaScript> 
      function updatePic() { 
        var mO = document.getElementById('mapOverlay'); 
        mO.src = "gd.php"; 
        theTime = new Date(); 
        window.status = "Display last updated on "+theTime; 
        window.setTimeout('updatePic()', 5000); 
      } 
</script> 
In the body: 

Code:
    
<form action=map3.php method=get target=map3 name=mapOverlayFrm 
onsubmit="updatePic()"> 
  <input height=500 width=500 id="mapOverlay" name=mapOverlay type=image 
src="gd.php"> 
</form> 


<script language=JavaScript> 
      theTime = new Date(); 
      window.status = "Display last updated on "+theTime; 
      window.setTimeout('updatePic()', 5000); 
</script> 
This is suppossed to update the mapOverlay field in the mapOverlayFrm form 
every 5 seconds. 

It works without issue in IE, but not in Mozilla/FireFox. The customer 
requirement is that it works in both IE (Windows XP Home) and Mozillla/FireFox 
(SuSE 9.1 Pro). 

The problem is on Windows and Linux.


Reproducible: Always
Steps to Reproduce:
Put my code in a file, reference to another image which you can see changed 
sit back and watch
Actual Results:  
the mapOverlay object was not updated

Expected Results:  
the mapOverlay object should be updated

Comment 1

[Paul van Schayck]

Attachment: Testcase

Attached a testcase. More minimized. Used a random image (done with PHP and gd)
located here: http://www.meosource.com/usersonline/random/screen.jpg

The problem is that the src of the image is kept the same so for gecko nothing
changed and won't refresh the image and load the image from cache. Altough the
image did change.

The thing that needs to happen is to prevent caching by putting something
unique behind the image location. Like this:

var i = 0;
      function updatePic() { 
	i++;
	document.getElementById('mapOverlay').src =
"http://www.meosource.com/usersonline/random/screen.jpg?"+i;

Comment 2

[Doron Rosenberg (IBM)]

Your php should tell the browser to not cache the image.  Mozilla caches it and
reloads it from cache since the URL is the same.

Solutions - send an Expires, Cache-Control or similar HTTP header or use
foo.jpg?randomString to force reloading

Comment 3

[bugzilla]

The only way I get it refresh is if I change the URL using mO.src = "gd.php?
mozillaRefresh="+randomValue;

My headers is as follows in the PHP code:
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
header('Content-type: image/png');
imagepng($mapToDisplay);

But if I don't change the URL it doesn't refresh, although the above Headers 
should tell Mozilla to always reload the image as it is expired when it 
reaches Mozilla.

Comment 4

[bugzilla]

OK

So now it's working (with the URL changing the whole time) - although Firefox 
is ignoring all my Cache headers.

And here comes the next bug. 

When I click on the image a couple of times (like 30 times without giving it a 
rest) the image gets reloaded the 30 times and then it continues reloading as 
fast as Mozilla can get requests through to my server but never returns to the 
5 seconds I set the refresh rate to.

When updating a field to reflect this value, it keeps on showing 5000 (which 
is the milliseconds passed to window.setTimeout('updatePic()', 5000);

This then reaches a point where FireFox just falls over (which happenned 
once). I tried to duplicate the issue but it kept on running for 30 minutes 
before I eventually closed FireFox.

Comment 5

[Doron Rosenberg (IBM)]

using wget, I see:

HTTP request sent, awaiting response...
 1 HTTP/1.1 200 OK
 2 Date: Tue, 30 Nov 2004 22:39:58 GMT
 3 Server: Apache/1.3.33 (Unix) mod_auth_passthrough/1.8 mod_log_bytes/1.2
mod_bwlimited/1.4 PHP/4.3.9 FrontPage/5.0.2.2634a mod_ssl/2.8.22 OpenSSL/0.9.7a
 4 X-Powered-By: PHP/4.3.9
 5 Connection: close
 6 Content-Type: image/jpeg

and no cache headers.

Comment 6

[bugzilla]

But funnily enough, my gd.php file is was on a private network which you could 
not access. You accessed the file uploaded by Paul.

I have now uploaded a sample file to http://www.fastworx.com/graphic

The gd.php file will show a 500x500 white block with the date and time on it.
The viewgd.php file will do a highlight_file("gd.php");
The showgd.php file will try to update it automatically.

And guess what? No update on my FireFox!

Output from PHP:

C:\wwwserver\htdocs>\wwwserver\php\php.exe gd.php
Expires: Mon, 26 Jul 1997 05:00:00 GMT
Cache-Control: no-store, no-cache, must-revalidate
Cache-Control: post-check=0, pre-check=0
Pragma: no-cache
Content-type: image/png

ëPNG
→
Ç ►♦┴Góh♣K'╚/µ%é╩¿ëM╔   ♠PLTE      U┬╙~   ☺tRNS @µ╪f   [IDATx£φ═í
Pùáfⁿf½      °┤.W╓╫D²╢OG sε¿∩░?₧Nz                        ~≈☻▼ ♠⌐:ΓÅ«    IEND«B`
é
C:\wwwserver\htdocs>

Comment 7

[timeless]

let's start by confirming that the headers are working correctly.

Comment 8

[Boris Zbarsky [:bzbarsky]]

This has nothing to do with headers, nothing to do with networking, and nothing
to do with the cache.

The src attribute is simply not being changed in this testcase (it's being set
to a value it already has, and the DOM spec defines that in that case no
mutation events are fired and no indication that anything happened is given).

Since it's not being changed, there is no new value.  So no action is taken on
said new value (since it does not exist).

In other words, we never try to load the image, from cache, network, or anywhere
else.

To get this to work the way you want, just removeAttribute("src") before setting it.