Cotonti / Open Source PHP Content Management FrameworkContent Management Framework

Forums / Craftwork / Client-side / [solved] Construct img tag with javascript and php

JonnyM
#1 2009-05-13 03:19
Hi,

I'm trying to construct a dynamic img tag by doing the following:

1. Call a PHP file like so:
<script type="text/javascript" src="http://localhost/myfile.php?id=1"></script>

2. This PHP file makes some SQL calls and then echoes out:
echo "document.write(\"<img src=\"http://www.huddletogether.com/projects/lightbox2/images/image-2.jpg\">\")";

Now this works for echoing out text like "Hello" or whatever, but any image won't show.
So my question is, how should I go about do this ?

ps. This can NOT be solved by preconstructing the img tag, since the output of the PHP file might just as well be a movie or flash or whatever.

I have looked all over the net and this is how far I have gotten. Since I don't know Javascript / AJAX at all, I'm stuck for now.

Thx in advance for any help !

This post was edited by JonnyM (2009-05-14 01:46, 13 years ago)
tensh
#2 2009-05-13 22:09
Hmm, try the iframe tag? You can also try the "a" tag ( a href="..." ).

See here for inspiration:
http://flowplayer.org/demos/installation/index.html

It uses a smart way of display swf file, why not anything else. :)
GHengeveld
#3 2009-05-13 23:06
You need to parse the php file as javascript. Try this:
<?php
header('Content-type: text/javascript');
echo "document.write(\"<img src=\"http://www.huddletogether.com/projects/lightbox2/images/image-2.jpg\">\")";
?>
You can use the same technique for dynamically creating images, css files, xml feeds and all kinds of different formats.
JonnyM
#4 2009-05-14 01:13
Thx for your answers and @Koradhil, I actually tried that but it wouldn't load the image like that.
But after hours of searching I found an answer and will post it in case anyone else needs this.

Code you put in your HTML file:
<div id="mydivtag"><script type="text/javascript" src="http://www.mysite.com/myjavascriptfile.js"></script></div>

Code inside the .js file:
var xmlhttp
function getPHPtext()
{
xmlhttp=GetXmlHttpObject();

if (xmlhttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
  
var url="./the/path_to/phpfile.php";
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{
if (xmlhttp.readyState==4)
  {
  document.getElementById("mydivtag").innerHTML=xmlhttp.responseText;
  }
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

getPHPtext();

And finally, in the PHP file you can do whatever. Like get data from your database and then just echo it out. Anything the PHP file outputs through echo will be transfered through javascript to the HTML page. Even images and such.
GHengeveld
#5 2009-05-14 07:24
Why not use jQuery's built in ajax functions? You're reinventing the wheel here...
$.get(url, data, callback, type) will replace basically the entire code above.

Still, I believe there are more efficient ways to load a dynamic image. For example, you could use php to generate an image using the GD library. That way you won't need any javascript at all.

<?php
header("Content-type: image/jpeg");
$imageurl = 'http://www.huddletogether.com/projects/lightbox2/images/image-2.jpg';
$image = imagecreatefromjpeg($imageurl);
@imagejpeg($image);
?>

You can do whatever you want in there with php. You could even dynamically set the content type. Result of the code above is here.

This post was edited by Koradhil (2009-05-14 07:42, 13 years ago)
JonnyM
#6 2009-05-14 13:30
Well the thing is, the javascript code inside the HTML is a tag clients may use wherever they want. But the rest is found on my server. So I had my reasons for doing it "the hard way". Ps. I'm displaying more than an image, the above is just an simple example. But anyways, thx for the help all. Oh and don't mind the msg formatting, writing on mobile. :)