Can Ajax update a dynamic navigation menu?

Question

I'm using a PHP function to determine what links are being displayed:

<?php
  //amend toplinks if logged in
  if($general->loggedIn()){ ?>
    <nav class = "memberHeaderArea">
      <ul>
        <li>
          <a href="userProfile.php?username=<?php echo $user['username'];?>">Profile<span class="user icon"></span></a>
        </li>
        <li>
          <a href="userLogout.php">Log out<span class="lock icon"> </span></a>
        </li>
      </ul>
    </nav>
  <?php
    //toplinks for when not logged in
  }else{ ?>

I've just changed the structure of my login to use Ajax and it works perfectly with the exception of the nav. It still shows login / register until a page refresh is called. Obviously the reason for using Ajax was to avoid the page refresh, but is there a way I can update these links within the success function?

success: function(data) {
  $("#statusLogin").hide();
  if(data.success == true){
    $('#loginContent').slideToggle();
  }else{
    // alert("data.message... " + data.message);//undefined
    $("#error").show().html(data.message);
  }

From what I've found, it looks like I may need to assign the nav's id and then use Ajax / jQuery to target that. But I'm not sure how. Any help greatly appreciated.

Answer 1

This is a basic (and dummy) stuff for checking login status with AJAX after page loading. Probably you want more serious check then if(true) and an echo call, but it will be something like this :) Check the fiddle below, so you can see the html and the css too...

$.getJSON('/echo/json/').done(function (data) {
    console.log("Call returned");
    if (true){
        //successful login
        $('#loggedin').slideToggle();
    }else {
        //unsuccessful login
        $('#login').slideToggle();
    }
}).fail(function (data) {
    console.log("Call failed");
    $('#login,#error').slideToggle();
}).always(function (data) {
    console.log("Always running");    
});

JSFiddle