Question

Is there any way I can use the .load event(or any other jquery event) with a dynamic image such as this

Whenever I try to use the .load or .get method to reload that page into the document it just come out as �������� in Firefox and �PNG in internet explorer.

What am I missing here? What would be the best way to do this?

Overall what I’m trying to accomplish here is to reload the captcha.php file into a div when a link is clicked and have a different captcha image be shown without refreshing the page.

The problem can be found here
http://www.seewhosoutthere.com/createAccount

clicking on the little blue “refresh” button next to the captcha will give the result I’m talking about.

The code currently being used for that page is

$('a#refresh').click(function(){
    $('#captcha').load('captcha.php');
});

Answer 1

Instead of .load() (which isn’t intended for binary data…which is why you get those fun symbols with the encoding) you just need to create an <img> element with the right src and put it where you want in the document, for example:

$("<img />", { src:"http://www.seewhosoutthere.com/captcha"}).appendTo("#myDiv");

You can test it out here.