troubleshooting Question

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

Avatar of James Froggatt
James FroggattFlag for France asked on
AJAX
6 Comments1 Solution82 ViewsLast Modified:
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);

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

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...
ASKER CERTIFIED SOLUTION
James Froggatt

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 6 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros