Solved

Dynamic image loading with ajax

Posted on 2011-03-18
15
656 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
>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
Comment Utility
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
Comment Utility
I initialy tested it on Chrome :)
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 16

Author Comment

by:JF0
Comment Utility
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
Comment Utility
Did you try to use a full path for testing purpose ?
0
 
LVL 16

Author Comment

by:JF0
Comment Utility
Indeed I have.
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
Comment Utility
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
Comment Utility
simple quote is missing :
$("#imagecode").html("<img src='" + urlOfThePic + " />");
$("#imagecode").html("<img src='" + urlOfThePic + "' />");
0
 
LVL 16

Author Comment

by:JF0
Comment Utility
haha, how embarrassing. Thank you!
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
;-))
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

762 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

13 Experts available now in Live!

Get 1:1 Help Now