Javascript - Load an image onclick

Question

OK, I'm actually calling some java middleware that returns a captcha image. The captcha image loads in the page on page load simply with:

<a href="#" id="ci"><img id="stickyImg" src="stickyImg" /></a>

I want to reload the captcha image onclick of the current captcha image. I've tried a few things but am not getting anything working.

By "tried a few things" I mean I have tried:

$("#ci").click(function(){

        $("#stickyImg").load('stickyImg');

        return false;
    });

which indeed loads the image but it does it by placing the raw binary image data inside the image tag so I get:

<img src="stickyImg"><img xmlns="http://www.w3.org/1999/xhtml"&gt;pngbinarygibberishsymbols&lt;/img&gt;

Hmmm... maybe I need to specify putting the image into the src attribute? Perhaps? What do you all think?

---

EDIT:

Ugh! Putting the response into my img src results in:

<img src="    * captcha image�PNG  ��� IHDR�������Ketc, etc">

The raw binary data being output. What the heck?

---

SOLUTION:

The solution comes from another, similar, post I made on this. You can read about it here.

In the end the (*edited thanks to Lee) code that works looks like:

$("#ci").click(function(){

        $("#stickyImg").attr('src', 'stickyImg?' + (new Date().getTime())); 
        return false;
    });

Answer 1

this is a good post: http://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html

i referenced here: http://stackoverflow.com/questions/1095102/how-do-i-load-binary-image-data-using-javascript-and-xmlhttprequest

Answer 2

it would be helpful if you would post a more complete example including the markup that embeds your image in the initial document; but making a few reasonable assumptions, I think you just need something like the following...

assuming that your markup is something like:

<div id="ci">
  <img src="/stickyImage" />
</div>

then the following JS should do the trick:

$("#ci").click(function(){

    $("img",this).remove();
    $(this).html('<img src="/stickyImage" />');

    return false;
});

good luck.

---

[edit] If you're using this code to load an image that's generated dynamically on your server (or that may change periodically, for some reason), then you'll also want to be sure that you properly account for the browser's tendency to cache data that it believes to be static. There are two way that this is commonly accomplished (either will work):

1) ensure that the url is always different every time the image is loaded. You can do this easily, by just appending a random number to the query string portion of the image url. So, in the above example, $(this).html('<img src="/stickyImage" />'), would become $(this).html('<img src="/stickyImage?"+(new Date().getTime()) />'). (This is essentially identical to the approach that the OP ultimately settled on -- see OP's edits above).

2) ensure that the server returns the image data, including the proper HTTP headers in the response to indicate that the image is dynamic and shouldn't be cached. You can see more details about how to send no-cache headers on this SO post.

Here's how you would set the needed headers from within a Java servlet:

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0); // Proxies.

Option #2 is perhaps the more "technically correct" way to address the caching issue, but as I said above - either will work, and option#1 is a very reliable approach that is often substantially easier than option #2.

All this being said - the caching issue is a separate issue from the original question that was asked here. The original question involved display of binary blobs inline in the HTML. That problem resulted from the incorrect use of the jquery load() function. The OP settled on an approach that uses the attr() function to set the src attribute. The approach I've shown involves creating a new img element, and removing the old element. Either of these approaches will work, but the load() function will not work for this purpose.