Can a text and an Image be displayed on a browser using JQuery and PHP?

Question

I am learning to use JQuery and PHP. I simply want to display a text and an PHP generated image on a browser at a specific interval.

HTML Page:

<html>

<head>
  <title>Testing PHP</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    <!--
    $(document).ready(function() {
      loadPHP();
    });

    function loadPHP() {
        $("#PHP_data").load("loadPHP.php");
        setTimeout(loadPHP, 2000);
      }
      //-->
  </script>

</head>

<body>
  <div id="PHP_data"></div>
</body>

</html>

loadPHP page

<?php

$rannum = mt_rand(1,100);

echo $rannum;

$thick = 10;
// create a 200*200 image
$img = imagecreatetruecolor(200, 200);

// Add antialias
imageantialias ($img, true);

// allocate some colors
$white = imagecolorallocate($img, 255, 255, 255);

// draw the dashed circle

for($t = 1;$t<($thick+1);$t++) {
  for($i = 0;$i<360;$i+=10) {
      imagearc($img, 100, 100, 200-($t/5), 200-($t/5),  $i, $i+5, $white);
      imagearc($img, 100, 100, 200+($t/5), 200+($t/5),  $i, $i+5, $white);
  }
}

// output image in the browser
header("Content-type: image/png");
imagepng($img);

// free memory
imagedestroy($img);

?>

When I call up the HTML Page I get this: enter image description here

The Random number seems to be working fine. I do see it changing every two seconds, but the image is all screwed up. All I see is binary characters. Is this because you can only return image from PHP and absolutely no TEXT along with the image? How can I fix this?

HTML doesn't work that way. You need to look at loading your content into the `src` attribute of an `` element not into a div. — Mike Brant, Dec 02 '14 at 17:17

score 1 · Answer 1 · answered Dec 02 '14 at 17:23

1

Perhaps instead of:

<div id="PHP_data"></div>

you should do something like:

<img src="loadPHP.php">

You wouldn't need the javascript load() call.

answered Dec 02 '14 at 17:23

Jonathan M

17,145
9
58
91

Well if you this, then you can only return back from PHP image. I also want to echo text and php image. – ThN Dec 02 '14 at 17:29
1

This does not solve the problem of wanting to do this at regular intervals. – Mike Brant Dec 02 '14 at 17:38

Mike Brant · Accepted Answer · 2014-12-02T17:33:33.143

HTML doesn't work that way. You need to look at loading your content into the src attribute of an element not into a div.

Here is what I would suggest. Make your HTML look like this:

<body>
    <div><img id="changing_image" src=""></div>
</body>

Note, you are now working with an image element for which we need to change the src attribute.

And have your javascript look like this:

<script type="text/javascript">
<!--
$(document).ready(function(){    
    loadPHP();
});

function loadPHP(){
    var cacheBuster = Math.random().toString(36).slice(2);
    $('#changing_image').attr('src', 'loadPHP.php?q=' + cacheBuster);
    setTimeout(loadPHP, 2000);
}
//-->
</script>

Note here that we introduce a random variable that we are introducing into the URI. The sole purpose here is to prevent any browser-side caching. This parameter would not be used by your PHP script in any manner.

To your question in other comments about loading both image and text, you need to keep in mind that any individual web request can only send data of one content type. If you want to send image data and text data, you will need two separate requests. That may mean that your javascript function would need to look something like:

function loadPHP(){
    var cacheBuster = Math.random().toString(36).slice(2);
    $('#changing_image').attr('src', 'loadPHP.php?q=' + cacheBuster);
    $('#some_text_element').load('different_php_script_that_generates_html.php');
    setTimeout(loadPHP, 2000);
}

Or have the just a single $.load() call like you were originally doing, but have it return HTML content like

<img src="image_generator.php?q=some_cache_buster">
<div>Some text</div>

Either way, you will need a separate server-side side (or logic path within same script) to generate the image separately from the text/html.

So, Basically what you are telling me is that you can only have PHP return image and nothing else. If I want php to return anything else I need to have a separate PHP file. — ThN, Dec 02 '14 at 17:41
@ThN The main takeaways for you should be: You don't just serve image content up into an arbitrary HTML element, you need to serve it into a `src` attribute and you can only serve one type of content from a web request at any time (as far as Content-type headers go). There is an option as noted by @Falk to serve up the Base 64 encoded image content directly into the source attribute. But here you would provide this to the calling client as part of a text/html response not an image/png response. — Mike Brant, Dec 02 '14 at 17:47

bastos.sergio · Answer 3 · 2014-12-02T17:33:39.407

1

This should work:

<html>

<head>
  <title>Testing PHP</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    <!--
    $(document).ready(function() {
      loadPHP();
    });

    function loadPHP() {
        $("#PHP_data").html('&lt;img src="loadPHP.php?rnd=' + Number(new Date()) + '" /&gt;');
        setTimeout(loadPHP, 2000);
      }
      //-->
  </script>

</head>

<body>
  <div id="PHP_data"></div>
</body>

</html>

edited Dec 02 '14 at 17:33

answered Dec 02 '14 at 17:28

bastos.sergio

6,684
4
26
36

It would not work after first iteration, as the browser would just server repeated calls from same image URL from cache. – Mike Brant Dec 02 '14 at 17:29
Still my answer is doable... Changed my answer to send out a querystring parameter, which in effect prevents browser cache... – bastos.sergio Dec 02 '14 at 17:35

score 0 · Answer 4 · edited May 23 '17 at 10:26

0

If you are serving an image you should use an img tag with the src pointed to loadPHP.php. To refresh the image every few seconds you should take a look at Refresh image with a new one at the same url which suggests that you should append a timestamp to the img URL in order to fool the cache. In the PHP page, you shouldn't output a random number, it will mess things up.

Alternatively, you could serve HTML instead of image/png from the PHP script in the format <img src="data:image/png;base64,[data-uri]>. To generate the a data URI from GD, have a look at Convert GD output to base64.

edited May 23 '17 at 10:26

Community

1
1

answered Dec 02 '14 at 17:29

Falk

26
1
6

yes, I understand that and I just made your change. it works but I also want to echo text from within the same PHP file. Is that possible? – ThN Dec 02 '14 at 17:32
Use my alternate approach and just echo HTML data and not a raw png. – Falk Dec 02 '14 at 17:35

Can a text and an Image be displayed on a browser using JQuery and PHP?

4 Answers4