Как перезагрузить изображение Zend Captcha при нажатии кнопки обновления?

Ответ 1

Всего два быстрых фрагмента, но я думаю, вы получите эту идею. Настройте имя элемента и селекторов для ваших нужд.

В вашем контроллере добавьте метод для создания нового captcha

public function refreshAction()
{
    $form = new Form_Contact();
    $captcha = $form->getElement('captcha')->getCaptcha();

    $data = array();

    $data['id']  = $captcha->generate();
    $data['src'] = $captcha->getImgUrl() .
                   $captcha->getId() .
                   $captcha->getSuffix();

   $this->_helper->json($data);
}

В вашем представлении script (я использую mootools для ajax-запроса)

document.addEvent('domready', function() {
     $$('#contactForm img').addEvent('click', function() {
        var jsonRequest = new Request.JSON({
            url: "<?= $this->url(array('controller' => 'contact', 'action' => 'refresh'), 'default', false) ?>",
            onSuccess: function(captcha) {
                $('captcha-id').set('value', captcha.id);
                $$('#contactForm img').set('src', captcha.src);
            }
        }).get();
    });
});

Изменить: Добавлен pahan jquery

$(document).ready(function() {
    $('#refreshcaptcha').click(function() { 
        $.ajax({ 
            url: '/contact/refresh', 
            dataType:'json', 
            success: function(data) { 
                $('#contactForm img').attr('src', data.src); 
                $('#captcha-id').attr('value', data.id); 
            }
        }); 
    }); 
});

Ответ 2

@user236501 На самом деле это может быть любой тип элемента формы Zend (например, Button). Вы даже можете установить ссылку для интерактивного обновления как параметр описания Zend_Form_Element_Captcha, например:

        $captcha = new Zend_Form_Element_Captcha('captcha', array(
            'label' => 'Some text...',
            'captcha' => array(
                'captcha' => 'Image',
                'wordLen' => 6,
                'timeout' => 300,
                'font' => './fonts/Arial.ttf',
                'imgDir' => './captcha/',
                'imgUrl' => 'http://some_host/captcha/'
            ),
            'description' => '<div id="refreshcaptcha">Refresh Captcha Image</div>'
        ));

но в этом случае необходимо изменить параметры декоратора Description, например:

        $this->getElement('captcha')->getDecorator('Description')->setOptions(array(
            'escape'        => false,
            'style'         => 'cursor: pointer; color: #ED1C24',
            'tag'           => 'div'
        ));

Это можно сделать в виде init(). Извините за мой английский. Btw Я не уверен, если я поставлю свой комментарий в нужном месте;)

Ответ 3

@Беньямин Кремер спасибо за код, работает как шарм:) после прочтения этого Я сделал это с помощью jquery.

$(document).ready(function() {
    $('#refreshcaptcha').click(function() {
        $.ajax({
            url: '/contact/refresh',
            dataType:'json',
            success: function(data) {
                $('#contactForm img').attr('src',data.src);
                $('#captcha-id').attr('value',data.id);
            }
        });
    });
});

Ответ 4

• В config/autoload/global.php добавьте следующее

  'view_manager' => array(
      'strategies' => array(
          'ViewJsonStrategy','Zend\View\Strategy\PhpRendererStrategy'
      ),
  ),
  

• в YourModule/src/YourModule создать новую папку Ajax

• Внутри Yourmodule/Ajax создайте файл AjaxController.php

  namespace YourModule\Ajax;
  
  use Zend\Mvc\Controller\AbstractActionController;
  use Zend\View\Model\JsonModel;
  use YourModule\Forms\SignupForm;
  
  class AjaxController extends AbstractActionController
  {          
      public function refreshSignupCaptchaAction(){
          $form = new SignupForm();
          $captcha = $form->get('captcha')->getCaptcha();             
          $data = array();                
          $data['id']  = $captcha->generate();
          $data['src'] = $captcha->getImgUrl().$captcha->getId().$captcha->getSuffix();
          return new JsonModel($data);
      }
  }
  

• Добавить маршрут внутри module.config.php

  'yourmodule-ajax' =>array(
          'type' => 'segment',
          'options' => array(
          'route' => '/yourmodule/ajax/:action',
              'constraints' => array(    
                  'action' => '\w+',
              ),
              'defaults' => array(
                  'controller' => 'YourModule\Ajax\AjaxController',
              )                  
          ),
      ),
  

• последний в вашем шаблоне, я предполагаю, что вы используете jquery

  <div class="form-group">
      <div id="captcha" class="control-group <?php echo count($form->get('captcha')->getMessages()) > 0 ? 'has-error' : '' ?>">
          <?php echo $this->formLabel($form->get('captcha')); ?>
          <div class="col-xs-12 col-sm-6">
              <a id="refreshcaptcha" class="btn btn-default pull-right">Refresh</a>
              <?php echo $this->formElement($form->get('captcha')); ?>
              <?php echo $this->formElementErrors($form->get('captcha')); ?>
          </div>
      </div>
  </div>
  
  <script type="text/javascript">
  $(function(){
  
      $('#refreshcaptcha').click(function() { 
          $.ajax({ 
              url: '<?php echo $this->url('yourmodule-ajax', array('action'=>'refreshSignupCaptcha')) ?>', 
              dataType:'json', 
              success: function(data) { 
                  $('#captcha img').attr('src', data.src); 
                  $('#captcha input[type="hidden"]').attr('value', data.id); 
                  $('#captcha input[type="text"]').focus(); 
              }
          }); 
          return false;
      });
  });
  </script>