After the user logs in, I want the nav bar to change its "Log in" button to a "Log Out" button. After the user submits the correct username and password, I called toggleLogInButton(), which calls .load() to reload the nav bar. The "Congratulations" message shows up, but the log in button doesn't change. How do I fix this?
login.php
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="js/main.js"></script>
</head>
<?php include "includes/navbar.php" ?>
//some more code here
<?php
if( password_verify( $password, $db_hashed_password ) ) {
$_SESSION['logged_user'] = $username;
echo ("Congratulations, $username! You logged in successfully!");
echo "<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'>toggleLogInButton();</script>";
}
?>
main.js
$(document).ready(function(){
/*Reload Log In button for nav bar */
function toggleLogInButton() {
$( ".right" ).load( "../includes/navbar.php .right" );
}
});
navbar.php
<?php
echo ('<div class = "navBarWrapper">
<div class="top bar">
<ul class = "right float_right">');
if (isset($_SESSION['logged_user'])) {
echo("<li class = 'buttons'> <a href = 'logout.php' class='otherPages'>Log Out</a></li>");
} else {
echo("<li class = 'buttons'> <a href = 'login.php' class='otherPages'>Login</a></li>");
}
echo( '</ul>
</div>
</div>');
?>
