Reload Captcha is not working in jquery PHP

Question

I am using jquery php captcha in magento.Captcha is getting generated fine but I also want to refresh it but not getting how to do it.Here is my code which I used.

HTML Code

    <span id="reload_captcha_span"><img id="captcha_image" src="<?php echo $this->getUrl('helloworld/index/captcha'); ?>"/></span>
<span id="reload_captcha">reload</span>

JQuery Code

jQuery('#reload_captcha').click(function(){
                jQuery.ajax({
                        url: '<?php echo $this->getUrl('helloworld/index/captcha'); ?>',
                        success:function(data){
                            jQuery('#reload_captcha_span').html("");
                            jQuery('#reload_captcha_span').html(data);
                        }
                    }); 
            });

PHP Code

session_start();
        $ranStr = md5(microtime());
        $ranStr = substr($ranStr, 0, 6);
        $_SESSION['cap_code'] = $ranStr;
        $newImage = imagecreatefromjpeg("cap_bg.jpg");
        $txtColor = imagecolorallocate($newImage, 0, 0, 0);
        imagestring($newImage, 5, 5, 5, $ranStr, $txtColor);
        header("Content-type: image/jpeg");
        imagejpeg($newImage);

In response I am getting unknown data may be that is image itself.

Please help me.

Thanks in advance!

Answer 1

Try this:

jQuery('#reload_captcha').click(function(){
    var d = new Date();
    jQuery('#captcha_image').attr('src', '<?=$this->getUrl('helloworld/index/captcha')?>?'+d.getTime());
});

To fetch the same image url, but we add a random (time) parameter, so it's not fetched from the cache.