1

Llevo ratos intentando pasar este Jquery a Js pero no logro tener exito. Este es el codigo

<h:body onload="ocultarSegunRol()">          
    <h:form style=" display:  none" id="formRol">
    <h:commandButton  id="rol" value="#{usuarioController.ocultar()}"  />
    </h:form>
    <li id="li_supervisor"> 
    opcion supervisor
  </li>
    <li id="li_vendedor">
  opcion vendedor
</li>                   

   </h:body>
   <script>
    function ocultarSegunRol(){
            var valorRol=document.getElementById("formRol:rol").value;
         if(valorRol==="[1]"){
            $("#li_vendedor").css( "display", "none" );
        }
        if(valorRol==="[2]"){
            $("#li_supervisor").css( "display", "none" );

        }

    }

</script>

Por favor necesito pasar esto a Js puro porque me esta dando pobrema usar Jquery en jsf, estoy usando templates.

2 respuestas 2

1

Lo unico que veo de ahi en jquery solo son tus cambios en el CSS. Su equivalente en Javascript seria:

<script>
    function ocultarSegunRol(){
            var valorRol=document.getElementById("formRol:rol").value;
         if(valorRol==="[1]"){
            // aca esta el cambio
            document.getElementById("li_vendedor").style.display = "none";
        }
        if(valorRol==="[2]"){
            // aca esta el cambio
            document.getElementById("li_supervisor").style.display = "none";

        }

    }

</script>

Solo son esas dos lineas asi que creo que tengas problemas.

3
  • No me ha funcionado ninguna de las dos propuestas
    – WilsonPT
    Commented el 16 may. 2019 a las 4:54
  • Como te habrás dado cuenta ambas respuestas que te dimos hace el en cambio de las mismas líneas de código y son exactamente las mismas respuestas... El problema puede estar en otro lado en tu código... Seria bueno que nos des más información Commented el 16 may. 2019 a las 18:43
  • 1
    Gracias, he resuelto el objetivo que tenía el problema planteado, pero no por js sino por medio de un método en java. Gracias por responder a ambos.
    – WilsonPT
    Commented el 17 may. 2019 a las 7:08
1

Quedaría con js puro de esta manera, seleccionamos con document.getElementById() y ocultamos o mostramos de esta manera .style.display =, cualquier duda hazla saber.

function ocultarSegunRol(){
            var valorRol=document.getElementById("formRol:rol").value;
         if(valorRol==="[1]"){
            $("#li_vendedor").css( "display", "none" );
        }
        if(valorRol==="[2]"){
            $("#li_supervisor").css( "display", "none" );

        }

    }
    
    
    function ocultarSegundoRo1(){
    var valorRol=document.getElementById("formRol:rol").value;
      if(valorRo1 === "[1]"){
        
        document.getElementById('li_vendedor').style.display = 'none';
      
      }else{
        
        document.getElementById('li_supervisor').style.display = 'block';
        
      }
      
    }
<h:body onload="ocultarSegunRol()">          
    <h:form style=" display:  none" id="formRol">
    <h:commandButton  id="rol" value="#{usuarioController.ocultar()}"  />
    </h:form>
    <li id="li_supervisor"> 
    opcion supervisor
  </li>
    <li id="li_vendedor">
  opcion vendedor
</li>                   

   </h:body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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