Avatar of James Froggatt
James Froggatt
Flag for France asked on

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

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 (){
        xhr.open("POST", "latLongToMap.php");

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.


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

Avatar of undefined
Last Comment
James Froggatt

8/22/2022 - Mon
James Froggatt

.. 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.

I'm not sure why I'm seeing a resource reference and not the actual file name.
Julian Hansen

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

}).then(function(resp) {
   document.getElementById('targetImg').src = resp.imageSrc;
Julian Hansen

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
In JavaScript you can get the path of the existing src - strip off the filename and append the new one.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
James Froggatt

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);

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 Froggatt

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
James Froggatt

Thank you Julian for your help.