开发者

How to close Colorbox after successful server response but keep it open for Errors

I am having an issue finding out how I keep a colorbox modal overlay open upon an error/failed login, but close it, AND refresh the parent window upon successful submission of form. This should work much in the same vein as the Digg login process where the modal overlay stays open and an error appears at the top of the page. However, I have the spacing for the errors directly on top of my form, in my code. Speaking of code...

SERVER SIDE:

I'm using Codeigniter on the server side, but hopefully PHP folks will get the idea:

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

FRONT END CODE - This is as far as I could get with Colorbox, I can't figure out how to get my submission errors to re-trigger colorbox, but make sure it closes AND refreshes the parent window upon a successful login. For now, it almost operates the way I want, but still so far off.

$('#loginButton开发者_如何学编程').colorbox({
    transition:'elastic',
    speed:600,
    initialWidth: 100,
    initialHeight: 100,
    width: 670,
    height: 290,
    scrolling: false,
    overlayClose: false,
    href: $(this).attr('href'),
});


After digging around for days, I stumbled across the answer through a mish mash of tutorials and by reading the FAQs on the Colorbox home page.

The biggie here was that I was trying to load a complete HTML document into colorbox, when I should have been using an iframe OR calling the exact element that I was trying to pull into the Colorbox. The other kicker was that I had to make use of the onComplete callback provided by Colorbox to call Colorbox again, which is done via the prepForm function.

Hope this code helps someone else who stumbles across this issue:

        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",
        });
    });
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜