Jak ponownie załadować obraz Zend Captcha po kliknięciu przycisku odświeżania?

Question

Stosuję Zend Captcha na mojej stronie php, teraz potrzebuję dodać przycisk przeładowania captcha. Proszę udzielić odpowiedzi zgodnie z Zendem.

Answer 1

Tylko dwa krótkie fragmenty, ale myślę, że dostaniesz pomysł. Dostosuj nazwę elementu i selektory do swoich potrzeb.

W kontrolerze dodać metodę do generowania świeżym 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); 
} 

W skrypcie widoku (używam Mootools dla AJAX żądanie)

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(); 
    }); 
}); 

EDIT: jQuery Dodano pahan za

$(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); 
      } 
     }); 
    }); 
}); 

Answer 2

@Benjamin Cremer dzięki za kod, działa jak urok :) po przeczytaniu tego zrobiłem to za pomocą 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); 
      } 
     }); 
    }); 
}); 

Answer 3

@ user236501 W rzeczywistości może być dowolnym typem elementu Zend Form (na przykład Button). Jesteś nawet w stanie umieścić klikalny link odświeżania jako opis Zend_Form_Element_Captcha opcji jak ten:

 $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>' 
     )); 

ale w opcji takim przypadku Description dekorator powinien zostać zmieniony, na przykład:

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

można to zrobić w Metoda formularza: init(). Przepraszam za mój angielski. Btw nie jestem pewien, czy mogę umieścić mój komentarz w odpowiednim miejscu;)

Answer 4

1. W config/autoload/global.php dodać następujące

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

2. w YourModule/src/YourModule utworzyć nowy folder Ajax

3. Wewnątrz Yourmodule/Ajax tworzyć plik 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); 
       } 
   } 
   

4. dodawania trasa wewnątrz module.config.php

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

5. ostatni w szablonie, zakładam, że używasz 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>