jQuery Entra en conflicto con Primefaces? [duplicar]

Esta pregunta ya tiene una respuesta aquí:

He incluido JQuery1.5 en el encabezado de una página de 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 primefaces al igual que <p:commandButton> pierde su piel y <p:fileUpload> se ve como JSP normal <input type="file"> y perder su capacidad AJAX por completo.

¿Hay alguna forma de usar jQuery de forma segura junto con primefaces(sin conflicto)?

Author: xpda, 2011-03-28
Source

7 answers

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

Incluir la biblioteca jQuery integrada en primefaces (actualmente 1.4.1) ya que incluir una biblioteca jQuery propia conduce a problemas de formato CSS. Agregar el atributo target="head" permite especificar la etiqueta en todas partes; por ejemplo, al usar plantillas no siempre tiene acceso a la etiqueta <head>: 

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

La biblioteca primefaces jQuery está incluida por defecto en modo de conflicto. Eso significa el atajo $() no se puede usar. Para superar este problema, incluya la siguiente línea en una etiqueta <script> o <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 he podido encontrar hasta ahora, usando primefaces 2.2.1.

 50
Author: Lars Blumberg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-12 13:20:47

¿Por qué no usar 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.

 43
Author: Cagatay Civici,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-24 23:01:57

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

  • Escriba jQuery.noConflict(); antes de la inicialización de jQuery,consulte a continuación 

    jQuery.noConflict();
$(document).ready(function(){
   // your jQuery code   
});

  • Cree un alias diferente en lugar de jQuery para usar en el resto del script. 

     var j = jQuery.noConflict();
 // Do something with jQuery
 j("div p").hide();

  • Cambiar toda instancia de $ : Reemplazar $ con jQuery en el bloque de código jQuery 

     jQuery(document).ready(function){
       jQuery("div p").hide();
 })

  • Mueva completamente jQuery a 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();

  • Establecer el alcance de $ a local en lugar de global

        // Method 1
    jQuery(document).ready(function($){
         $("div").hide();
    });


    // Method 2
    (function($) {
      /* some code that uses $ */ 
    })(jQuery);

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

Original Reference

 6
Author: diEcho,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-11 08:37:18

Mi solución es agregar este código en la página predeterminada: 

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

Después de eso uso jquery con: 

$j

Gracias,

 6
Author: Marin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-12 14:29:18

JQuery tiene un modo 'noConflict' que le permite jugar muy bien junto con otras bibliotecas. No he usado componentes Primefaces, así que no lo sé con seguridad, pero si incluye jQuery en modo noconflict, sus problemas probablemente desaparecerán.

 3
Author: MightyE,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-28 09:57:32

Mi experiencia:

Tuve el mismo problema y nunca lo conseguí trabajando con ambas libs de jquery. (Uso jQuery en lugar de $ pero nunca probé jQuery.noConflict()).

Mi solución fue usar solo la lib incluida con primefaces como se describe en la respuesta de Cagatays.

 3
Author: Matt Handy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-28 10:10:39

Para resolver el conflicto entre Primefaces y jQuery evite importar cualquier archivo jQuery externo, por lo que para resolver el problema importe los archivos jQuery ubicados en el jar de primefaces 

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

Y en tu código jQuery reemplaza $ por jQuery.

 1
Author: Hamza Toussi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-04 17:02:43