How to load recaptcha code only when jQuery dialog loads

I have a recaptcha code within a jQuery dialog.

For some reas开发者_高级运维on, 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,

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 :) )