reCAPTCHA breaks when loaded via AJAX (normal API): RecaptchaState is not defined

3,673 views
Skip to first unread message

Will Mason

unread,
Dec 13, 2010, 3:59:00 PM12/13/10
to reCAPTCHA
Hi All,

So I have gone through the group posts and see similar issues, but no
fix.

I have a form that is loaded normally with reCAPTCHA at the bottom.

When the form is submitted (via AJAX using jQuery), I validate the
submission using PHP on the server side. If all validates, we are good
to go.

If something does not validate (email taken or reCAPTCHA not correct),
I send back a partial HTML document including the form and reCAPTCHA.

This is when everything breaks. The page goes blank. And firebug shows
the error "RecaptchaState is not defined" on line 23.

I cannot use the reCAPTCHA AJAX API for several reasons, but also
don't feel I should have to.

Thanks in Advance.

Will Mason

unread,
Dec 21, 2010, 2:45:10 AM12/21/10
to reCAPTCHA
Anyone have any idea?

Will Mason

unread,
Jan 4, 2011, 12:28:11 PM1/4/11
to reCAPTCHA
Really?? No one has anything to add??

I was hoping the reCAPTCHA people had something to say about this bug/
feature.

Zack

unread,
Jan 4, 2011, 12:45:46 PM1/4/11
to reCAPTCHA
Hi,
got the problem here. Loading content via jQuery Address ( Ajax ).
reCAPTCHA is inside loaded content.
Firebug says:

RecaptchaState is not defined
[Bei diesem Fehler anhalten] f+"'/>"}
Recaptcha._css_toggle("recaptc...a._get_help_link(),"recaptcha_popup",
recaptcha.js (Zeile 23)

that sucks.

Will Mason

unread,
Jan 4, 2011, 12:51:19 PM1/4/11
to reCAPTCHA
Thank you Zack! At least someone else feels my pain.

Can someone official weigh in on this? It feels very much like a bug.

Please, this topic has been open for many days and is an actual
problem unlike some posts on here about people not knowing how to use
their programming language of choice.

I know how to use reCAPTCHA , and have had great luck in the past, but
I want to send my form via one AJAX call, and return the result via
ajax (either a thanks page, or the html form with the errors).

It sounds like Zack is in the same boat. I know its free, but this is
a major limitation.

Paul Egges

unread,
Jan 4, 2011, 1:01:00 PM1/4/11
to reca...@googlegroups.com
The workaround that I'm currently using is:

function showRecaptcha(element) {
      Recaptcha.create("{{RECAPTCHA_PUBKEY}}" , element, {
      theme: "red"
      });
}


In the ajax handling section 

window.setTimeout(showRecaptcha, 500, 'fdiv_my_recaptcha');


Ugly isn't it.

thanks,

paul



--
You received this message because you are subscribed to the Google Groups "reCAPTCHA" group.
To post to this group, send email to reca...@googlegroups.com.
To unsubscribe from this group, send email to recaptcha+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/recaptcha?hl=en.


Adrian Godong

unread,
Jan 4, 2011, 1:19:23 PM1/4/11
to reca...@googlegroups.com
AFAIK, no one here is maintaining the AJAX library (it's built by the
recaptcha team, and this is not the 'official' recaptcha team group)
so you're probably asking the wrong people.

Try stackoverflow.com, they have a bigger AJAX programmer audience and
someone may be good enough to answer your question for 15 reputation
points.

> --
> You received this message because you are subscribed to the Google Groups "reCAPTCHA" group.
> To post to this group, send email to reca...@googlegroups.com.
> To unsubscribe from this group, send email to recaptcha+...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/recaptcha?hl=en.
>
>

--
Adrian Godong
adrian...@gmail.com

Will Mason

unread,
Jan 4, 2011, 1:33:20 PM1/4/11
to reCAPTCHA
Paul, so you decided to use the reCAPTCHA AJAX library as a work
around??

Adrian, I am not using the AJAX library, I am using the PHP library
over the standard API. AJAX is only used to process form submission
and response (ie, I use jQuery to collect all the form values,
including reCAPTCHA, and send them as a POST request to the server.
The server then sends back HTML to replace the submitted form. When
there are no form errors, everything works. When there are form
errors, the reCAPTCHA code contained in the response HTML causes the
problem.) I will try stack overflow, but I thought this was the
official forum since its linked to from the reCAPTCHA website.
> adrian.god...@gmail.com

Paul Egges

unread,
Jan 4, 2011, 1:40:22 PM1/4/11
to reca...@googlegroups.com
The work around was the window.setTimeout function that executes the show on after half a second.  Like I said ugly, and not fully tested yet so ...... 

Thanks,

paul

Adrian Godong

unread,
Jan 4, 2011, 2:11:12 PM1/4/11
to reca...@googlegroups.com
OK, I'm confused here.

You're using the PHP library but has modification on it? And you're
expecting people to understand your changes and provide you with a
fix?

If I give you a working version along with the source code and it
doesn't work, then it's my problem. But if it works and you modify it
and break it, then it's your problem.

BTW, looking from Paul's workaround, it looks like the RecaptchaState
is not initialized/called yet. You may want to look at .ready()
handler (http://api.jquery.com/ready/). This may or may not solve your
problem.

Will Mason

unread,
Jan 4, 2011, 2:39:17 PM1/4/11
to reCAPTCHA
Adrian, I have not modified the PHP library.

I am simply submitting the form and processing the response using
jQuery's post method instead of letting the form submit normally.

Here is some pseudo/sample code to explain what I am trying to do:

--------------- HTML FORM (w/ PHP) -----------------

<div id="content">
<form name="signup" id="signup" method="post" action="/
processSignup">

<input type="text" name="name" id="name">

<input type="text" name="email" id="email">

<?php echo reCaptcha::get(); ?>

<input type="submit" name="submit" id="submit" value="Submit">

</form>
</div>

--------------- END HTML FORM ----------------

--------------- HTML THANKS (SUCCESS) -----------------

<div id="content">
<p>Thanks for signing up!</p>
</div>

--------------- END HTML THANKS ----------------

----------------- JAVASCRIPT ---------------
$(function (){
initForms();
});

var initForms = function (){
$('form').submit(function (e){
var $f = $(this);
var $div = $('#content');
var p = $f.find(':input').serializeArray();
$.post($f.attr('action'), p, function (data){
$div.after(data).remove();
initForms();
});
});
};
------------------ END JS ---------------------

--------------- PHP (processSignup) -----------
if (reCaptcha::check())
//send HTML THANKS
else
//send HTML FORM
--------------- END PHP -----------------------

Paul Egges

unread,
Jan 4, 2011, 3:01:15 PM1/4/11
to reca...@googlegroups.com
Adrian, 

I believe it is initialized because this is being done in Ajax. But maybe I'm missing something here.  I only inserted the portion related to Ajax (this is is the code that gets called when the ajax call returns). Do I need to do another init of ReCaptcha within the Ajax callback? I thought ready was only for initial document loading.  Is that wrong?

I will definitely not claim to be a javascript or jQuery wiz (but I'm getting better). 

Thanks,

Paul

Adrian Godong

unread,
Jan 4, 2011, 3:16:00 PM1/4/11
to reca...@googlegroups.com
I haven't played with reCAPTCHA and AJAX at all so I have no idea
what's causing it. The PHP library expects that the page is loaded
every time you need a new reCAPTCHA, so I can imagine that this half
PHP half AJAX scenario will not be supported by the library. You may
need to look at a bigger change than "switch post to ajax and display
the partial result back to the page".

Paul Egges

unread,
Jan 4, 2011, 3:20:58 PM1/4/11
to reca...@googlegroups.com
Even worse, I'm a python going ("prepares for stone throwing"). So who knows why I'm here. I look at this being more of a jQuery/javascript issue than a PHP issue. 

Have a great day,

paul

Zack

unread,
Jan 4, 2011, 3:26:05 PM1/4/11
to reCAPTCHA
Will,

thats not what I'am doing and where the error come from. I do
something like that:
----- index.html ----
<div id="content"></div>
-------------------------

------ js ------------
var handler = function( data ){
json = JSON.parse( data );
$("#content").html( data.content );
}
$.ajax({
url: "foo.php",
cache: false,
error: function( XMLHttpRequest, textStatus, errorThrown ) {
handler( errorThrown );
},
success: function( data, textStatus, XMLHttpRequest ) {
handler( data );
}
});

----foo.php ----
require_once('recaptchalib.php');

$publickey = "##########################";
$privatekey = "############################";

# the response from reCAPTCHA
$resp = null;
# the error code from reCAPTCHA, if any
$error = null;

echo recaptcha_get_html($publickey, $error);

-----------------------

so far, this should only return the captcha and put it in the div.
It's only a example what i do. In real its much more complex. If you
want know why doing this look at that: http://www.asual.com/jquery/address/.

Thanks,

Zack

On 4 Jan., 21:01, Paul Egges <mountainp...@gmail.com> wrote:
> Adrian,
>
> I believe it is initialized because this is being done in Ajax. But maybe
> I'm missing something here.  I only inserted the portion related to Ajax
> (this is is the code that gets called when the ajax call returns). Do I need
> to do another init of ReCaptcha within the Ajax callback? I thought ready
> was only for initial document loading.  Is that wrong?
>
> I will definitely not claim to be a javascript or jQuery wiz (but I'm
> getting better).
>
> Thanks,
>
> Paul
>
> On Tue, Jan 4, 2011 at 12:11 PM, Adrian Godong <adrian.god...@gmail.com>wrote:
>
>
>
>
>
>
>
> > OK, I'm confused here.
>
> > You're using the PHP library but has modification on it? And you're
> > expecting people to understand your changes and provide you with a
> > fix?
>
> > If I give you a working version along with the source code and it
> > doesn't work, then it's my problem. But if it works and you modify it
> > and break it, then it's your problem.
>
> > BTW, looking from Paul's workaround, it looks like the RecaptchaState
> > is not initialized/called yet. You may want to look at .ready()
> > handler (http://api.jquery.com/ready/). This may or may not solve your
> > problem.
>
> > recaptcha+...@googlegroups.com<recaptcha%2Bunsubscribe@googlegroups .com>
> > .
> > >> > For more options, visit this group athttp://
> > groups.google.com/group/recaptcha?hl=en.
>
> > >> --
> > >> Adrian Godong
> > >> adrian.god...@gmail.com
>
> > > --
> > > You received this message because you are subscribed to the Google Groups
> > "reCAPTCHA" group.
> > > To post to this group, send email to reca...@googlegroups.com.
> > > To unsubscribe from this group, send email to
> > recaptcha+...@googlegroups.com<recaptcha%2Bunsubscribe@googlegroups .com>
> > .
> > > For more options, visit this group at
> >http://groups.google.com/group/recaptcha?hl=en.
>
> > --
> > Adrian Godong
> > adrian.god...@gmail.com
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "reCAPTCHA" group.
> > To post to this group, send email to reca...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > recaptcha+...@googlegroups.com<recaptcha%2Bunsubscribe@googlegroups .com>
> > .

florence haseltine

unread,
Jan 4, 2011, 5:13:29 PM1/4/11
to reca...@googlegroups.com
I am watching your exchange because I also want to use the reCAPTCHA with AJAX and jquery.  I have not yet attempted it.
TX Florence

--
You received this message because you are subscribed to the Google Groups "reCAPTCHA" group.
To post to this group, send email to reca...@googlegroups.com.
To unsubscribe from this group, send email to recaptcha+...@googlegroups.com.

Jason Buck

unread,
Jan 4, 2011, 5:29:58 PM1/4/11
to reca...@googlegroups.com
It took some work, but I have a working solution that I have included in the zip file below...

This is a PHP / AJAX recaptcha solution.

See it working at 

Download the Source below
http://www.buckitconsulting.com/recaptcha/verify-recaptcha.zip

Respectfully,

Jason (Recaptcha User)
--
Jason Buck
619.800.BUCK

Will Mason

unread,
Jan 4, 2011, 5:58:00 PM1/4/11
to reCAPTCHA
Adrian,

Why would it really matter since the reCAPTCHA lib should be just
doing a document.write?

Obviuosly, it is not supported, but why? Its not that strange.

On Jan 4, 12:16 pm, Adrian Godong <adrian.god...@gmail.com> wrote:
> I haven't played with reCAPTCHA and AJAX at all so I have no idea
> what's causing it. The PHP library expects that the page is loaded
> every time you need a new reCAPTCHA, so I can imagine that this half
> PHP half AJAX scenario will not be supported by the library. You may
> need to look at a bigger change than "switch post to ajax and display
> the partial result back to the page".
>
>
>
> On Tue, Jan 4, 2011 at 12:01, Paul Egges <mountainp...@gmail.com> wrote:
> > Adrian,
> > I believe it is initialized because this is being done in Ajax. But maybe
> > I'm missing something here.  I only inserted the portion related to Ajax
> > (this is is the code that gets called when the ajax call returns). Do I need
> > to do another init of ReCaptcha within the Ajax callback? I thought ready
> > was only for initial document loading.  Is that wrong?
> > I will definitely not claim to be a javascript or jQuery wiz (but I'm
> > getting better).
>
> > Thanks,
> > Paul
>
> > On Tue, Jan 4, 2011 at 12:11 PM, Adrian Godong <adrian.god...@gmail.com>
> > wrote:
>
> >> OK, I'm confused here.
>
> >> You're using the PHP library but has modification on it? And you're
> >> expecting people to understand your changes and provide you with a
> >> fix?
>
> >> If I give you a working version along with the source code and it
> >> doesn't work, then it's my problem. But if it works and you modify it
> >> and break it, then it's your problem.
>
> >> BTW, looking from Paul's workaround, it looks like the RecaptchaState
> >> is not initialized/called yet. You may want to look at .ready()
> >> handler (http://api.jquery.com/ready/). This may or may not solve your
> >> problem.
>
> adrian.god...@gmail.com

Will Mason

unread,
Jan 4, 2011, 5:58:33 PM1/4/11
to reCAPTCHA
Paul, You are completely right, its not PHP or Python, but javascript
issue.

On Jan 4, 12:20 pm, Paul Egges <mountainp...@gmail.com> wrote:
> Even worse, I'm a python going ("prepares for stone throwing"). So who knows
> why I'm here. I look at this being more of a jQuery/javascript issue than a
> PHP issue.
>
> Have a great day,
>
> paul
>
> On Tue, Jan 4, 2011 at 1:16 PM, Adrian Godong <adrian.god...@gmail.com>wrote:
>
> > I haven't played with reCAPTCHA and AJAX at all so I have no idea
> > what's causing it. The PHP library expects that the page is loaded
> > every time you need a new reCAPTCHA, so I can imagine that this half
> > PHP half AJAX scenario will not be supported by the library. You may
> > need to look at a bigger change than "switch post to ajax and display
> > the partial result back to the page".
>
> > On Tue, Jan 4, 2011 at 12:01, Paul Egges <mountainp...@gmail.com> wrote:
> > > Adrian,
> > > I believe it is initialized because this is being done in Ajax. But maybe
> > > I'm missing something here.  I only inserted the portion related to Ajax
> > > (this is is the code that gets called when the ajax call returns). Do I
> > need
> > > to do another init of ReCaptcha within the Ajax callback? I thought ready
> > > was only for initial document loading.  Is that wrong?
> > > I will definitely not claim to be a javascript or jQuery wiz (but I'm
> > > getting better).
>
> > > Thanks,
> > > Paul
>
> > > On Tue, Jan 4, 2011 at 12:11 PM, Adrian Godong <adrian.god...@gmail.com>
> > > wrote:
>
> > >> OK, I'm confused here.
>
> > >> You're using the PHP library but has modification on it? And you're
> > >> expecting people to understand your changes and provide you with a
> > >> fix?
>
> > >> If I give you a working version along with the source code and it
> > >> doesn't work, then it's my problem. But if it works and you modify it
> > >> and break it, then it's your problem.
>
> > >> BTW, looking from Paul's workaround, it looks like the RecaptchaState
> > >> is not initialized/called yet. You may want to look at .ready()
> > >> handler (http://api.jquery.com/ready/). This may or may not solve your
> > >> problem.
>
> > >> >> > recaptcha+...@googlegroups.com<recaptcha%2Bunsu...@googlegroups.com>
> > .
> > >> >> > For more options, visit this group
> > >> >> > athttp://groups.google.com/group/recaptcha?hl=en.
>
> > >> >> --
> > >> >> Adrian Godong
> > >> >> adrian.god...@gmail.com
>
> > >> > --
> > >> > You received this message because you are subscribed to the Google
> > >> > Groups "reCAPTCHA" group.
> > >> > To post to this group, send email to reca...@googlegroups.com.
> > >> > To unsubscribe from this group, send email to
> > >> > recaptcha+...@googlegroups.com<recaptcha%2Bunsu...@googlegroups.com>
> > .
> > >> > For more options, visit this group at
> > >> >http://groups.google.com/group/recaptcha?hl=en.
>
> > >> --
> > >> Adrian Godong
> > >> adrian.god...@gmail.com
>
> > >> --
> > >> You received this message because you are subscribed to the Google
> > Groups
> > >> "reCAPTCHA" group.
> > >> To post to this group, send email to reca...@googlegroups.com.
> > >> To unsubscribe from this group, send email to
> > >> recaptcha+...@googlegroups.com<recaptcha%2Bunsu...@googlegroups.com>
> > .
> > >> For more options, visit this group at
> > >>http://groups.google.com/group/recaptcha?hl=en.
>
> > > --
> > > You received this message because you are subscribed to the Google Groups
> > > "reCAPTCHA" group.
> > > To post to this group, send email to reca...@googlegroups.com.
> > > To unsubscribe from this group, send email to
> > > recaptcha+...@googlegroups.com<recaptcha%2Bunsu...@googlegroups.com>
> > .
> > > For more options, visit this group at
> > >http://groups.google.com/group/recaptcha?hl=en.
>
> > --
> > Adrian Godong
> > adrian.god...@gmail.com
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "reCAPTCHA" group.
> > To post to this group, send email to reca...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > recaptcha+...@googlegroups.com<recaptcha%2Bunsu...@googlegroups.com>
> > .

Will Mason

unread,
Jan 4, 2011, 5:59:34 PM1/4/11
to reCAPTCHA
Zach,

I understand its not exactly the same, but it looks to me like we have
the same problem, just slightly different causes.

Loading reCAPTCHA from library via an ajax call causes problems...

Will Mason

unread,
Jan 4, 2011, 6:00:47 PM1/4/11
to reCAPTCHA
Florence,

Keep watching, hopefully we get an answer. If you just want to verify
via ajax, you can use the AJAX lib, but if you want to load html and
process all form results via jQuery/AJAX...keep your fingers crossed.

On Jan 4, 2:13 pm, florence haseltine <fhaselt...@gmail.com> wrote:
> I am watching your exchange because I also want to use the reCAPTCHA with
> AJAX and jquery.  I have not yet attempted it.
> TX Florence
>
> > recaptcha+...@googlegroups.com<recaptcha%2Bunsu...@googlegroups.com>
> > .

Will Mason

unread,
Jan 4, 2011, 6:02:35 PM1/4/11
to reCAPTCHA
Jason,

I downloaded your code, and am having trouble following it...but from
what I can tell, you are only using AJAX to verify, not load a partial
HTML doc. Am I missing something?

On Jan 4, 2:29 pm, Jason Buck <jasonab...@gmail.com> wrote:
> It took some work, but I have a working solution that I have included in the
> zip file below...
>
> This is a PHP / AJAX recaptcha solution.
>
> See it working athttp://www.tsia.com/register.html
>
> Download the Source belowhttp://www.buckitconsulting.com/recaptcha/verify-recaptcha.zip
>
> Respectfully,
>
> Jason (Recaptcha User)
>
> On Tue, Jan 4, 2011 at 2:13 PM, florence haseltine <fhaselt...@gmail.com>wrote:
>
>
>
> > I am watching your exchange because I also want to use the reCAPTCHA with
> > AJAX and jquery.  I have not yet attempted it.
> > TX Florence
>
> >> recaptcha+...@googlegroups.com<recaptcha%2Bunsu...@googlegroups.com>
> >> .
> >> For more options, visit this group at
> >>http://groups.google.com/group/recaptcha?hl=en.
>
> >  --
> > You received this message because you are subscribed to the Google Groups
> > "reCAPTCHA" group.
> > To post to this group, send email to reca...@googlegroups.com.
> > To unsubscribe from this group, send email to
> > recaptcha+...@googlegroups.com<recaptcha%2Bunsu...@googlegroups.com>
> > .

Adrian Godong

unread,
Jan 4, 2011, 6:47:49 PM1/4/11
to reca...@googlegroups.com
It is, that's why I said that no one here understands the problem
because no one is using AJAX with the server side libraries.


Anyway, do you have a URL for the page that we can open?

I drilled down (since I'm already in it, why not dive in as well) and
found that your problem may be due to this line of code not written in
the return HTML:

<script type="text/javascript"
src="http://api.recaptcha.net/challenge?k=[publickey]"></script>

Assuming that the browser works as I expected, then as long as you
have this line in the HTML it should be fine.

> To unsubscribe from this group, send email to recaptcha+...@googlegroups.com.


> For more options, visit this group at http://groups.google.com/group/recaptcha?hl=en.
>
>

--
Adrian Godong
adrian...@gmail.com

hribo

unread,
Feb 16, 2011, 4:14:51 PM2/16/11
to reca...@googlegroups.com
Hello Will,
I am stuck with the same problem as you are. I have also found another thread about this problem: https://groups.google.com/forum/#!topic/recaptcha/YMrmydMUQmk

I need to verify Recaptcha using AJAX lib. How exactly did you do that?

Thank you for an example.

Peter Mandell

unread,
Sep 15, 2013, 3:27:28 PM9/15/13
to reca...@googlegroups.com, djdub...@gmail.com
While this is definitely a hack as well, it seems better than calling the function using setTimeout.

                    function showRecaptcha(element) {
                        Recaptcha.create("public_key", element, {
                        theme: "red",
                        callback: Recaptcha.focus_response_field});
                    }
                    
                    var checkRecaptchaDivExists = setInterval(function(){
                        if ($('#recaptcha_div').length){
                            showRecaptcha('recaptcha_div'); 
                            clearInterval(checkRecaptchaDivExists); 
                        }
                    },100);

What I am doing is calling an interval function every 100 milliseconds to check that the element exists. If the recaptcha_div has been added to the DOM, I call the showRecaptcha function and stop the interval function. It still feels very hacky, but it works.
Reply all
Reply to author
Forward
0 new messages