フォーム送信時にAjax経由でcaptchaを再ロードするには？

Question

私はAjaxを使用してフォームを送信しています。私は自分のフォームにcaptchaを使用していて、検証エラーがなくてもフォームを送信すると完璧に動作しています。場合によっては、サーバーはいくつかの検証エラーを返し、フォームを送信しません。この時点で、私はページ全体をリロードせずにキャプチャ画像をリフレッシュする必要があります。 Zendのフォームで

キャプチャコード：フォームの送信のための

$captcha= new Zend_Form_Element_Captcha('captcha', array(
       'id'=>'captcha', 
       'title'=>'Security Check.', 
       'captcha' => array(
       'captcha' => 'Image', 
       'required' => true, 
       'font'  => '../public/fonts/ARIALN.TTF', 
       'wordlen' => '6', 
       'width' => '200', 
       'height' => '50', 
       'imgdir' => '../public/images/captcha/', 
       'imgurl' => '/images/captcha/' 
       ))); 

のjQuery：

jQuery('form.AjaxForm').submit(function() { 

    $.ajax({ 
     url  : $(this).attr('action'), 
     type : $(this).attr('method'), 
     dataType: 'json', 
     data : $(this).serialize(), 
     success : function(data) { 
         // reload captcha here 
         alert('Success'); 
        }, 
     error : function(xhr, err) { 
         // reload captcha here 
         alert('Error'); 
       } 
    }); 

    return false; 
}); 

提出フォームにキャプチャをリロードする方法は？私は、現時点では例を持っていないが、私はキャプチャがフォームにどのように生成されるかを見て、私はあなたがしなければならないかもしれないものだと思い

おかげ

Answer 1

はのための新しいHTMLコードを返すですフォームが検証に失敗した場合は、あなたのjsonレスポンスにcaptchaフォーム要素を追加します。

captcha要素は、imagesフォルダに作成されて格納されるイメージへの参照を使用し、html形式はそのイメージに関連付けられたIDを使用します。

$yourForm->getElement('captcha')->render();を呼び出してjsonレスポンスに追加すると、新しいcaptcha要素でページを更新できます。唯一の問題は、デフォルトのデコレータでレンダリングを呼び出すと、<dt>タグと<dd>タグが返される可能性があるため、HTMLのjavascriptで置き換える必要があります。カスタムデコレータを使用している場合は、異なる場合があります。または、ラベルではなく画像と非表示のフィールドのみをレンダリングしてdivタグに挿入できます。

// in your controller where the form was validated 
$form = new Form(); 
if (form->isValid($this->getRequest()->getPost()) == false) { 
    $captcha = $form->getElement('captcha')->render(); 
    $json['captchahtml'] = $captcha; 
} 

$this->view->json = json_encode($json); 

次に、あなたのjqueryのsuccessコールバックで、フォームが検証に失敗したかどうかを確認し、キャプチャのHTMLを更新します。

希望に役立ちます。