0

動的ログイン ヘッダーがあります。2 つのリンク、ログイン/登録およびプロファイル/ログアウト。

ログインして関連リンクを表示しているかどうかを確認するために使用されていたphpクラス関数があり、正常に機能しました。

次に、ページを更新したくなかったので ajax ログインに移動し、ログイン ボックスがドロップダウンしてロールアップしました。繰り返しますが、正常に動作します。

私はわずかな問題に気付きました.

ログインすると、新しいページでページを更新するたびに、「プロファイル」が「ログイン」になるちらつきが表示され、再びちらつきます。ページの読み込み中にのみ発生し、長くは続きませんが、あまり良くありません.

誰かが私にそれを解決するのを手伝ってもらえますか? 私は Ajax/jQuery の初心者で、最初に ajax/jquery の部分を機能させるために、ここにいる何人かの人の助けを借りて何年も費やしました。

これは、ログイン div を切り替えるスクリプトです

<script>
        window.onload = function(){
            $(function() {
                var loggedIn = <?php echo json_encode($general->loggedIn()); ?>;
                $("#loggedIn").toggle(loggedIn);
                $("#loggedOut").toggle(!loggedIn);
            });
        }
    </script>

ありがとう

編集：アヤックス

function validLogin(){

$('#error').hide();
var username = $('#username').val();
var password = $('#password').val();

if(username == ""){
    $('input#username').focus();
    return false;
}

if(password == ""){
    $('input#password').focus();
    return false;
}

var params = {username: username, password: password};
var url = "../loginProcessAjax.php";

$("#statusLogin").show();

$.ajax({
    type: 'POST',
    url: url,
    data: params,
    dataType: 'json',
    beforeSend: function() {
      document.getElementById("statusLogin").innerHTML= '<img src="../images/loginLoading.gif" /> checking...' ;
    },

    success: function(data) {

        $("#statusLogin").hide();

        if(data.success == true){

            $('#loggedIn').show();
            $('#loginContent').slideToggle();
            $('#loggedOut').hide();

        }else{
           // alert("data.message... " + data.message);//undefined
            $("#error").show().html(data.message);
        }

    },
    error: function( error ) {
        console.log(error);
    }
});
 }
4

3 に答える 3

2

次のようにして、PHP を使用して不要な要素を非表示にします。

<?php
$loggedIn = $general->loggedIn();
?>
... Some HTML

<div>
    <div id="loggedIn" <?php echo ( $loggedIn ? '' : 'style="display: none;"' ); ?>>
        .... Logged in stuff
    </div>
    <div id="loggedOut" <?php echo ( !$loggedIn ? '' : 'style="display: none;"' ); ?>>
        .... Logged Out Stuff
    </div>
</div>

<script>

    var loggedIn = <?php echo json_encode($loggedIn); ?>;

    $('#loginForm').submit(function() {
        ... Handle form submit
        ... When ajax returns true or false we can set loggedIn and then toggle the containers
    });

</script>
于 2013-07-23T21:01:19.577 に答える
1 
// CSS-Stylesheet 
#loggedIn,
#loggedOut {display: none}

<script>
        $(document).ready(function() {
            var loggedIn = <?php echo json_encode($general->loggedIn()); ?>;     
            if (loggedIn == true) { // i can just guess here...
                $("#loggedIn").show();
            }
            else {
                $("#loggedOut").show();
            }
        });
</script>
于 2013-07-23T21:05:17.030 に答える