jsf-2 primefaces jquery-1.5

jsf 2 - JQuery Conflictos con Primefaces?



jsf-2 jquery-1.5 (7)

¿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.

Esta pregunta ya tiene una respuesta aquí:

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 <p:commandButton> como <p:commandButton> pierden su <p:commandButton> y <p:fileUpload> se ve como JSP normal <input type="file"> y pierde su AJAX capacidad por completo.

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

Mi experiencia:

Tuve el mismo problema y nunca lo hice funcionar con ambas bibliotecas jquery. (Uso jQuery lugar de $ pero nunca he probado jQuery.noConflict() ).

Mi solución fue usar solo la lib empaquetada con las caras principales como se describe en la respuesta de Cagatays.

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,

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 $ . Los siguientes son algunos métodos:

  • Escribir jQuery.noConflict(); antes de la inicialización de jQuery, ver 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();

  • Cambia todas las instancias 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 nombre 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 $ en 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 al método $ () de su otra biblioteca.

Original Reference

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

Incluya la biblioteca jQuery incorporada en las primaras (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 se tiene acceso a la etiqueta <head> :

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

La biblioteca de jQuery de Primefaces está incluida por defecto en el modo de conflicto. Eso significa que el acceso directo $() no puede utilizarse. Para solucionar 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 pude extraer hasta ahora, usando Primefaces 2.2.1.

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.

para resolver el conflicto entre Primefaces y jQuery, evite importar cualquier archivo jQuery externo, por lo tanto, para resolver el problema, importe los archivos jQuery ubicados en el archivo de caras principales

<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 $ con jQuery.