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;
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
This code then changes the img src of
<img id="myLocationImage" src="worldmap-withdot.jpg"
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...
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"
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.
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...
AJAX
Last Comment
James Froggatt
Just change the src value of the image - it will automatically change
$.ajax({
//...
}).then(function(resp) {
document.getElementById('t
});
$.ajax({
//...
}).then(function(resp) {
document.getElementById('t
});
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.
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.
ASKER
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
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'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;
}
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
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
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.
ASKER
Thank you Julian for your help.
I'm not sure why I'm seeing a resource reference and not the actual file name.