jQuery .show（）在刷新之前无法工作

Question

I have a jQuery function to display various things depending on whether a user was logged in or not.

The function is in the header which is included in every page (I tried it within the head of the page in question with the same result.

The id loggedIn is set to display:none and the the jquery should display it once logged in but it never does.

I've tested with both loggedIn and loggedOut but nether appear, however the head does update the links, albeit after a refresh and that's the other issue.
In the header, I have to refresh the page before the links change.

Thanks tons for any help.

<script>
$(document).ready(function () {
    var loggedIn = <? php echo json_encode($general - > loggedIn()); ?> ;
    if (loggedIn == true) {
        $("#loggedIn").show();
    } else {
        $("#loggedOut").show();
    }
});            
</script>

Neither of the loggedIn or loggedOut elements display in the below code.

<p id="loggedOut">YOOOOHOOOOOOO</p>
  </div>

<?php

 $body = <<<EOT
        <div class="viewAndDownload" id="loggedIn">
            <a href="../download.php?filename=bla.pdf">Click to download the PDF/>
</div>
EOT;

This is the HTML from the header where the login box doesn't show until after a refresh:

<nav class = "memberHeaderArea" id="loggedIn">
    Links Here
</nav>

<nav class = "memberHeaderArea" id ="loggedOut">
 Removed links etc to save space
<input type="submit" name="loginButton" id="loginButton" value="Login!"   onclick="validLogin(); return false;"/>

onclick calls an ajax function

function validLogin(){

//removed get username etc

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);
    }
});
}

Thank you again, this has been bugging me for ages and I haven't found a way to solve it despite many attempts

EDIT: logged in function

public function loggedIn(){

return (isset($_SESSION['id'])) ? true : false;
}//end function

Answer 1

$(document).ready(function(){
    function testLoggedIn(){
      var loggedIn = <? php echo json_encode($general - > loggedIn()); ?> ;
        if (loggedIn == true) {
          $("#loggedIn").show();
        } else {
          $("#loggedOut").show();
        }
    }

    setInterval(testLoggedIn(),1000);
});

Something like this should work.

EDIT The main idea is you have to constantly check if the user is logged in or not and not only on document ready. To achieve that you can use setInterval which will keep executing the function according to the interval value passed in parameters. This way , if this script is running on all your pages, all pages of the user will update automatically if he logs in / logs out, and not only the page where he fired the login event.