如何防止jQuery UI Dialog停止其他脚本?

时间:2012-06-25 20:26:16

标签: jquery jquery-ui captcha

我正在使用jQuery UI的Dialog选项来呈现弹出式注册表单,其中包含验证码。

当我在另一个页面上呈现注册表单时,验证码显示得很好,但它不会显示在对话框弹出窗体上。

我检查了HTML,无论出于何种原因,只有验证码的'noscript'代码块才能进入页面。

我是否遗漏了jQuery UI Dialog,导致它干扰其他类似的脚本?

这是表单的代码:

<%= 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 %>

这是UI弹出代码:

$('.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;

});

1 个答案:

答案 0 :(得分:0)

事实证明,jQuery dialog()在打开时可以获取一个函数参数,我曾经通过$ .getScript()调用了必要的JavaScript。

您可以使用

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