Solved

Dynamic image loading with ajax

Posted on 2011-03-18
15
658 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
  • 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
 
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

910 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now