How to prevent jQuery FancyBox from closing immediately after submit?

Posted by Dimitri on Stack Overflow See other posts from Stack Overflow or by Dimitri
Published on 2010-06-06T18:41:15Z Indexed on 2010/06/07 11:22 UTC
Read the original article Hit count: 811

Filed under:
|
|
|

Hi!

I'm loading an inline registration form in a FancyBox from jQuery. However after submitting the form, the box immediately closes while there is some feedback that I want to show the user in the FancyBox itself. This feedback is generated on the server side and is printed in the FancyBox.

How can I make the box only closing when their is no feedback anymore? I was thinking about using ajax to just refresh the FancyBox itself and not the whole page after refreshing. But I just can't figure out how this ajax $.ajax({type, cache, url, data, success}); works... Also it seems like there's no reaction from the 'submit bind' in the javascript.

I hope someone can help me with this problem. I paste my code below. If any questions, plz ask..

Thx in advance!

This is the javascript:

<script type="text/javascript">
        $(document).ready(function() {
            $("#various1").fancybox({
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'scrolling'         : 'no',
                'titleShow'         : false,
                'onClosed'          : function() {
                    $("#registration_error").hide();
                }
            });
        });

        $("#registration_form").bind("submit", function() {


            if ($("#registration_error").val() != "Registration succeeded!") {
                $("#registration_error").show();
                $.fancybox.resize();
                return false;
            }

            $.fancybox.showActivity();

            $.ajax({
                type        : "POST",
                cache       : false,
                url         : "/data/login.php",
                data        : $(this).serializeArray(),
                success     : function(data) {
                    $.fancybox(data);
                }
            });

            return false;
        });

This is the inline form that I show in the FancyBox:

<div style="display: none;">
        <div id="registration" style="width:227px;height:250px;overflow:auto;padding:7px;">
        <?php echo "<p id=\"registration_error\">".$feed."</p>"; ?>
        <form id="registration_form" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
            <p>
                <label for="username">Username: </label>
                <input type="text" id="login_name" name="username" size="30" />
            </p>
            <p>
                <label for="password">Password: </label>
                <input type="password" id="pass" name="pw" size="30" />
            </p>
            <p>
                <label for="repeat_password">Repeat password: </label>
                <input type="password" id="rep_pass" name="rep_pw" size="30" />
            </p>
            <p>
                <input type="submit" value="Register" name="register" id="reg" />
            </p>
            <p>
                <em></em>
            </p>
        </form>
        </div>
    </div>

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about submit