Al agregar jQuery a PrimeFaces, se obtiene UnEught TypeError en todo el lugar

jsf uncaught-typeerror

Question

Estoy usando PrimeFaces 3.5 y JSF 2.0. Quería usar un plugin jQuery, así que incluí jQuery en mi aplicación web.

<h:head>
    <h:outputScript name="js/jquery.min.js" />
    <h:outputScript name="js/jquery-ui.js" />
</h:head>

Sin embargo, cuando uso los componentes de PrimeFaces, recibo errores de tipo no detectados como este:

Unkeught TypeError: no se puede leer la propiedad ''length'' de undefined

Unkeught TypeError: Object [object Object] no tiene el método ''autocompletar''

Unkeught TypeError: no se puede leer la propiedad ''keyCode'' de undefined

Unkeught TypeError: this.jq.draggable no es una función

Unkeught TypeError: no se puede leer la propiedad ''LinearAxisRenderer'' de undefined

Unkeught TypeError: Object [object Object] no tiene el método ''fileupload''

Unkeught TypeError: this.jqEl.datetimepicker no es una función

Etc.

¿Cómo es esto causado y cómo puedo resolverlo?

Answer 1

PrimeFaces es una biblioteca de componentes JSF basada en jQuery. Ya se envía con jQuery y jQuery UI fuera de la caja. No es correcto cargar manualmente otra copia de la interfaz de usuario jQuery / jQuery por algún motivo. Múltiples archivos jQuery con versiones diferentes solo entrarían en conflicto entre sí de esta manera, ya que no necesariamente usan / comparten exactamente las mismas variables / funciones.

Deshágase de todos esos archivos jQuery / UI cargados manualmente. Esto no tiene sentido.

Si lo hiciste porque necesitas utilizar algo de magia de jQuery / UI en alguna página que no use necesariamente ningún componente de PrimeFaces (y por lo tanto su jQuery incluido no se incluirá automáticamente y, por lo tanto, $() no estaría disponible), entonces siempre puede incluir explícitamente de forma manual PrimeFaces-bundled jQuery en alguna plantilla maestra de la siguiente manera:

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

(el target="head" es innecesario si los especifica directamente dentro de <h:head> )

Si necesita suministrar su propia versión de jQuery, porque la que se incluye en PrimeFaces está desactualizada, entonces tiene 2 opciones:

• Deje que su aplicación web sea la suya exactamente en el mismo identificador de recursos (biblioteca / nombre) /resources/primefaces/jquery/jquery.js (¡no cambie la ruta ni el nombre de archivo!). Éste será elegido en lugar del primer paquete de PrimeFaces.

• Descomprima primefaces.jar , reemplace /META-INF/resources/primefaces/jquery/jquery.js archivo con la versión más nueva (¡no cambie la ruta ni el nombre de archivo!), Vuelva a empaquetar un nuevo primefaces.jar .

(y no se olvide de eliminar todas esas referencias <h:outputScript> a la propia copia)

Prueba sin embargo con todo rigor. Algunas funcionalidades específicas de PrimeFaces pueden romperse con la actualización debido a pequeños cambios / correcciones de errores en la nueva versión de jQuery en comparación con la versión de PrimeFaces.

Sobre todo, debe asegurarse de no proporcionar múltiples copias de jQuery / UI, o aún enfrentará conflictos / enfrentamientos como actualmente. El uso de $.noConflict() como algunas personas pueden sugerir no está diseñado para poder usar múltiples bibliotecas jQuery juntas. Está diseñado para poder usar jQuery junto con otra biblioteca JS que casualmente también usa $() como función global, como Prototype. Ver también a Jquery y prototype noconflict .