Estou desenvolvendo um sistema novo em JSF com um tema pronto baseado em Bootstrap, entretanto alguns componentes específicos eu preciso usar do PrimeFaces(o componente <p:calendar/> e outros) e esses componentes simplesmente não funcionam.
Pesquisando em diversos fóruns da comunidade, pude identificar que tanto o Bootstrap quanto o PrimeFaces usam bibliotecas jQuery, e elas estão em conflito. Para solucionar, foi indicado que eu usasse na minha página tencargosCadastro.xhtml:
<script>
jQuery(function(){
jQuery.noConflict();
});
</script>
Realmente, a partir disso o meu componente <p:calendar> funciona, mas… O menu que faz parte do template do projeto <ui:composition template="/templates/index.xhtml"> deixa de funcionar.
Teria como eu “isolar” essas chamadas dentro da mesma página, visto que eu não tenho uma chamada explícita de importação do jQuery do PrimeFaces? Sem que o tema do menu interferisse no conteúdo da página e vice versa?
Exemplo:
Arquivo: menu.xhtml:
<h:body>
//Importa jquery do template baixado
<script src="resources/vendor/jquery/jquery.min.js"></script>
Arquivo: tencargosCadastro.xhtml:
<script>
jQuery(function(){
jQuery.noConflict();
});
</script>
<ui:composition template="/templates/index.xhtml"> //importa o menu junto do template para a página
<ui:define name=“page-wrapper”>
[…]
<p:calendar pattern=“dd/MM/yyyy” locale=“pt” value="#{tencargoBean.tencargos.dinicVgcia}"/> //componente do primefaces a ser usado
[…]
Teria alguma solução para isso ou realmente não dá pra usar duas bibliotecas jQuery na mesma página?