Как закрыть Colorbox после успешного ответа сервера, но оставить его открытым для ошибок - PullRequest
0 голосов
/ 30 марта 2011

У меня проблема с выяснением того, как я сохраняю модальное наложение colorbox открытым при ошибке / неудачном входе в систему, но закрываю его И обновляю родительское окно при успешной отправке формы.Это должно работать в том же духе, что и процесс входа в систему Digg, где модальное наложение остается открытым, и в верхней части страницы появляется ошибка.Тем не менее, у меня есть интервал для ошибок прямо в моей форме, в моем коде.Говоря о коде ...

СТОРОНА СЕРВЕРА:

Я использую Codeigniter на стороне сервера, но, надеюсь, PHP люди поймут идею:

<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, я не могу понять, как заставить мои ошибки отправки повторно вызывать colorbox, но убедитесь, что он закрывает И обновляет родительское окно послеуспешный вход в систему.Пока он работает почти так, как я хочу, но все еще так далеко.

$('#loginButton').colorbox({
    transition:'elastic',
    speed:600,
    initialWidth: 100,
    initialHeight: 100,
    width: 670,
    height: 290,
    scrolling: false,
    overlayClose: false,
    href: $(this).attr('href'),
});

1 Ответ

1 голос
/ 02 апреля 2011

Поработав в течение нескольких дней, я наткнулся на ответ через множество учебных пособий и прочитал часто задаваемые вопросы на домашней странице Colorbox.

Важным моментом здесь было то, что я пытался загрузить полный HTMLдокумент в colorbox, когда я должен был использовать iframe ИЛИ вызывая точный элемент, который я пытался вставить в Colorbox.Другим недостатком было то, что мне пришлось использовать обратный вызов onComplete, предоставляемый Colorbox, для повторного вызова Colorbox, что осуществляется с помощью функции prepForm.

Надеюсь, этот код поможет кому-то еще, кто сталкивается с этой проблемой:

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