Logo após o lançamento do JSF 2.0, aqueles que utilizavam bibliotecas de componentes com suporte a AJAX tiveram alguns problemas de compatibilidade. Se eu não me engano, o primefaces foi a primeira biblioteca que anunciou uma release totalmente compatível com o novo JSF. Outras bibliotecas mais populares como o Richfaces e Icefaces ainda estão pelo caminho de uma distribuição totalmente compatível. Sem mais delongas, recentemente atualizei meus projetos pessoais para o JSF 2.0 e sem muitas opções resolvi utilizar o primefaces. Todos os que utilizam o prime como biblioteca de componentes AJAX sabem (ou pelo menos deveriam saber) que ele já "incorpora" o jquery em sua distribuição. Logo, se você tenta adicionar o jquery por sua própria conta, seus códigos javascript não irão funcionar. Então, como referenciar o jquery nativo do primefaces em um projeto? A resposta é simples, embora, como já pude perceber, tem causado uma certa dor de cabeça para alguns (como causou a mim):
Assim como referenciamos os demais arquivos javascript em nosso projeto faremos com o jquery. Contudo, utilizaremos as novas tags JSF <h:head> e <h:outputScript> que correspondem, respectivamente, às tags <head> e <script>. Observe abaixo como fazer isso:
<h:head> <h:outputScript library="primefaces/jquery" name="jquery.js"/> <h:outputScript>$ = jQuery;</h:outputScript> <!-- ...demais referências --> </h:head>
Pode-se utilizar a forma convencional, mas como o JSF disponibilizou essas novas tags, utilizá-las é uma questão de boa prática. Na linha 2 referenciamos o "jquery.js" nativo do primefaces, o qual se encontra no pacote "primefaces/jquery". Na linha 3, o código '$=jQuery' garante que não teremos conflito de sintaxe entre diferentes bibliotecas javascript. Todos os seus códigos que necessitam do jquery passarão a utilizar a distribuição que vem no próprio primefaces, sem conflitos e problemas com os componentes JSF e entre funções javascript.
Obs: Na linha 2, no atributo "library", pode-se utilizar um ponto no lugar da barra. Ficaria assim: library="primefaces.jquery".
Aos amantes de jquery que utilizam JSF 2.0, fica esta simples, mas importante dica inicial de configuração. A todos uma ótima semana, boa sorte nos projetos e até a próxima!
Obs: Na linha 2, no atributo "library", pode-se utilizar um ponto no lugar da barra. Ficaria assim: library="primefaces.jquery".
Aos amantes de jquery que utilizam JSF 2.0, fica esta simples, mas importante dica inicial de configuração. A todos uma ótima semana, boa sorte nos projetos e até a próxima!
Oi Neto, obrigado pelo post. Porém nem todos os plugins do primefaces funcionam depois de importar o Jquery. Estou tentando usar o p:editor mas não está funcionando, recebo a seguinte mensagem de erro: Uncaught TypeError: Object has no method 'cleditor'
ResponderExcluirVocê sabe como resolver isso?
Olá Albino, acabei desistindo por um tempo de escrever de fato por aqui, mas deixe-me fazer algumas perguntas qto a sua dúvida:
ResponderExcluir1)Qual a versão do prime que vc está utilizando?
2)Esse erro acontece em todos os navegadores?