2011-03-28 62 views
33

He incluido JQuery1.5 en el encabezado de una página JSF. En esa página hay un montón de componentes Primefaces ya codificados. Después de haber incluido el Jquery.js en el encabezado de la página, algunos componentes de las principales como <p:commandButton> pierden su apariencia y <p:fileUpload> se ve como JSP normal <input type="file"> y pierde completamente su capacidad AJAX.JQuery Conflicts with Primefaces?

¿Hay alguna manera de usar JQuery de forma segura junto con las primaras (sin conflicto)?

+0

No veo por qué esta pregunta está marcada con _Esta pregunta se ha hecho antes_. La pregunta vinculada fue hecha 2 años después de esta pregunta. –

Respuesta

49

Tuve el mismo problema que el descrito en la pregunta. Es por eso que se me ocurrió la siguiente solución:

Incluya la biblioteca jQuery incorporada de las primaras (actualmente 1.4.1) ya que incluir una biblioteca propia de jQuery conduce a problemas de formato CSS. Agregar el atributo target="head" permite especificar la etiqueta en todas partes, p. Ej. cuando se utiliza templating que no siempre tienen acceso a la etiqueta <head>:

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" /> 

La biblioteca jQuery PrimeFaces se incluye por defecto en el modo de conflicto. Eso significa que no se puede usar el atajo $(). Para superar este problema incluye la siguiente línea en una etiqueta o <script><h:outputScript>:

<h:outputScript target="head"> 
    // Add the $() function 
    $ = jQuery; 
    // Now you can use it 
    $(document).ready(function() { 
     ... 
    }); 
</h:outputScript> 

Esa es la mejor solución que podría desenterrar hasta el momento, el uso de PrimeFaces 2.2.1.

+0

Muchas gracias :) – Selvin

+3

Además de la explicación anterior de Lars, Primefaces no incluye automáticamente jQuery en las páginas que no usan componentes Primefaces, incluso si el espacio de nombres Primefaces se definió en la etiqueta , por lo que puede usar el método explicado por Lars arriba o cambie uno de sus componentes para usar la implementación del componente Primefaces, digamos change to . –

3

jQuery tiene un modo 'noConflict' que le permite jugar bien al lado de otras bibliotecas. No he utilizado los componentes Primefaces, así que no estoy seguro, pero si incluye jQuery en modo no conflictivo, es probable que sus problemas desaparezcan.

6

Muchas bibliotecas de JavaScript usan $ como una función o nombre de variable, al igual que jQuery. En el caso de jQuery, $ es solo un alias para jQuery, por lo que toda la funcionalidad está disponible sin usar $. siguientes son algunos métodos:

  • Escribir jQuery.noConflict(); antes de la inicialización de jQuery, véase más adelante

    jQuery.noConflict(); 
    $(document).ready(function(){ 
        // your jQuery code 
    }); 
    
  • Crear un alias diferente en lugar de jQuery para usar en el resto de la secuencia de comandos.

    var j = jQuery.noConflict(); 
    // Do something with jQuery 
    j("div p").hide(); 
    
  • Cambio toda instancia de $: Sustituir $ con jQuery en el bloque de código jQuery

    jQuery(document).ready(function){ 
         jQuery("div p").hide(); 
    }) 
    
  • Completamente mover jQuery para un nuevo espacio de nombres en otro objeto.

    var dom = {}; 
    dom.query = jQuery.noConflict(true); 
    // Do something with the new jQuery 
    dom.query("div p").hide(); 
    
  • alcance Conjunto de $ a local en lugar de mundial

    // Method 1 
        jQuery(document).ready(function($){ 
         $("div").hide(); 
        }); 
    
    
        // Method 2 
        (function($) { 
         /* some code that uses $ */ 
        })(jQuery); 
    

    Nota: este punto viene con un inconveniente, que no tendrá acceso a su otra biblioteca $() método.

Original Reference

43

Por qué no utilizar los paquetes de jQuery con PrimeFaces?

<h:outputScript library="primefaces" name="jquery/jquery.js" /> 

PrimeFaces 2.2.1 tiene jQuery 1.4.4 y 3.0 (en desarrollo) tiene 1.5.1.

+4

Como nota al margen, el jquery de 2.2.1 no tiene ningún conflicto habilitado por defecto y el 3.0 no tiene ningún conflicto. –

3

Mi experiencia:

que tenían el mismo problema y nunca tiene que trabajar con las dos librerías jQuery. (Yo uso jQuery en lugar de $ pero nunca intenté jQuery.noConflict()).

Mi solución consistió en utilizar solo la lib incluida con las materias primas como se describe en la respuesta Cagatays.

+0

Lo mismo vale para mí. Solo puedo usar jQuery incorporado en las caras principales; cuando uso mi propia jQuery lib, los estilos CSS estarán dañados. Eso significa que puedo usar solo la función jQuery() en lugar de $(). –

6

Mi solución es añadir este código en la página por defecto:

<script type="text/javascript">var $j = jQuery.noConflict(true);</script> 

Después de eso yo uso jQuery con:

$j 

Gracias,

1

para resolver el conflicto entre Primefaces y jQuery evitar para importar cualquier archivo jQuery externo, para resolver el problema, importe los archivos jQuery ubicados en el contenedor de primas

<h:outputScript library="primefaces" name="jquery/jquery.js" target="head" /> 
     <h:outputScript library="primefaces" name="jquery/jquery-plugins.js" target="head" /> 

y en su código jQuery reemplazar el $ con jQuery.

+0

¿Por qué no mejorar la respuesta 39 upvoted en lugar de crear una casi idéntica? – Kukeltje