[RESOLVIDO] Conflito jQuery e PrimeFaces

Programação
,
#1

Bom dia. Favor me ajudem nessa.
Tenho uma pagina que exibe baners e para isso ela usa Jquery.
ele funciona normal mas o problema é que quando adiciono “componentes” primefaces6.2 nessa mesma pagina. os componentes primefaces aparecem mas não funcionam. oque achei sobre o assunto é que é um conflito entre o jquery do primefaces e o jquery adicionado.
peço ajuda para solucionar esse problema de conflito entre jquery e primefaces…
é nesta linha aqui que aparece o conflito, mas eu preciso usar ela, porque se eu desativar essa linha, o conflito some, mas o baner
para de funcionar.

script type=“text/javascript” src=“superSized/js/eljquery1.6.1/jquery.min.js”>

alguém pode me dar essa força.

1 curtida
#2

Na página que usa primefaces não adicione outro jquery, deixa somente a versão desse primefaces.

#3

@javaflex no meu caso eu tenho que deixar essa linha script type=“text/javascript” src=“superSized/js/eljquery1.6.1/jquery.min.js”> com chamada externa do jquery . se eu tirar essa linha o prime faces funciona mas ai o baner que usa essa jquery para de funcionar.e eu preciso que o baner e o primefaces funcionem na mesma pagina. o baner que falo eu tirei daqui
http://www.buildinternet.com/2009/05/supersized-20-full-screen-imagebackground-slideshow-jquery-plugin-w-transitions-and-controls/
se tiver mais sugestões favor. sera bem vinda. obrigado por responder

#4

Vai ter que decidir qual jquery usar, ou jogar o banner em um iframe.

#5

obrigado pela ajuda @javaflex. fiz um teste com o iframe como vc falou. mas não deu para eu usar porque guando eu inseri o baner em um iframe, parou o conflito, mais quando eu clicava nos links de paginas de dentro do baner eram aberta a pagina do link somente dentro da pequena área interna do do iframe onde estava o baner, e não na area total da pagina normal. mas se não fosse o uso dos links no baner, o iframe resolveria meu problema. obrigado ai, o uso do iframe pode me salvar futuramente em alguma necessidade.
mas eu conseguir resolver o problema do conflito do jquery com prime faces de outra forma, vou postar a baixo.

#6

Achei a solução me baseando neste link, para resolver o problema de incompatibilidade do jQuery com PrimeFaces


abaixo o código estava assim quando estava dando conflito:

<h:head>
	<script type="text/javascript" src="superSized/js/eljquery1.6.1/jquery.min.js"></script>
	 
	<script type="text/javascript">
		
		jQuery(function($){
			
			$.supersized({
			
				slide_interval          :   3000,		// Length between transitions
				transition              :   3, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
				transition_speed		:	700,		// Speed of transition
														   
				// Components							
				slide_links				:	'blank',	//Individual links for each slide (Options: false, 'num', 'name', 'blank')
				slides 					:  	[			// Slideshow Images
					 																																						 
													{image : 'superSized/imgBaner/b1.jpg', title : 'Image Credit: Maria1 Kazvan1', thumb : 'superSized/imgBaner/b1.jpg', url: 'principal.xhtml'},
													{image : 'superSized/imgBaner/b2.jpg', title : 'Image Credit: Maria2 Kazvan2', thumb : 'superSized/imgBaner/b2.jpg', url : 'computador2.xhtml'},  
													{image : 'superSized/imgBaner/b3.jpg', title : 'Image Credit: Maria3 Kazvan3', thumb : 'superSized/imgBaner/b3.jpg', url : 'http://www.primefaces.org'},
											]
				
			});
	    });
	   
	</script>	
</h:head>

abaixo como ficou o código para resolvendo o conflito do jquery com prime faces.
observer que não alterei nada na parte do prime faces somente no java script.

<h:head>
            <!-- a decraração desta primeira linha abaixo estava gerando conflito, mas ela não foi alterada e o código de jquery.min.js também não foi alterado-->
	<script type="text/javascript" src="superSized/js/eljquery1.6.1/jquery.min.js"></script>
	 
	<script type="text/javascript">

                $a = jQuery.noConflict(); //inseri esta linha para resolver o conflito
		$a(function($){ //alterei esta linha também no meu caso onde no único lugar que estava antes jQuery eu substitui por $a	
			$.supersized({
			
				slide_interval          :   3000,		// Length between transitions
				transition              :   3, 			// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
				transition_speed		:	700,		// Speed of transition
														   
				// Components							
				slide_links				:	'blank',	//Individual links for each slide (Options: false, 'num', 'name', 'blank')
				slides 					:  	[			// Slideshow Images
					 																																						 
													{image : 'superSized/imgBaner/b1.jpg', title : 'Image Credit: Maria1 Kazvan1', thumb : 'superSized/imgBaner/b1.jpg', url: 'principal.xhtml'},
													{image : 'superSized/imgBaner/b2.jpg', title : 'Image Credit: Maria2 Kazvan2', thumb : 'superSized/imgBaner/b2.jpg', url : 'computador2.xhtml'},  
													{image : 'superSized/imgBaner/b3.jpg', title : 'Image Credit: Maria3 Kazvan3', thumb : 'superSized/imgBaner/b3.jpg', url : 'http://www.primefaces.org'},
											]
				
			});
	    });
	   
	</script>
</h:head>

deixei a solução que encontrei para ajudar outras pessoas, que passem pelo mesmo problema. obrigado ai mais uma vez @javaflex pela ajuda

1 curtida