CODEWITHSUNDEEP
javascriptphpajaximagexmlhttprequest
Mick Sulley
Mick Sulley

Reputation: 99

How to use AJAX call to refresh img src

I have a PHP script picQuery.php which returns the path to a picture. I have another script which calls the picQuery.php and should then display the picture, but I cannot figure out how to do it.

The code I have displays the file path in picFrame. What I want is something like the following line which I have commented out as it doesn't work. How should it be written?

HTML:

<!DOCTYPE html>
<html>
<body>
<form action=""> 
<button type="button" onclick="getPic(this.value)">Click Me!</button>
</form>
<p id="picFrame"</p>

<!--<img src=<p id="picFrame"</p>  alt="text"  style="width:304px;height:228px;">-->

<script>
function getPic() {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("picFrame").innerHTML = this.responseText;
      alert('response = '.this.responseText);
    }
  };
  xhttp.open("GET", "picQuery.php?q=4", true);
  xhttp.send();   
}
</script>
</body>
</html>

picQuery.php

<!DOCTYPE html> <html> <body> <?php echo "PIC1.jpg" ?> </body> </html>

Upvotes: 1

Views: 1774

Answers (1)

Sᴀᴍ Onᴇᴌᴀ
Sᴀᴍ Onᴇᴌᴀ

Reputation: 8297

There are multiple ways this could be achieved.

The simplest might be to create an instance of Image, assign the responseText to the src property of the image, set the style property accordingly, and then set the innerHTML of the element with id value picFrame to the outerHTML of the image.

xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var image = new Image();
        image.src= this.responseText;
        image.style = "width:304px;height:228px;";
        document.getElementById("picFrame").innerHTML = image.outerHTML;
    }
}

See it demonstrated in this phpfiddle.

Otherwise the <img> tag that is currently commented out could be used if the id attribute was changed or if it was accessed via the DOM as a child of the paragraph element. Though if the initial value of the src property is empty or an invalid URL for an image, then the browser might display a broken image icon.

So the image could be updated like this:

<p id="picFrame">
    <img alt="text" id="picFrameImg" style="width:304px;height:228px;" />
</p>

And then accessed via Javascript:

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
    document.getElementById('picFrameImg').src = this.responseText;
}

See a demonstration of this below. Hopefully the AJAX still works in the long term, though it might not, given the phpfiddle code files. If it stops working, this plunker might be a good demonstration but bear in mind that picQuery.php is NOT being executed as a regular PHP file.

function getPic() {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("picFrameImg").src = this.responseText;
    }
  };
  xhttp.open("GET", "http://main.xfiddle.com/code_65644594.php?q=4", true);
  xhttp.send();   
}
<form action="">
  <button type="button" onclick="getPic(this.value)">Click Me!</button>
</form>
<p id="picFrame">
  <img alt="text" id="picFrameImg" style="width:304px;height:228px;" src="" />
</p>

UPDATE 4/21/2017

The PHP code provided will not work with the AJAX approach. It should return the path of the image without the html tags around it.

So update the PHP from:

<!DOCTYPE html> <html> <body> <?php echo "PIC1.jpg" ?> </body> </html>

To this:

<?php echo "PIC1.jpg"; ?>

That way, the AJAX code will essentially be updating the image tag from

<img alt="text" id="picFrameImg" style="width:304px;height:228px;" />

to this:

<img alt="text" id="picFrameImg" style="width:304px;height:228px;" src="PIC1.jpg" />

Upvotes: 1

Related Questions