AJAX displaying images

[Raconteur]

Hi all,

I am having a tough time finding a solution to a specific problem.  I have a tiny CMS used to manage success stories.  The success stories include name, blurb, and an image.  The admin screen is laid out with the input/edit section at the top, and the list of success stories in a table below.  Typical list/detail scenario where the user clicks on a row in the table and via AJAX the data is displayed in the form at the top.

Now, the problem is, I want to be able to display the actual image when that happens.  I have the IMG tag in the page template, but I cannot get the image to actually display.  Note that the actual binary data is stored in a BLOB in the DB.  I have tried setting the src property of the Image object associated with the IMG tag, but that doesn't seem to work.  I can't imagine that this is not possible, and am hopefully just overlooking something simple.

My link on each item in the list calls a JavaScript function which creates and opens the XMLHTTP request to call the PHP code to fetch the requested data.  The data is fed back in a "~" delimited string, and the JavaScript function that handles the result breaks it apart and stuffs it into the appropriate objects on the screen.  Is there some way to do this on the client, or is this one of those cases where AJAX won't work and I have to do the round-trip and have to code it all in PHP?

I realize this question is really walking the edge of being PHP related, but I alway get great help here, and figured a PHP person would have a far better idea of how to do this.  Thanks for tolerating a questionable question!  ;)

Can anyone shed any light on this for me?

Thanks in advance!

Chris

[Monkeymatt]

Are you attempting to put the link in the image tag by simply making a long string with all of the correct values that has the HTML and then dumping that string into somewhere? You need to do it by creating and inserting new elements using the javascript function and then add urls and such:
[code]
var img=document.createElement("img");
img.src=image_url;
// then insertBefore or insertAfter into the main area
[/code]

Monkeymatt

[Raconteur]

Hi Matt,

Thanks for the reply.  Not sure I am understanding what you are asking.

I have this in a template that is used by the PHP page serving the CMS:  <img src="images/pix.gif" id="ssImage" />

When I parse the result string of the query in the JS function that handles that, I am doing:  document.findElementById("ssImage").src = results[3]
where results[3] contains the binary data of the image.

This just seems wrong, since the src property is looking for a file name, and it doesn't seem to be working.

Does that make sense, and help answer your question?

Cheers,

Chris