RecaptchaState not defined when using ajax and codeigniter form validation

I am attempting my first ajax form submission with codeigniter validation. It is a simple comment field with a Recaptcha. I made sure the form was validating and working properly without ajax before adding it in.

I created a new开发者_运维问答 method for ajax handling of the form submission. It is essentially an exact copy of the code in the non-ajax method except when there are submission errors, it loads the form view (with errors) into a variable, json_encodes it and sends it back via ajax. Everything looks to be working correctly. The form it sends back contains the validation errors where it should, but when I load the form into the element, I get a RecaptchaState not defined error. It then redirects to a blank page.

Here is my method:

function submit_review()
{
    $this->load->library('form_validation');
    $this->load->library('recaptcha');
    $this->lang->load('recaptcha');

    $rules = array(
                        array(
                            'field'   => 'review',
                            'label'   => 'Review',
                            'rules'   => 'trim|required|xss_clean|strip_tags'
                            ),
                        array(
                            'field' => 'recaptcha_response_field',
                            'label' => 'lang:recaptcha_field_name',
                            'rules' => 'required|check_captcha'
                            )
                    );
    $this->form_validation->set_rules($rules);
    $this->form_validation->set_error_delimiters('<div class="error">', '</div>');

    if ($this->form_validation->run() == FALSE)
    {
        // set the view variables
        $form_data['recaptcha'] = $this->recaptcha->get_html();
        $form_data['id'] = $this->input->post('id');
        $response['form'] = $this->load->view('dynamic/post_review_form', $form_data, TRUE);
    }
    else
    {
        // all validation tests passed
    }
    echo json_encode($response);
}

And this is my jquery code:

        $("#review_submit").click(
            function(event){
                event.preventDefault();
                var str = $("form").serialize();

            $.ajax({
                type: "POST",
                url: "<?= base_url() ?>ajax/submit_review",
                dataType: "json",
                data: str,
                cache: false,
                success:
                    function(data){
                        $("#post_review_wrapper").html(data.form);
                    }
            });
        });

I am totally stumped as to why the recaptcha is giving me an error using ajax, but working fine normally. Thanks in advance for any help!

There seem to be a number of issues that can cause the problem (Need help with reCAPTCHA - keep getting incorrect-captcha-sol, reCaptcha Issues with Ajax, etc) but none of the solutions I found on the web were relevant to me. I eventually figured out what was wrong with my code, hopefully it will help you, too.

I was composing the querystring in jQuery like this:

"&recaptcha_response_field="

but needed to be doing it like this:

"&recaptcha_response_field="

Apparently it is not always necessary to escape the ampersand.