jQuery AJAX request with Zend_Form_Captcha ReCaptcha - zend-framework

Question

I am trying to create an AJAX form with Zend_Form. It all works, except when the form is returned invalid, the ReCaptcha scripts are "filtered" out by jQuery. I have tried several different methods, but to no avail.
Zend Form:
<?php
class Application_Form_Login extends Zend_Form
{
public function init()
{
$this->setName('loginfrm')
->setOptions(array('class' => 'niceform', 'action' => 'login/index'));
$username = $this->addElement('text', 'username', array(
'filters' => array(
'StringTrim',
'StringToLower'
),
'validators' => array(
'Alnum',
array('StringLength', false, array(3,20))
),
'required' => true,
'label' => 'Your Username:'
));
$password = $this->addElement('password', 'password', array(
'filters' => array('StringTrim'),
'validators' => array(
'Alnum',
array('StringLength', false, 6, 32)
),
'required' => true,
'label' => 'Your Password:'
));
$config = new Zend_Config_Ini( APPLICATION_PATH . '/configs/config.ini', 'auth' );
$recaptcha = new Zend_Service_ReCaptcha(
$config->keys->recaptcha->public , $config->keys->recaptcha->private , null, array( 'theme' => 'clean' )
);
$captcha = $this->addElement('captcha', 'captcha', array(
'label' => 'Type the characters you see in the picture below',
'captcha' => 'ReCaptcha',
'captchaOptions' => array(
'captcha' => 'ReCaptcha',
'service' => $recaptcha
)
));
$this->addElement('button', 'submit', array(
'label' => 'Login',
'ignore' => true,
'class' => 'submit'
));
$this->setDecorators(array(
'FormElements',
array('HtmlTag', array('tag' => 'dl', 'class' => 'form')),
array('Description', array('placement' => 'prepend', 'class' => 'errors')),
'Form'
));
}
}
Javascript file: (removed some code to save you time)
//
// Namespace - Module Pattern.
//
var first = (function ($, window, document, undefined) {
// Expose innards of first.
return {
go: function () {
for (var i in first.init) {
first.init[i]();
}
},
init: {
partofcode: function() {
var d = $(document);
// support form submits
d.on('click', 'button', function(ev) {
var form = $(this).closest("form");
first.util.ajax(
form.attr("action"),
form.serialize(),
function(data) {
if(window.debug){ alert(data); }
var topDiv = form.closest(".window_main_full");
topDiv.html(data);
},
"html"
);
});
}
},
util: {
ajax: function(location, data, success, dataType) {
$.ajax({
dataType: dataType,
type: 'POST',
url: location,
data: data,
beforeSend: function() {
// show the loading image
var panel = $('#ajax_panel').show();
panel.html('Loading...');
// center the ajax_panel
panel.css({
'width' : (panel.width() + 25) + 'px',
'margin-left' : (($(window).width() / 2) - (panel.width() / 2 )) + 'px'
});
if(window.debug){ alert("before"); }
},
success: function(data){
if(window.debug){ alert("Before function..."); }
success(data);
$('#ajax_panel').html('').hide();
if(window.debug){ alert("after"); }
},
error: function(xhr, status, error) {
$('#ajax_panel').html('<span class="error"><strong>Oops!</strong> Try that again in a few moments.</span>');
if(window.debug){
alert('XHR: ' + xhr.status + '\nStatus:' + status + '\nError: ' + error);
setTimeout(function() {
$('#ajax_panel').slideUp(500, function() {
$('#ajax_panel').hide();
});
}, 2000);
}
}
});
}
}
};
// Pass in jQuery.
})(jQuery, this, this.document);
//
// Kick things off.
//
jQuery(document).ready(function () {
first.go();
});
I know the whole .html() filtering out scripts has been asked lots of times, but I just can't seem to find a solution.