Как предотвратить закрытие jQuery FancyBox сразу после отправки? - PullRequest
Новая
       23

Как предотвратить закрытие jQuery FancyBox сразу после отправки?

0 голосов
/ 06 июня 2010

Я загружаю встроенную регистрационную форму в FancyBox из jQuery. Однако после отправки формы окно сразу закрывается, хотя есть некоторые отзывы, которые я хочу показать пользователю в самом FancyBox. Этот отзыв создается на стороне сервера и печатается в FancyBox.

Как сделать так, чтобы окно закрывалось только при отсутствии обратной связи? Я думал об использовании ajax для обновления самого FancyBox, а не всей страницы после обновления. Но я просто не могу понять, как этот ajax $ .ajax ({type, cache, url, data, success}); работает ... Также кажется, что в javascript нет никакой реакции от 'submit bind'.

Я надеюсь, что кто-то может помочь мне с этой проблемой. Я вставляю свой код ниже. Если есть вопросы, пожалуйста, задавайте ..

Спасибо заранее!

Это 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;
        });

Это встроенная форма, которую я показываю в 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>

Ответы [ 3 ]

2 голосов
/ 14 сентября 2010

для открытого fancybox iframe, вот код, напечатанный после представления: 

<script type='text/javascript'>
  $(document).ready(function(){
    parent.document.location.reload();
    parent.jQuery.fancybox.close();
  });
</script>
2 голосов
/ 10 июня 2010

Я использовал часть ajax в fancybox .. 

$.ajax({
                    type        : "POST",
                    cache       : false,
                    url         : "data/register.php",
                    data        : $(this).serializeArray(),
                    success     : function(data) {
                        data = $.parseJSON(data);

                    if (data.feedback == "Registration succeeded!") {
                      $.fancybox("Welcome, "+data.name+"! You can now log in.");
                      $.fancybox.resize();
                    }
                    else{
                      $("#registration_error").html(data.feedback);
                    }
                }
            });

В файле register.php я проверил правильность данных или сделал некоторые отзывы. Я поместил обратную связь в register.php в объект JSON, который я мог бы использовать в опции «success» ajax на моей главной странице (см. Выше). Если отзыв был положительным, я сделал fancybox, если нет, я поместил отзыв в div #registration_error в моей регистрационной форме.

Код моего файла register.php выглядит следующим образом: 

$feed = "";

// Put post vars in php vars
$username = $_POST[username];
$password = $_POST[pw];
$rep_password = $_POST[rep_pw];

// Check if php vars are not empty and check if the username doesn't exist in my user.class
if(!empty($username) && !empty($password) && !empty($rep_password))
{
    $user = new User();

    $user->Username = $username;
    $user->Password = $password;
    $user->Password2 = $rep_password;

    try
    {
        $user->Save();
        $feed .= "Registration succeeded!";
    }
    catch(Exception $e)
    {
        $feed = $e->getMessage();
    }   
}
else
{
    $feed = "Please fill in all the fields!";
}

// Feedback for fancybox
$output = array();

$output['name'] = $username;
$output['feedback'] = $feed;

// Send JSON
$output = json_encode($output);
print $output;

Надеюсь, это поможет вам!

GRtz!

0 голосов
/ 12 августа 2010

Я сделал это всегда.

Я в основном запустил ссылку, которая открывает форму, если задано $ _POST ['xxx'].

Первая функция jquery открывает форму, если щелкнуть элемент id = form. Вторая функция будет инициировать элемент id = triger_form, который откроет ту же форму. 

$(document).ready(function() {

$("a#form").fancybox({
    'hideOnContentClick': false
});
$("a#triger_form").fancybox().trigger('click')({
    'hideOnContentClick': false
});

}); 

if($_POST['refer_submit'] == TRUE) {

эхо ''; }

...