Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Dynamic image loading with ajax

Posted on 2011-03-18
15
Medium Priority
?
665 Views
Last Modified: 2012-05-11
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
Comment
Question by:JF0
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 7
15 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 35165601
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
 
LVL 16

Author Comment

by:JF0
ID: 35165724
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
 
LVL 16

Author Comment

by:JF0
ID: 35165780
Hmm, I didn't think it would work but I can give my img tag that url and it works. Interesting!
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 82

Expert Comment

by:leakim971
ID: 35165795
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35165809
>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
 
LVL 16

Author Comment

by:JF0
ID: 35182634
Hi Leakim - this does not appear to work in Chrome or IE8. Firefox is ok. Any idea why?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35182681
I initialy tested it on Chrome :)
0
 
LVL 16

Author Comment

by:JF0
ID: 35182728
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35183060
Did you try to use a full path for testing purpose ?
0
 
LVL 16

Author Comment

by:JF0
ID: 35183128
Indeed I have.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35183169
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
 
LVL 16

Author Comment

by:JF0
ID: 35183224
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
 
LVL 82

Expert Comment

by:leakim971
ID: 35183391
simple quote is missing :
$("#imagecode").html("<img src='" + urlOfThePic + " />");
$("#imagecode").html("<img src='" + urlOfThePic + "' />");
0
 
LVL 16

Author Comment

by:JF0
ID: 35183425
haha, how embarrassing. Thank you!
0
 
LVL 82

Expert Comment

by:leakim971
ID: 35183633
;-))
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Many old projects have bad code, but the budget doesn't exist to rewrite the codebase. You can update this code to be safer by introducing contemporary input validation, sanitation, and safer database queries.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question