I have a php page where I display few images with radio buttons. On start two images are pre selected and I merge those and show the combinations. But user can choose a different image and click on MergeImages button, which should display the combination of two images selected.
I am doing this in one php file, where I pass the selected contents via POST to the same file through AJAX.
$.ajax({
url: 'CreateImage.php',
type: 'POST',
data: {imagename : newImageName},
success: function(data) {
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
I am getting a success and now I would like to display the data so that I can see the newly created images. How do I do this?
You'll want to send with the ajax call the "dataType: 'image'," so the ajax call knows what to do with the returning data -- other options that I've used are dataType:'json' or 'text' or 'html', etc. http://docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests
actually it won't take anything but a string, so send back the image src to display. (I was thinking you wanted to return the actual image itself).
Since you are running AJAX, which uses HTTP protocol for communication, HTTP relies on MIME type
. Identify the callback by using 'image' as dataType
.
dataType:'image',
If you want to display the data in a DIV, you can do this:
html:
<div id="myemptydiv"></div>
javascript:
$("#myemptydiv").append(data);
php (if you are in the same file, you have to clear the buffer 1st but you should use another php file for ajax requests instead):
<?php
if(isset($_POST['imagename'])){
while(@ob_end_clean());
//do stuff here
echo $data;
exit;
}
?>