• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 668
  • Last Modified:

Dynamic image loading with ajax

I have a form on an HTML which submits information to a php page using GET. The php page parses the information and creates a unique image and displays it. I would like to have the resulting image placed on the HTML page instead of loading the php page.

0
JF0
Asked:
JF0
  • 8
  • 7
1 Solution
 
leakim971PluritechnicianCommented:
you don't need ajax to put/replace/download a pic in a page.

$("#divId").append("<img src='" + urlOfThePic + "' width='320' />"); // add the image in the div

Open in new window

or :
$("#divId").html("<img src='" + urlOfThePic + "' width='320' />"); // replace the current image in the div

Open in new window

0
 
JF0Author Commented:
I think this is a unique case because the image is not created until the php script receives data from the forms.

Here is an example of the php url:
file.php?number=5552221234&content=test&barcode=sms

which outputs the image like this:

Header("Content-type: image/PNG");
ImageCopyResized($output_image,$base_image,0,0,0,0,$image_size,$image_size,$mib,$mib);
    ImagePng($output_image);
}
0
 
JF0Author Commented:
Hmm, I didn't think it would work but I can give my img tag that url and it works. Interesting!
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
leakim971PluritechnicianCommented:
a pic is a pic. what about :

$("#divId").html("<img src='file.php?number=5552221234&content=test&barcode=sms' width='320' />");

or 

var urlOfThePic = "file.php?number=" + number + "&content=" + type + "&barcode=" + modes;
$("#divId").html("<img src='" + urlOfThePic + "' width='320' />"); // replace the current image in the div

Open in new window

0
 
leakim971PluritechnicianCommented:
>Hmm, I didn't think it would work but I can give my img tag that url and it works. Interesting!

eh eh good it's what I mean in my previous post ;-)
0
 
JF0Author Commented:
Hi Leakim - this does not appear to work in Chrome or IE8. Firefox is ok. Any idea why?
0
 
leakim971PluritechnicianCommented:
I initialy tested it on Chrome :)
0
 
JF0Author Commented:
I simply have this code:

$('input.submit_email').click(function(){
//$("#imagecode").hide('slow');
var urlOfThePic = "php/qr_img.php?email=" + $("#form_email input#email").val() + "&barcode=email";
$("#imagecode").html("<img src='" + urlOfThePic + " />");
//$("#imagecode").show('slow');
});

When I click the submit button it does nothing (so it seems). If I change the function to be just alert("hi"); then I get the alert.

Unless there is anything obvious here I will start a new question with the entire code.
0
 
leakim971PluritechnicianCommented:
Did you try to use a full path for testing purpose ?
0
 
JF0Author Commented:
Indeed I have.
0
 
leakim971PluritechnicianCommented:
Do you have the correct path in the alert ?
If you copy/paste it in the browser address (with the address), can you see the picture ?

$('input.submit_email').click(function(){

      alert("php/qr_img.php?email=" + $("#form_email input#email").val() + "&barcode=email");
      
});

Do you have a live link?
0
 
JF0Author Commented:
In FF, IE, and Chrome the alert looks good.

Here is the page, I am using the email tab for testing alerts and other ideas. The rest of the tabs are normal and work in FF.

http://preview.tinyurl.com/4mmnjqo 
0
 
leakim971PluritechnicianCommented:
simple quote is missing :
$("#imagecode").html("<img src='" + urlOfThePic + " />");
$("#imagecode").html("<img src='" + urlOfThePic + "' />");
0
 
JF0Author Commented:
haha, how embarrassing. Thank you!
0
 
leakim971PluritechnicianCommented:
;-))
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 8
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now