我正在使用 jQuery UI 的 Dialog 选项来呈现一个包含验证码的弹出式注册表单。
当我在另一个页面上呈现注册表单时,验证码显示得很好,但它没有显示在对话框弹出表单上。
我检查了 HTML,无论出于何种原因,只有验证码的“noscript”代码块进入了页面。
我缺少的关于 jQuery UI 对话框的内容是否会导致它干扰其他类似的脚本?
这是表单的代码:
<%= 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;
});