Solved

Dynamic image loading with ajax

Posted on 2011-03-18
15
664 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 500 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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
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

Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
There are times when I have encountered the need to decompress a response from a PHP request. This is how it's done, but you must have control of the request and you can set the Accept-Encoding header.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

628 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