1

estoy intentando realizar un menú dropdown el cual muestre elementos determinados en función del tipo de usuario (admin = 1, poweruser = 2, read_only = 3).

Lo que estoy haciendo es, primero de todo, mostrar con PHP el menú (para tenerlo como módulo y poder usarlo en varias páginas).

Código php:

  public function printNavBar(){
    echo "
    <div class='navbar'>
      <div class='dropdown'>
        <button class='dropbtn'><img src='../resources/icons/menu.png' alt='Menu Icon' class='dropdownMenuIcon'></button>
        <div class='dropdown-content'>
          <a href='userpanel.php?action=addResume' id='dropDownCreateResume'>
            <img src='../resources/icons/resume.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
            <span class='dropdownText'>New CV</span>
          </a>
          <a href='userpanel.php?action=createUser' id='dropDownCreateUser'>
            <img src='../resources/icons/add-new-user.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
            <span class='dropdownText'>New user</span>
          </a>
          <a href='userpanel.php?action=editUser' id='dropDownEditUser'>
            <img src='../resources/icons/edit-user.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
            <span class='dropdownText'>Edit user</span>
          </a>
          <a href='userpanel.php?action=changePassword' id='dropDownChangePassword'>
            <img src='../resources/icons/change-password.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
            <span class='dropdownText'>Change Password</span>
          </a>
          <a href='userpanel.php?action=showLog' id='dropDownShowLog'>
            <img src='../resources/icons/log-file.png' alt='Menu Icon' class='dropdownMenuIcon imgDropdown'>
            <span class='dropdownText'>Log</span>
          </a>
        </div>
      </div>
        <a class='navBarElement' href='../index.php?logOut=true'>
          <img class='logoutMenuIcon' src='../resources/icons/logout.png' alt='Logout icon'>
        </a>
        <a class='navBarElement' href='../index.php'>
          <img class='homeIcon' src='../resources/icons/home.png' alt='Home icon'>
        </a>
    </div>''";
  }

Una vez hecho esto, llamo a la función de javascript que debería agregar la clase para que los elementos no se muestren en función del usuario:

function showElements(idUser) {
    // User type
    const ADMIN_USER = 1;
    const POWER_USER = 2;
    const READ_ONLY_USER = 3;

    // Switch user type, we add css to elements or not
    switch (idUser) {
      case POWER_USER:
        document.getElementById('dropDownCreateUser').setAttribute('class', 'hiddenDropdownElement');
        document.getElementById('dropDownEditUser').setAttribute('class', 'hiddenDropdownElement');
        document.getElementById('dropDownShowLog').setAttribute('class', 'hiddenDropdownElement');
        break;
      case READ_ONLY_USER:
        document.getElementById('dropDownCreateUser').setAttribute('class', 'hiddenDropdownElement');
        document.getElementById('dropDownEditUser').setAttribute('class', 'hiddenDropdownElement');
        document.getElementById('dropDownShowLog').setAttribute('class', 'hiddenDropdownElement');
        document.getElementById('dropDownCreateResume').setAttribute('class', 'hiddenDropdownElement');
        break;
    }
}

Estas funciones, son llamadas en la página principal.

Página principal:

<?php
  session_start();
  // Required files
  require_once '../php/logOut.php';
  require_once '../php/redirections.php';
  require_once '../php/printDataProcess.php';
  // Checking the session
  if(!isset($_SESSION['userSession'])){
    header("Location: ../index.php");
  }
  // Checking the session
  if (!isset($_SESSION['created'])) {
    $_SESSION['created'] = time();
  } else if (time() - $_SESSION['created'] > 3600) {
      // session started more than 1 hour ago
      session_regenerate_id(true);    // change session ID for the current session and invalidate old session ID
      $_SESSION['created'] = time();  // update creation time
      logOut();
  }

  if (isset($_GET['logOut'])) {
    logOut();
  }
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <!-- CSS imports -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../css/main.css" />
    <!-- JQuery include -->
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../js/hiddenNavBarData.js"></script>
    <meta charset="utf-8">
    <title>User panel</title>
  </head>
  <body>
    <!-- Navigation Bar content -->
    <?php
      $userListHandler = PrintDataHandler::getInstance();
      $userListHandler->printNavBar();
     ?>
    <!-- Body content -->
    <div class="bodyContainer">
    <?php
    echo "<div id='userGreet'>
            <h3>Welcome, ".$_SESSION['userSession']['name']." ".$_SESSION['userSession']['surname']."</h3>
          </div>";
    ?>
    </div>
    <?php
      $userListHandler->printFooter();
     ?>
     <script type="text/javascript">
       var userLevel = <?php echo $_SESSION["userSession"]["level"]; ?>;
       showElements(userLevel);
     </script>
  </body>
</html>

Mi problema es que no añade las clases de css a los elementos.

He estado probando la consola en el navegador por si había problemas y parece que no. A parte, al usar el depurador, no agrega la clase.

¿Cómo puedo solucionarlo?

Gracias.

0

1 respuesta 1

1

Para agregar clase a un elemento con javascript es así, tienes que asignar un espacio más el nombre de la clase que quieras agregar

var agregarClase = document.getElementById('dropDownCreateUser');
agregarClase .className += " hiddenDropdownElement";

o tambien si quiere hacerlo mas acontado sería tal que así.

document.getElementById('dropDownCreateUser').className = "hiddenDropdownElement";

Ejemplo de como se cambia una clase

$("#cambiarColor").click(function(){

  document.getElementById('agregarColor').className = "red";

});
#agregarColor{
  border-style: solid;
  width : 100px;
  height: 100px;

}

.red{
  background-color : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="agregarColor" class="">

  Si presiono el boton me hago rojo
</div>

<button id="cambiarColor">Cambiar Color</button>

5
  • ¿Por qué un espacio? No entiendo. el 13 abr. 2018 a las 14:24
  • porque estas concatenando un string, pero ese no es el caso del que te deje abajo. el 13 abr. 2018 a las 14:42
  • Pues estoy probando y sigue sin funcionar. He probado a hacer un alert dentro del switch y el código entra, pero sigue sin añadirse aparentemente. el 13 abr. 2018 a las 14:49
  • te deje un ejemplo para que veas como si funciona.Fijate de que entra al switch el 13 abr. 2018 a las 14:57
  • Ahí usas jQuery también. Interesante. Voy a probarlo estos días. el 14 abr. 2018 a las 8:54

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.