Php 如何在服务器响应成功后关闭Colorbox,但保持其打开以防出现错误
我遇到了一个问题,如何在错误/失败登录时保持colorbox模式覆盖打开,但在成功提交表单后关闭它并刷新父窗口。这与Digg登录过程的工作原理大致相同,在Digg登录过程中,模式覆盖保持打开状态,页面顶部出现错误。但是,在我的代码中,我的表单顶部有错误的间距。说到代码 服务器端: 我在服务器端使用Codeigniter,但希望PHP的朋友们会有这样的想法:Php 如何在服务器响应成功后关闭Colorbox,但保持其打开以防出现错误,php,javascript,jquery,codeigniter,colorbox,Php,Javascript,Jquery,Codeigniter,Colorbox,我遇到了一个问题,如何在错误/失败登录时保持colorbox模式覆盖打开,但在成功提交表单后关闭它并刷新父窗口。这与Digg登录过程的工作原理大致相同,在Digg登录过程中,模式覆盖保持打开状态,页面顶部出现错误。但是,在我的代码中,我的表单顶部有错误的间距。说到代码 服务器端: 我在服务器端使用Codeigniter,但希望PHP的朋友们会有这样的想法: <div class="login_box clearfix" id="login_box"> <div class="l
<div class="login_box clearfix" id="login_box">
<div class="left">
<?php if (validation_errors()): ?>
<?php echo $template['partials']['notices']; ?>
<?php endif; ?>
<?php echo form_open('users/login', array('id'=>'login')); ?>
<label for="email" class="inlined"><?php echo lang('user_email'); ?></label>
<input type="text" id="email" name="email" maxlength="120" class="input-text"/>
<div class="password_holder">
<label for="password" class="inlined"><?php echo lang('user_password'); ?></label>
<input type="password" id="password" name="password" maxlength="20" class="input-text" />
<?php echo anchor('users/reset_pass', 'Forgot?', array('class' => 'inline-anchor'));?>
</div>
<div class="submit_holder">
<input type="submit" value="<?php echo lang('user_login_btn') ?>" name="btnLogin" class="button gray"/>
<input type="checkbox" id="remember_me" name="remember" value="1" />
<label for="remember_me" class="checkbox-label"><?php echo lang('user_remember'); ?></label>
</div>
<?php echo form_close(); ?>
<div class="bottom">
<p>Don't have an account? <?php echo anchor('register', 'Create one.');?></p>
</div>
</div>
<div class="vr"></div>
<div class="right">
// Reasons to register go here.
</div>
经过几天的反复研究,我在一大堆教程和Colorbox主页上的常见问题中偶然发现了答案 这里最重要的是,我试图将一个完整的HTML文档加载到colorbox中,而我本应该使用iframe或调用我试图拉入colorbox的确切元素。另一个问题是,我必须利用Colorbox提供的onComplete回调再次调用Colorbox,这是通过Preform函数完成的 希望此代码能帮助其他偶然发现此问题的人:
function prepForm(){
$("#login").ajaxForm({
dataType: 'json',
success: function(data){
if (data.success === false) {
$.fn.colorbox({
transition:'elastic',
speed:600,
width: 670,
height: 290,
scrolling: false,
overlayClose: false,
html: data.result,
onComplete: prepForm,
href:$(this).attr('href')+" div#login_box",
});
} else {
location.reload(true);
// Reload the parent and close Cbox
$.fn.colorbox.close();
}
},
});
}
$('#loginButton').click(function(e){
e.preventDefault();
$(this).colorbox({
transition:'elastic',
speed:600,
width: 670,
height: 290,
scrolling: false,
overlayClose: false,
onComplete: prepForm,
href:$(this).attr('href')+" div#login_box",
});
});
我不再使用colorbox,因为它的大小,我觉得它的API有点奇怪。您可能想看看您是如何提交表单的?使用jquery.submit()?在你想让它关闭之前,什么动作会关闭颜色盒模式?@Treffynnon:我得检查一下这个@kevtrout:通过提取Codeigniter为my.localsite.com/login提供的相应HTML响应,将表单加载到colorbox中。在后端,我有一个变量设置,让脚本知道请求是否通过AJAX发出。由于html已加载到colorbox中,因此提交表单会自动关闭colorbox并重新加载父页面。然而,我认为这仅仅是巧合,我正试图弄清楚这一切是如何运作的。但它不是通过jquery.submit提交的。
function prepForm(){
$("#login").ajaxForm({
dataType: 'json',
success: function(data){
if (data.success === false) {
$.fn.colorbox({
transition:'elastic',
speed:600,
width: 670,
height: 290,
scrolling: false,
overlayClose: false,
html: data.result,
onComplete: prepForm,
href:$(this).attr('href')+" div#login_box",
});
} else {
location.reload(true);
// Reload the parent and close Cbox
$.fn.colorbox.close();
}
},
});
}
$('#loginButton').click(function(e){
e.preventDefault();
$(this).colorbox({
transition:'elastic',
speed:600,
width: 670,
height: 290,
scrolling: false,
overlayClose: false,
onComplete: prepForm,
href:$(this).attr('href')+" div#login_box",
});
});