CODEWITHSUNDEEP
javascriptphpjquery
JCD
JCD

Reputation: 297

Hide menu item according to user account

On my login mysql table, i have an account type column. If the user has a Manager account type, i want to show a management menu item and if not hide it.

This is pretty simple but its not working:

In my header, i have the following:

<script>
var logged_in_account_type = "<?php echo $_SESSION['account_type'] ; ?>";
    if(logged_in_account_type === "Manager") {             
         document.getElementById('management_menu').style.display = 'block';
    } else {
        document.getElementById('management_menu').style.display = 'none';                          
    }
</script>

I tried without the echo has well.

<div id="management_menu" style="display:none">
  <li>
    <a href="index.php"><i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span></a>
  </li>
</div>

enter image description here

enter image description here

<div class="text-bg"><span class="text-slim">Welcome,</span> <span class="text-semibold"><?php echo $_SESSION['account_type'] ?></span></div>

Upvotes: 2

Views: 1156

Answers (2)

Mihailo
Mihailo

Reputation: 4917

Have you tried using php if while rendering your menu? Something like this:

  <?php if($_SESSION['account_type'] == 'Manager'): ?>
<div id="management_menu">
 <ul>
  <li>
    <a href="index.php">Dashboard</a>
  </li>
    <li>
      <a href="index.php">Users</a>
    </li>
    </ul>
</div>  
  <?php endif; ?>

Upvotes: 3

Jose Manuel Abarca Rodr&#237;guez
Jose Manuel Abarca Rodr&#237;guez

Reputation: 10371

Where is your javascript code in the document? If your javascript code is on the top of the document, it possibly shows or hides the <div> element properly, but, because the <div> element is at the bottom of the document, it is hidden because its "style" says so.

The solution is to move the javascript code below the <div> element, this will solve the "execution order" problem you have. Example :

<div id="management_menu" style="display:none">
  <li>
    <a href="index.php"><i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span></a>
  </li>
</div>

<?php
session_start();
$_SESSION['account_type'] = "Manager";
?>

<script>
var logged_in_account_type = "<?php echo $_SESSION['account_type'] ; ?>";
    if(logged_in_account_type === "Manager") {             
         document.getElementById('management_menu').style.display = 'block';
    } else {
        document.getElementById('management_menu').style.display = 'none';                          
    }
</script>

Upvotes: 0

Related Questions