Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Problemas com Primefaces ajax não está funcionando

Opa pessoal sou novo aqui estou testando uma funcionalidade em ajax de primefaces, más não esta funcionando, eu tenho um combobox (tipo de servico) que ao selecionar um tipo de servico ele deveria carregar o outro combobox (servico) conforme o tipo de servico selecionado , abaixo segue o código da minha página se alguém puder me ajudar agradeço ( estou utilizando o primefaces.2.2.1 ):

insira seu código aqui
<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets" >
    <h:head>
        <title>Combos Aninhados</title>
    </h:head>
    <h:body>
    <f:view>
        <h:form id="form" > 
            <p:panel header="Combos Aninhados com JSF2 e Primefaces" >
                <h:panelGrid columns="2" >
                    <h:outputLabel value="Tipo de Servico *" />
                    <h:selectOneMenu id="servicoTipo" value="#{servicoTipoController.servicotipo}" required="true" requiredMessage="Campo obrigatório" style="width: 250px;" >
                        <f:selectItem itemLabel="Selecione" />
                        <f:selectItems value="#{servicoTipoController.servicoTipoLista}" var="ST" itemValue="#{ST}" itemLabel="#{ST.descricao}" />
                        <p:ajax  update="servico" />
                    </h:selectOneMenu>

                    <h:outputLabel value="Serviço *" />
                    <h:selectOneMenu id="servico" value="#{servicoTipoController.servico}" required="true" requiredMessage="Campo obrigatório"  style="width: 250px;" >
                        <f:selectItem itemLabel="Selecione" />
                        <f:selectItems value="#{servicoTipoController.servicoLista}" var="c" itemValue="#{c}" itemLabel="#{c.nome}" />
                    </h:selectOneMenu>
                </h:panelGrid>
              <!--   <p:commandButton id="btnSelecionar" value="Selecionar" update="form" style="margin-left: 80px; margin-bottom: 20px;" />
               </p:panel>
        </h:form>
        </f:view>
    </h:body>
</html>
5 respostas

Oi Givanildo,

Tente usar o componente f:ajax (e não p:ajax), alem disso use o atributo event:

<f:ajax  update="servico" event="change" />

abs

Agradeço a resposta Nico, porém ainda não está executando , esta dando erros abaixo no browser será que você já passou por isto, um detalhe é que não estou utilizando a anotação do jsf ManagedBean, e sim utilizo a anotação do Srping @Controller(value="servicoTipoController") @Scope("session")

Más não tenho certeza que seja, isto pois o binding funciona, tão é que utilizo o @PostConstruct no metodo init() para carregar o primeiro combobox de tipo de serviço , no qual ao selecionar um tipo de serviço ele deveria executar o ajax para carregar o outro combo que é de serviço conforme o tipo de serviço selecionado, será que fui claro? Desde já agradeço.

Erros dos browser:

Mozzila: URL do pedido: http://localhost:8080/JSFSpringJPAExample/agenda/agenda.jsf Método do pedido: POST Código do status: HTTP/1.1 403 Forbidden Cabeçalhos do pedido 17:53:33.000 User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0 Referer: http://localhost:8080/JSFSpringJPAExample/agenda/agenda.jsf Pragma: no-cache Host: localhost:8080 Faces-Request: partial/ajax Content-Type: application/x-www-form-urlencoded;charset=UTF-8 Content-Length: 391 Connection: keep-alive Cache-Control: no-cache Accept-Language: pt-BR,pt;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate Accept: text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8 Cookies enviados JSESSIONID: 32B4869DCF01AB0E333D8DAD06CC4954 Cabeçalhos da resposta Δ4 ms x-xss-protection: 1; mode=block X-Frame-Options: DENY x-content-type-options: nosniff Server: Apache-Coyote/1.1 Pragma: no-cache Expires: 0 Date: Thu, 01 Sep 2016 20:53:33 GMT Content-Type: text/html;charset=utf-8 Content-Length: 1116 Content-Language: en Cache-Control: no-cache, no-store, max-age=0, must-revalidate

Chrome

Request URL:http://localhost:8080/JSFSpringJPAExample/agenda/agenda.jsf Request Method:GET Status Code:200 OK Remote Address:127.0.0.1:8080 Response Headers view source Cache-Control:no-cache, no-store, max-age=0, must-revalidate Content-Length:3381 Content-Type:text/html;charset=UTF-8 Date:Thu, 01 Sep 2016 20:40:34 GMT Expires:0 Pragma:no-cache Server:Apache-Coyote/1.1 X-Content-Type-Options:nosniff X-Frame-Options:DENY X-XSS-Protection:1; mode=block Request Headers view source Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8 Accept-Encoding:gzip, deflate, sdch Accept-Language:pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4 Connection:keep-alive Cookie:JSESSIONID=D3EF05E0F04EB811681155D7579F56D3; utma=111872281.114397728.1472739887.1472739887.1472739887.1; utmz=111872281.1472739887.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none) Host:localhost:8080 Referer:http://localhost:8080/JSFSpringJPAExample/teste.jsf Upgrade-Insecure-Requests:1 User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

solução!

Oi Givanildo,

Segue uma possível solução:

Dentro do primeiro h:selectOneMenu use o f:ajax da forma seguinte:

<f:ajax render="messages servico" listener="#{servicoTipoController.listener}" />

Repare que estou usando o atributo render (update não existe). Dentro do render estamos definindo as id's que devem ser atualizadas. Além da id do outro h:selectOneMenu (servico) coloquei também a id do componente h:messages. Então adicione esse componente na sua página:

<h:messages id="messages" />

Isso é importante para pegar problemas dos convertes e validadores que podem impedir que o request ajax executa com sucesso.

Além do atributo render usei um listener. Esse listener é nada mais do que um método dentro do seu bean/controller que será executa no request ajax e populará a lista do segundo combobox:

public void listener(AjaxBehaviorEvent event) {
    //aqui popula a lista do segundo combobox
    //baseado nos dados do primeiro combobox
    this.servicoLista = new ArrayList<Servico>();
    //...
}

Esse código funciona e eu testei aqui, mas eu tenho a impressao que vc ainda tem um problema na hora de converter o valor enviado pelo primeiro h:selectOneMenu na requisição ajax. fique atento o que o componente h:messages apresentará.

abs

Nico, devido a correria não tive tempo de fazer a alteração mas assim que fizer te responderei se funcionou, por enquanto agradeço à ajuda, muito obrigado.

Bom dia Nico , aquela solução q vc deu resolveu, já está executando o Ajax do JSF agradeço a ajuda!