Refreshing an image in Safari

[jackbenimble4]

Hello, this is my first time on this particular site. I'm here because of a problem I'm having with one of my latest applications.

This application uses Javascript, PHP, and the GD Library of PHP to create images based on user input. For example, the user can choose to add text, and a div with various forms controlling every aspect of the text (color, size, angle, x and y axes, font, the string, etc.) appears as a layer. The user can add as many elements/layers as they want, and click a button to save the data through Ajax.

Everything works flawlessly in Mozilla, and as well as can be expected in Internet Explorer. However, with Safari 2.0.4, the image never updates. The ajax request goes through, and the data gets into the database, but the image isn't updated.

Here's the line I use to refresh the image:

getId("gamercardBg").src = 'preview.php?t=' + templatehash + '&d=' + new Date().getTime();

It simply gets the image element, and changes the source to the url of the image, with an appended 'dud' variable to trick the browser into downloading it again, instead of calling it from it's cache. Is there any reason why this shouldn't work in Safari? Does Safari have some weird caching issues that I can somehow change through HTTP Headers, or something?

If Safari ignores the appended timestamp, maybe I could use mod_rewrite to fake a totally different image filename.

Any feedback would be appreciated, :)

[djr33]

That seems correct to me. Is this a javascript issue, though? I don't know that much about javascript myself, so I'm not sure, but it might be using "getId", rather than "getElementByID" or "document.images.", etc.
Does this code work if you change the SRC to another image entirely?

The addition of a timestamp has worked well in the past for me.

I have a working example going (and I'll send you a message with that URL, as I don't want it public yet), and one thing that does is sets an intermediate image while loading. Then it displays the new one. Maybe that would help. Either display a loading image or remove the old image until the new one loads, rather than just directly replacing it.

[jackbenimble4]

Thanks for that. I'll try that as I've been meaning to add an animated gif loading icon in the interim before the response is received from the server.

Also, I enabled the debug menu for Safari, and I tried viewing the DOM tree before and after I click the button to send the data. The source of the image never changed. Here's the surrounding code:



req.onreadystatechange = function() {
if(req.readyState == 4 && req.status == 200) {
getId("gamercardBg").src = 'preview.php?t=' + templatehash + '&d=' + new Date().getTime();
//alert(req.responseText);
//alert("k");
}
}


So, my best guess now is that there is something different between how Safari handles the response from the server, and how Firefox and IE do. I'm going to fiddle, and post back.

[jackbenimble4]

Hope you guys don't mind me posting another post instead of editing my last one -- I just hate it when someone posts in the short period when I'm editing it, and then I just end up posting another anyways.

djr33, You were right that the problem was not in the javascript like I thought. It turned out, my php script that saves the data wasn't replying with anything because it's not really necessary. Apparently when there's no content in the reply from the server, Safari won't run the onreadystatechange function. Everything is working like a charm now across all browsers. Now time to add that loading gif.