0

ファンシーボックスを使用して、次のようなログインフォームを表示しようとしています

<div style="display:none">
    <form id="login_form" method="post" action="">
            <p id="login_error">Please, enter data</p>
        <p>
            <label for="login_name">Login: </label>
            <input type="text" id="login_name" name="login_name" size="30" />
        </p>
        <p>
            <label for="login_pass">Password: </label>
            <input type="password" id="login_pass" name="login_pass" size="30" />
        </p>
        <p>
            <input type="submit" value="Login" />
        </p>
        <p>
            <em>Leave empty so see resizing</em>
        </p>
    </form>
</div>

そのためのJavaスクリプトは

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

    if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
        $("#login_error").show();
        $.fancybox.resize();
        return false;
    }

    $.fancybox.showActivity();

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

    return false;
});

htmlは

<a id="tip5" title="Login" href="#login_form"><?php echo "Login" ; ?></a>

ログインリンクをクリックするとログインポップアップが表示されますが、送信ボタンをクリックするとポップアップが閉じてページが更新されます。

実際には、データをチェックし、ページを更新するのではなく、ポップアップにデータを表示する必要があります。

ありがとう

4

1 に答える 1

1

さらに問題がある可能性があります。

  1. Fancybox はおそらく元の HTML を複製してポップアップに配置しています。liveしたがって、代わりに関数を使用する必要がありますbind。
  2. Fancybox が何らかの方法でフォームの ID を変更し (FireFox の FireBug などの DOM インスペクターで確認してください)、ポップアップ内のフォームの ID が送信イベントを実行したものであることを確認することができます。

event.preventDefault()また、falseを返す代わりに使用することを好みます...私のJSコードは次のようになります。

$("#login_form").live("submit", function(e) {
    e.preventDefault();
    if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
        $("#login_error").show();
        $.fancybox.resize();
        return false;
    }

    $.fancybox.showActivity();

    $.ajax({
        type        : "POST",
        cache   : false,
        url     : "login.php",
        data        : $(this).serializeArray(),
        success: function(data) {
            $.fancybox(data);
        }
    });
});
于 2012-06-18T08:11:27.820 に答える