We help IT Professionals succeed at work.

How to get an ajax call to change an img src and update the displayed image without manual browser refresh

James Froggatt
on
I have an Ajax call;

  var xhr= new XMLHttpRequest();
        // this executres when the ajax request in completed, i.e. the results
        // are sent back from php
        xhr.onload = function (){
           document.getElementById("myLocationImage").src=this.responseText;
        }
        xhr.open("POST", "latLongToMap.php");
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send("lat="+$latitude+"&lon="+$longitude);

Open in new window


This sends latitude and longitude coordinates from an autosuggest drop down box to my php code at latLongToMap.php.

latLongToMap.php does a load of processing and creates an image file that is returned to the ajax request by

echo ($img);

Open in new window


This code then changes the img src of

  <img id="myLocationImage" src="worldmap-withdot.jpg" width="150" height="150">

My problem is that the ajax request does work, and does change the file on the server. But for me to see the image, I have to CONTROL-F5 my browser.

What do I need to do so I see the new image file without having to manually refresh my browser?

I have attached an animated gif (I hope it works) showing my problem. When the gray image appears, I have to CONTROL-F5 to see the new image.

My ajax problem in real time
Please help, I've played around with various ideas I've found on the internet, but with no joy.

Thankyou
James

PS: Note I'm aware it always says 'Toulouse' by the label, I haven't done that bit of my code yet...
Comment
Watch Question

Author

Commented:
.. I also notice, when I 'Inspect' the code in Google Chrome when the gray image is showing (before I have to refresh the page manually to 'see' the image) I see this code in the image src.

2020-02-23_13-01-33.jpg
I'm not sure why I'm seeing a resource reference and not the actual file name.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Just change the src value of the image - it will automatically change

$.ajax({
   //...
}).then(function(resp) {
   document.getElementById('targetImg').src = resp.imageSrc;
});
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
Had another look - your problem is a path issue.

The src attribute of the image might take a relative path when you code it but on parsing the browser changes this to a full path - you can see this if you dump the contents of
<img src="abc.jpg">
You will get
http://sourcedomain.com/images/abc.jpg (or similar)

When you set the src you need to include the path.

So you can either include the full path in the image value you return
OR
In JavaScript you can get the path of the existing src - strip off the filename and append the new one.

Author

Commented:
Hi Julian,

I've tried these options and it's still doesn't seem to work. It seems that my ajax request returns "Resource id #5" and not the image.

In my javascript if I use the following code to display the responseText

 
 xhr.onload = function (){
          alert (this.responseText);
           //document.getElementById("myLocationImage").src=this.responseText;
        }

Open in new window


The alert displays "Resource id #5", this also appears in the src="Resource id #5" as in my screenshot above.

I'm trying to research what this 'Resource id #5' actually is,

Thank you for your help so far,
James
I seem to have come across a solution to my problem, and it seems to have come from browser caching.

If in my php code I return the string as follows

$string = "worldmap-withdot.jpg?rnd=".substr(md5(rand()), 0, 7);
echo ($string);

Open in new window


and then change the src with

xhr.onload = function (){
          //alert (this.responseText);
           document.getElementById("myLocationImage").src=this.responseText;
        }

Open in new window


It seems to work just find. I think the addition of a random string to the end of the file name refreshes the cached image.

Eitherway, thank you for taking a look at this Julian.

Best wishes
James

Author

Commented:
Thank you Julian for your help.