JSF and Javascript

Asked

Viewed 177 times

0

I have the following question: How JSF works with Javascript ?

I’ll be more specific. I’m in a project where I’m using JSF (primefaces), but I can’t do anything simple with Javascript, which would be a 

var btnCarregaAnexo = document.querySelector('carregaAnexo')
btnCarregaAnexo.style.display = 'none'

Shows an error in the console, that the variable btnCarregaAnexo this "null".

But in the button I’m trying to catch, you’re with "id" = carregaAnexo;

I’ve also tested with getElementById, but without success...

So conclusion, does JSF (primefaces) or Jboss, which I’m using, interfere with the ID’s path? I can’t possibly catch a component with JS...

Thank you, I’m sorry if I didn’t express myself in the best way, but I’m willing to talk to you.

I changed to perform the selection by CSS classes and the error persists...

XHTML

<p:commandButton id=“carrega1” styleClass="botaoAnexo"
value="Carregar Declaração"
title="Carregar Declaração e/ou Diploma de Conclusão do Ensino Médio"
onclick=“editarArquivo1.show();“
rendered=”#{empty atletaCidadaoController.atletaCidadao.tipoArquivo1}”/>

Javascript

var btnCarregaAnexo = document.querySelector('botaoAnexo');
            btnCarregaAnexo.style.display ='block';

CSS

.botaoAnexo{
    display: none;
}

CONSOLE ERROR

Uncaught TypeError: Cannot read property ‘style’ of null
javascript java primefaces jboss xhtml

  • What position did you put this script in? At the head or end of the body?

  • Put your code

  • Well, I don’t know what your knowledge of Javascript, but, this is not how the querySelector works, by your example the correct would be querySelector('#loaded').

  • So Leandrade, I also tested with '#' but it presents same error, I posted just below with an attempt to get by the CSS class, but it presents the same error in the console... Laerte the script is at the end of body ! , but I have also tested with the script at the beginning of body, I also tried to put the script in another file... and import it into html, but always same error...

  • Jsf component ids are generated dynamically. You would need to define a class and use findByClassName.

  • vc did not consider using the upload component of primefaces files?

  • Adrianogomes, I’m using the prime upload component, but the version of prime qe utilizo is an older version, and this version is not accessible (visually impaired)... And I want to try to make it accessible using Avascript, but even the basics are not working, I do not know if Jboss interferes, or primefaces is not letting me get components cm JS.

  • You’re trying to do something via javascript that I think is easier via EL. What exactly do you need to do? Control the rendering of commandButton?

Show 3 more comments

1 answer

0

If you need to control the style of a component, try using EL. The example below displays a grayscale div if it is awaiting termination (the controlador.aguardandoEncerramento is a boolean):

<h:panelGroup id="pnlFoto">
    <ui:param name="escalaDeCinza" value="#{controlador.aguardandoEncerramento ? 'filter: grayscale(1);' : ''}" />
    <p:outputPanel style="height: 100%; background: url(/imagens/user.gif) no-repeat center center fixed; background-size: cover; #{escalaDeCinza}" />
</h:panelGroup>

In this case, you only need to update pnlFoto to change the style.

Browser other questions tagged javascript java primefaces jboss xhtml

You are not signed in. Login or sign up in order to post.