title: How to check if session is set in JQuery warning: Synchronous XMLHttpRequest
body: <p>My website has login system and when the link with the id <code>show</code> is clicked, I want it to <strong>display login window</strong> if <strong>session is not set</strong>. And when <strong>session is set</strong> (when logged in), I want the <code>show</code> link to <strong>show a drop down menu.</strong></p>
  
  <p>How do I achieve this via PHP or JQuery or by using both? Also, I don't want to redirect or refresh the page.</p>
  
  <p>below is the code that I've written and it does not work:</p>
  
  <p><strong>index.php</strong></p>
  
  <pre><code>&lt;a href="" id = "show"&gt;SHOW&lt;/a&gt;
  
  //this is hidden
  &lt;div id="dropdown"&gt;
      &lt;a href="one.php"&gt;one&lt;/a&gt;
      &lt;a href="two.php"&gt;two&lt;/a&gt;
  &lt;/div&gt;
  
  //this is hidden
  &lt;div id="loginWindow"&gt;
      &lt;p&gt;please login&lt;/p&gt;
      ....code
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>login.php</strong></p>
  
  <pre><code>&lt;?php
      ob_start();
      session_start();
      include_once('database.php');
  
      if(isset($_SESSION['username'])){
          echo    '&lt;script&gt;',
                  '$(function(){ afterLoginIcon(); })',
                  '&lt;/script&gt;';
  
      }
      if (!(isset($_SESSION['username']))){
          echo    '&lt;script&gt;',
                  '$(function(){ showpopup(); })',
                  '&lt;/script&gt;';
  
      }
      else {echo "something went wrong"; return false;}
  
  
      ob_end_flush(); 
  ?&gt;
  </code></pre>
  
  <p><strong>script.js</strong></p>
  
  <pre><code>$('#show').click(function (e) {
      $.post( "loginIcon.php" );
      return false; //to prevent refreshing the page
  });
  
  function showpopup()
  {
       $("#loginWindow").fadeIn();
       $("#loginWindow").css({"visibility":"visible","display":"block"});
  }
  
  function afterLoginIcon() {
      $("#dropdown").show();
  }
  </code></pre>
  
  <p><strong>EDIT</strong>: I have changed <code>$.post( "loginIcon.php" );</code> to <code>$('#show').load( 'loginIcon.php' );</code> and it works, however, in console, I get warning that says <strong>Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.</strong></p>