How to load recaptcha code only when jQuery dialog loads

I have a recaptcha code within a jQuery dialog.

For some reason, when I load the page in firefox, it hangs (works great on IE/Chrome though). I found that the recaptcha in the dialog is causing it.

I thought that if I would load the recaptcha code only when a user opens the dialog that might solve the issue and also help me reduce the amount of outbound connections in general.

this is the 'view source' of the bit that is related to the recaptcha:

<div id="dialog-form" title="Create new user"> 
    <p class="validateTips">You can also Connect with Facebook</p> 
    <fb:login-button perms="publish_stream,create_event,rsvp_event,user_birthday,user_events,user_hometown,user_location,user_online_presence">Login to Facebook</fb:login-button> 
    <form id="regform" action="" method="post"> 
    <fieldset> 
        <label for="name">Username</label> 
        <input type="text" name="username" id="name" class="text ui-widget-content ui-corner-all" value="" /> 
        <label for="email">Email</label> 
        <input type="text" name="email" id="email" class="text ui-widget-content ui-corner-all" value="" /> 
        <label for="password" style="float:left;">Password&nbsp;&nbsp;&nbsp;&nbsp;</label> 
        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" /> 
        <input type="hidden" name="reg" value="reg" /> 
    </fieldset> 
    <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LerjL4SAAAAAG3sq_40sHyvch501El5JoNkHqOR"></script> 

    <noscript> 
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LerjL4SAAAAAG3sq_40sHyvch501El5JoNkHqOR" height="300" width="500" frameborder="0"></iframe><br/>
        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
        <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
    </noscript>     </form> 
</div> 

it's placed at the bottom of the page, right before the tag, so it's not nested or anything.

How can I do it?

Thanks,

Answers


If you plan on using reCaptcha in a popup-dialog, I would strongly suggest using the javascript api. I've found that FireFox can have trouble handling the iframe in such situations.

After you receive a call to open the dialog in the client-side javascript, you call for the creation of the captcha like this:

Recaptcha.create(YOUR_API_KEY,
    "captcha_contain",
    {
    theme: "red",
    callback: Recaptcha.focus_response_field
    }
);

Where "captcha_contain" is the id of an element in your dialog, presumably an open div. It will change your server-side code somewhat too, but you can read all about that in the API.


This thread suggests that it might be due to invalid HTML. In that case it was because a <form> was placed inside of a <table>. Might that be your case as well?

Anyhow, if you really want to load the captcha just on dialog open you will have to get the content through AJAX. Use the open event in jQuery UI Dialog to decide when to retrieve your captcha. I'm not familiar with the API of reCaptcha, but maybe there is an Javascript API, otherwise you will have to let your PHP code render that captcha for you on a separate page (or in some way expose it to the client).


I was having a similar problem with reCAPTCHA and Firefox 3.6. On a side note, the same code worked great with IE and Chrome. After much debugging (and some tips from the answers above) I found that the <fieldset> tag inside my form was causing jquery to crash.

Simply removing the <fieldset> and the error went away.

Hope it helps others out there.


I was getting this issue, again just in FF3.6 when using a lightbox — loading the reCatpcha div into the page but hiding it until onSubmit of the form.

Resolved the issue by using 'visibility: hidden' on the reCaptcha form rather than 'display: none'.

(Simple fix, but a pain at the time — just in case it's of use to anyone else :) )


Need Your Help

How To Compile, Build and Debug MASM Using Visual Studios 2005 Standard

assembly windows-xp x86 masm

I am trying to compile, build and debug 16-bit assembly programs using Visual Studio 2005 Standard but can't figure out how to do this. I am running MASM 6.14.8444 version and I have found some hel...

In what areas might the use of F# be more appropriate than C#?

c# f#

Over the last few years F# has evolved into one of Microsoft's fully supported languages employing many ideas incubated in OCaml, ML and Haskell.