title: jQuery .show() not working until a refresh is made
body: <p>I have a jQuery function to display various things depending on whether a user was logged in or not.</p>
  
  <p>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.  </p>
  
  <p>The id loggedIn is set to display:none and the the jquery should display it once logged in but it never does.</p>
  
  <p>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.<br>
  In the header, I have to refresh the page before the links change.</p>
  
  <p>Thanks tons for any help.</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function () {
      var loggedIn = &lt;? php echo json_encode($general - &gt; loggedIn()); ?&gt; ;
      if (loggedIn == true) {
          $("#loggedIn").show();
      } else {
          $("#loggedOut").show();
      }
  });            
  &lt;/script&gt;
  </code></pre>
  
  <p>Neither of the loggedIn or loggedOut elements display in the below code.</p>
  
  <pre><code>&lt;p id="loggedOut"&gt;YOOOOHOOOOOOO&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;?php
  
   $body = &lt;&lt;&lt;EOT
          &lt;div class="viewAndDownload" id="loggedIn"&gt;
              &lt;a href="../download.php?filename=bla.pdf"&gt;Click to download the PDF/&gt;
  &lt;/div&gt;
  EOT;
  </code></pre>
  
  <p>This is the HTML from the header where the login box doesn't show until after a refresh:</p>
  
  <pre><code>&lt;nav class = "memberHeaderArea" id="loggedIn"&gt;
      Links Here
  &lt;/nav&gt;
  
  &lt;nav class = "memberHeaderArea" id ="loggedOut"&gt;
   Removed links etc to save space
  &lt;input type="submit" name="loginButton" id="loginButton" value="Login!"   onclick="validLogin(); return false;"/&gt;
  </code></pre>
  
  <p>onclick calls an ajax function</p>
  
  <pre><code>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= '&lt;img src="../images/loginLoading.gif" /&gt; 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);
      }
  });
  }
  </code></pre>
  
  <p>Thank you again, this has been bugging me for ages and I haven't found a way to solve it despite many attempts</p>
  
  <p>EDIT: logged in function</p>
  
  <pre><code>public function loggedIn(){
  
  return (isset($_SESSION['id'])) ? true : false;
  }//end function
  </code></pre>