How can i load a picture with jquery?

Question

Hi,

i am currently working on a class that generates diagramm's as pictures with php. I want to load these pictures dynamically with jquery. How can i do that?? I wont have a real picture file, just the content of the file when i call it with ajax... And i cant simply define the phpscript as the src because i need to pass Post Parameters to the picture...

EDIT:

Okay.. I think i have to eyplain it a bit further...

Here is the html code:

<div>
<img id="image" />
</div>
<input type="button" onclick="loadPicture();" />

When the button is pressed, some data should be send to the php Script that generates the picture. A Callback function or something similar should now post the picture into the img- element. Simply posting the Picture into the img tag doesnt work. The folloeing code would work, but how can i add POST params??

<img src="<scriptname>.php" />

Answer 1

Http POST requests aren't meant to return resources. Why don't you use a GET request? The 'REST' way to do it will be to create the image with a POST request and then load it with a GET request. You need to define a URL mapping for your resources.

Answer 2

I'm not very sure if I got it right from what you said but you could use the $.post() method that would return whatever you need through its callback. Something like this:

$.post("file.php",{param: val},function(data){
    $("#div").html(data);
})

If you could explain further maybe we'll understand better. Hope this helps.

Answer 3

Heres my Situation.

Im tryind to relaod a div in a page with load().

I first tryed with a GET. Worked fine with Firefox but not IE8.

After a bit of reading, i found out that i had to POST my PARAM so i went on and did a POST.

The result is just the same. It wont work in IE8. Here is the line im using for the POST.

$(\'#test_1\').load( \'../ajax_http.php\',{variable2:xload})

Firebug, (firefox debug add-on), Is seeing the action as a POST and see the PARAM value So its going trough as a POST but still not working.

This is the actual line im using:

echo '<div id="test_1" class="test_1" OnClick="$(\'#test_1\').load( \'../ajax_http.php\',{variable2:xload});">';

Any ideas?

Answer 4

Is there any actual need to use AJAX / jQuery? Or are you simply putting it in because it's cool?

Here's what I would do:

if (isset($_POST['createImage'])){
    // This means that the button was clicked
    // Generate your image, and then display it:
}

// Regardless, you would now show your form
// That way if values were to be changed, the graphic can be recalculated.

This way, you achieve your desired output (the graphic loading depending on the form output) and a single click to generate that output.

Answer 5

No people! You basically have 3 options as I see it.

Method 1 - Inline the image

Do what Brayn said, but data should be a base64 encoding of your image.

$("#div").html(data); // instead of this
$('#image').attr('src','data:image/gif;base64,'+data); // try something like this

But I don't like the idea of inlining the image or passing post data. Base64 might get a bit large for big images too.

Method 2 - Save the image

You can $.post the data like before, then save the image, and return the URL of the image.

Method 3 - Use GET

Modify your image-generating script to accept GET data. If you have a lot of data to pass, try compressing it somehow, or perhaps you can use SESSION variables.