Ultilizar Ajax no JSF, problemas[RESOLVIDO]

Front-end
#1

Boa tarde,

Venho através desse tópico pedir uma ajuda, eu programo java web, ultilizando jBoss 7.1 + jBoss Tools e JSF, recentemente estudei javaScript e Ajax,
só que ao ‘juntar’ os dois, estou com muitos problemas, porque na parte do ajax do curso apenas ensinou a fazer requisições com um html muito simples, mas agora ao usar
com jsf, <h:head>, <h:dataTable>, … e como estou desenvolvendo uma lojaVirtual, ta muito complicado mesmo… to até preocupado.
Gostaria de saber se alguém conhece algum tutorial ou algum site que fala sobre ou algo assim, talvez se não for pedir demais posso postar algumas partes do meu código pra
me darem um pequeno empurrãozinho.

Obrigado pela atenção

#2

Boa Tarde,

Com uma rápida pesquisa no google achei vários exemplos:

http://www.rponte.com.br/2008/04/10/utilizando-ajax-com-jsf-de-maneira-eficiente/
http://blog.gilliard.eti.br/2009/05/ajax-no-jsf-2/
http://www.mkyong.com/jsf2/jsf-2-0-ajax-hello-world-example/

Acho que fica mais facil se você relatar qual é a dúvida ou problema que está ocorrendo.

:wink:

#3

[quote=nicocelli]Boa Tarde,

Com uma rápida pesquisa no google achei vários exemplos:

http://www.rponte.com.br/2008/04/10/utilizando-ajax-com-jsf-de-maneira-eficiente/
http://blog.gilliard.eti.br/2009/05/ajax-no-jsf-2/
http://www.mkyong.com/jsf2/jsf-2-0-ajax-hello-world-example/

Acho que fica mais facil se você relatar qual é a dúvida ou problema que está ocorrendo.

:wink: [/quote]

Mas assim, a ultilização do <f:ajax> não é necessário cria um arquivo javaScript?.. tipo n to entendendo, por ex: oq quero fazer é um carrinho de compras
cada linha da tabela com os produtos tem um botão ‘adicionar ao carrinho’ e ao clicar nesse botão os valores dessa linha vão pra outra tabela na mesma pagina…

segue minha dataTable

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core"&gt;

&lt;h:head&gt;

	&lt;script type="text/javascript" src="../resoures/scripts/values.js"&gt;&lt;/script&gt;
	
   &lt;/h:head&gt;
   
 	
   
   &lt;h:body&gt;
   &lt;h:form&gt;
    &lt;h2&gt;#{mesg.titulodois}&lt;/h2&gt;
   		&lt;h4&gt;&lt;h:commandLink style="color: green;" action="retornarMenu" value="#{mesg.retornar}" /&gt;&lt;/h4&gt;
   &lt;/h:form&gt;
   		&lt;h:form id="formulario"&gt;
   			&lt;h:dataTable id="tabela" border="1" value="#{produtoMB.listAll}" var="prod"&gt;
   				&lt;h:column&gt;
   					&lt;f:facet name="header"&gt;
   						#{mesg.prodCod}
   					&lt;/f:facet&gt;
   						&lt;h:outputText value="#{prod.cod}" id="codigo" &gt;
   						&lt;/h:outputText&gt;
   				&lt;/h:column&gt;
   				&lt;h:column&gt;
   					&lt;f:facet name="header"&gt;
   						#{mesg.ProdName}
   					&lt;/f:facet&gt;
   					&lt;h:outputText  value="#{prod.nome}" name="nome"&gt;
   					&lt;/h:outputText&gt;
   				&lt;/h:column&gt;
   				&lt;h:column&gt;
   					&lt;f:facet name="header"&gt;
   						#{mesg.ProdPreco}
   					&lt;/f:facet&gt;
   					&lt;h:outputText value="#{prod.preco}" name="preco"&gt;
   					&lt;/h:outputText&gt;
   				&lt;/h:column&gt;
   				&lt;h:column&gt;
   					&lt;f:facet name="header"&gt;
   						#{mesg.emEstoque}
   					&lt;/f:facet&gt;
   					&lt;h:outputText value="#{prod.quantidade}" name="estoque"&gt;
   					&lt;/h:outputText&gt;
   				&lt;/h:column&gt;
   				&lt;h:column&gt;
   					&lt;h:panelGrid id="panel" columns="1"&gt;
   						&lt;h:commandButton value="#{mesg.adicionar}" id="botao"&gt;
   						&lt;/h:commandButton&gt; 
   					&lt;/h:panelGrid&gt;
   				&lt;/h:column&gt;
   			&lt;/h:dataTable&gt;
   		&lt;/h:form&gt;
   &lt;/h:body&gt;
   
   
&lt;/html&gt;

O meu real problema é que não to conseguindo acessar os ‘id’s’ dos ‘outputText’, e o ‘commandButton’ quando eu consigo atrela uma function nele, só consigo fazer funcionar no botão da primeira linha da tabela, resumindo eu ainda não sei como trabalhar da forma correta JSF + JAVASCRIPT + AJAX

#4

utilize o ajax nativo do jsf, exemplo no botão:

<h:commandButton value="#{mesg.adicionar}" id="botao">  
      <f:ajax event="click" render"tabela" listener="#{seuBean.suaAcao}"/>
</h:commandButton>

com isso vc nao precisa importar nada e nem codificar o ajax pra executar.

detalhando isso vc vai ter :

render -> ID do componente a ser rendenizado ao final da ação;
event -> nome do evento que vai ser feito o bind;
listener -> ação a ser realizada.

obs: uma dica na sua ação receba um objeto na ação, exemplo vou inserir um item

<h:commandButton value="#{mesg.adicionar}" id="botao">  
      <f:ajax event="click" render"tabela" listener="#{seuBean.suaAcao(itemXpto)}"/>
</h:commandButton>
#5

[quote=Polverini]utilize o ajax nativo do jsf, exemplo no botão:

<h:commandButton value="#{mesg.adicionar}" id="botao">  
      <f:ajax event="click" render"tabela" listener="#{seuBean.suaAcao}"/>
</h:commandButton>

com isso vc nao precisa importar nada e nem codificar o ajax pra executar.

detalhando isso vc vai ter :

render -> ID do componente a ser rendenizado ao final da ação;
event -> nome do evento que vai ser feito o bind;
listener -> ação a ser realizada.

obs: uma dica na sua ação receba um objeto na ação, exemplo vou inserir um item

<h:commandButton value="#{mesg.adicionar}" id="botao"> <f:ajax event="click" render"tabela" listener="#{seuBean.suaAcao(itemXpto)}"/> </h:commandButton> [/quote]

Humm to entendendo, quer dizer que então se eu quiser fazer uma requisição (carrega um conteudo na pagina) eu não preciso
cria um arquivo javaScript.js? uso somente o ajax nativo mesmo?

#6

Isso mesmo, a partir da versão 2.X o JSF tem o ajax nativo, vc tambem pode optar por usar uma implementação diferente, é o caso do A4J, Primefaces, IceFaces, etc …

da uma olhada aqui acho que vai te ajudar:

http://docs.oracle.com/javaee/6/tutorial/doc/gkabr.html

#7

Como o Polverini disse, você pode optar por usar uma implementação como o primefaces, que na minha opinião é uma tremenda mão na roda.
Dê uma olhada nos showcases: http://www.primefaces.org/showcase/ui/pprUpdate.jsf

No uaihebert tem uns materiais muito bons que gosto de usar como referência em JSF: http://uaihebert.com/

Abraços

#8

Isso mesmo que eu precisava, agora eu entendo o porque do uso do ajax nativo, eu não sabia que com uso dele não necessario a criação de um script, agora entendi porque falam que essa é a melhor coisa do jsf.

Obrigado mesmo pela atenção ai pessoal! Abraço

#9

Pra finaliza o tópico deixo esse excelente tutorial que vai me ajudar muito e com certeza ajuda aos demais
http://uaihebert.com/?p=669

#10