Question

I’m using jQuery UI’s Dialog option to render a pop-up signup form, which contains a captcha.

When I render the signup form on another page, the captcha displays just fine, but it doesn’t show up on the Dialog pop-up form.

I checked the HTML, and for whatever reason, only the captcha’s ‘noscript’ code block made it to the page.

Is there something about the jQuery UI Dialog I’m missing that causes it to interfere with other scripts like that?

Here’s the form’s code:

<%= error_messages_for(@user) %>
<%= form_for(:user, :url => users_path, :remote => true, :html => {:id => 'create_user_form'}) do |f| %>
    <div class="in-field">
        <%= f.label(:first_name) %>
        <%= f.text_field(:first_name) %>
        <div class="field_valid"></div>
    </div>
    <div class="in-field">
        <%= f.label(:last_name) %>
        <%= f.text_field(:last_name) %>
        <div class="field_valid"></div>
    </div>
    <%= f.date_select(:birthday, :start_year => 1912) %><br />
    image stuff<br />
    <div class="in-field">
        <%= f.label(:username) %>
        <%= f.text_field(:username) %>
        <div class="field_valid"></div>
    </div>
    <div class="in-field">
        <%= f.label(:password) %>
        <%= f.password_field(:password) %>
        <div class="field_valid"></div>
    </div>
    <div class="in-field">
        <%= f.label(:password_confirmation) %>
        <%= f.password_field(:password_confirmation) %>
        <div class="field_valid"></div>
    </div>
    <div class="in-field">
        <%= f.label(:email) %>
        <%= f.text_field(:email) %>
        <div class="field_valid"></div>
    </div>
    <div class="in-field">
        <%= f.label(:email_confirmation) %>
        <%= f.text_field(:email_confirmation) %>
        <div class="field_valid"></div>
    </div>
        <div id="test">  
        <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfLRdMSAAAAAJ2SYOMT2nNhu2aMw6s3XtD1s5Id"></script>
            </div>
    </div>
    <br />

<%= check_box_tag('eula', 'accepted', false) %> I agree to the <%= link_to('terms of service') %> and <%= link_to('privacy policy') %>.<br />
<%= f.submit 'Submit' %>
<% end %>

And here’s the UI pop-up code:

$('.modal-dupe').click(function(){
var url = this.href;
$('#modal').remove();
var dialog = $('<div id="modal" style="display:none" class="loading"></div>').prepend('#barhappy_container');
dialog.load(url, function(){
    dialog.dialog({
        modal: true,
        draggable: false,
        position: 'center',
        dialogClass: 'no-title',
        width: 'auto',
        height: 'auto',
        resizable: false,
        open: function(){
                $.getScript('/assets/modal/in-modal-open.js');
        },
        close: function(event, ui){
            dialog.remove();
        }
    });
});
return false;

});

Answer 1

As it turns out, jQuery dialog() can take a function argument when it opens, which I used to call the necessary bit of JavaScript via $.getScript().

You can manually create a Recaptcha using

$('SELECTOR FOR AN EMPTY DIV').each(function () {
    Recaptcha.create('YOUR PUBLIC KEY', this
});