How to refresh captcha image on page refresh/load?

Question

I want to force my site to refresh the captcha image everytime it loads, so I have a javascript method triggered with the onload() event. Here I have the following line:

document.getElementById('yw0_button').click;

Firebug doesn't detect any errors, and for testing purposes I have added an alert right after the displayed line, and the alert pops up each time the page is loaded. However, the image doesn't refresh!

This is what I believe is relevant about the view file:

<?php if(extension_loaded('gd')): ?>
    <div class="row">
        <?php echo $form->labelEx($model,'verifyCode'); ?>
        <div>
            <?php
            $this->widget('CCaptcha',
                          array('showRefreshButton'=>true,
                                'buttonType'=>'button',
                                'buttonOptions'=>
                                                    array('type'=>'image',
                                                          'src'=>"/path/images/refresh-icon.png",
                                                          'width'=>30,
                                                    ),                                                            
                                'buttonLabel'=>'Refrescar imagen'),
                          false); 
            ?>
            <br>
            <?php echo $form->textField($model,'verifyCode'); ?>
        </div>
    <div class="hint">
        Porfavor ingrese las letras como las ve en la imagen superior.
        <br/>No hay distincion entre minúsculas y mayúsculas.</div>
    </div>
<?php endif; ?>

Any ideas?

---

@k to the z just saw this! Yes sure, if you could help me find a more proper solution it would be awesome! This is what i believe is relevant about the view file:

<?php if(extension_loaded('gd')): ?>
        <div class="row">
            <?php echo $form->labelEx($model,'verifyCode'); ?>
            <div>
                <?php
                $this->widget('CCaptcha',
                              array('showRefreshButton'=>true,
                                    'buttonType'=>'button',
                                    'buttonOptions'=>
                                                        array('type'=>'image',
                                                              'src'=>"/path/images/refresh-icon.png",
                                                              'width'=>30,
                                                        ),                                                            
                                    'buttonLabel'=>'Refrescar imagen'),
                              false); 
                ?>
                <br>
                <?php echo $form->textField($model,'verifyCode'); ?>
            </div>
        <div class="hint">
            Porfavor ingrese las letras como las ve en la imagen superior.
            <br/>No hay distincion entre minúsculas y mayúsculas.</div>
        </div>
    <?php endif; ?>

In the controller I grant authorized users permission in the accessRules() method to the captcha action, and thats about all. Is there something else I could post?

Answer 1

Add this javascript:

jQuery(document).ready(function() {
    jQuery.ajax({
        'success':function(html){jQuery("#yw0").attr("src",html)},
        'url':'/checkout/finish/captcha?refresh=1',
        'cache':false
    });
    return false;
});

Answer 2

I'd like to add something to the Ezze's answer:

To make clientValidation working, you can use custom captcha validation:

class CaptchaValidatorRefresh extends CCaptchaValidator
{
    public function clientValidateAttribute($object,$attribute)
{
    $js="";

    if(!$this->allowEmpty)
    {
        $message=$this->message!==null ? $this->message : Yii::t('yii','The verification code is incorrect.');

        $js="
            if($.trim(value)=='') {
                messages.push(".CJSON::encode($message).");
            }
        ";
    }       
    return $js;
    }
}

and then

public function rules()
{
    return array(
        array('verifyCode', 'CaptchaValidatorRefresh', 'on'=>'request', 'allowEmpty'=>!CCaptcha::checkRequirements()),                          
    );
}

Answer 3

In case anyone goes through a similar problem whilst getting started with Yii.. This is how I resolved the CAPTCHA issue triggering a click: I have an event triggered the the onload event, which has the following code:

$('#yw0_button').click();

There surely must be a better way, im open to suggestions! However as a temporary solution this works just fine, refreshing the captcha image each time the page is loaded. Good luck!

EDIT: What I did was handle the onload event for my html page like this

<body onload="initialize()"> 
.. 
</body> 

Then in my js file:

function initialize() 
{ 
     $('#yw0_button').click(); 
} 

Answer 4

Here's another (correct?) way to do it (discussion):

Yii::app()->getController()->createAction('captcha')->getVerifyCode(true);

Answer 5

I have used : http://www.yiiframework.com/extension/captcha-extended/

and change CaptchaExtendedAction.php (path: extensions/captchaExtended)

in line 154

$this->renderImage($this->getVerifyCode());  

to

$this->renderImage($this->getVerifyCode(true));

Answer 6

You can write the script before form beginWedget.

on every page load generate the new captcha code.

  $script=' $(document).ready(function() {

            document.getElementById("yw0_button").click();
    });';
  Yii::app()->clientScript->registerScript('yw0_button', $script);

  $form=$this->beginWidget('CActiveForm', array(
    'id'=>'test-form',
    'action'=>Yii::app()->createUrl('controllerName/actionName'),
    'enableClientValidation'=>true, 
    'clientOptions'=>array(
        'validateOnSubmit'=>true,
    ),
  ));

it's work for me.

I hope it's also work for you