Добавление jQuery к PrimeFaces приводит к Uncaught TypeErrors

Я использую PrimeFaces 3.5 и JSF 2.0. Я хотел использовать плагин jQuery, поэтому я включил jQuery в свой webapp.

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

Однако при использовании компонентов PrimeFaces я получаю ошибки типа uncaught типа:

Uncaught TypeError: Невозможно прочитать свойство 'length' из undefined

Uncaught TypeError: Object [object Object] не имеет метода autocomplete

Uncaught TypeError: Не удается прочитать свойство 'keyCode' undefined

Uncaught TypeError: this.jq.draggable не является функцией

Uncaught TypeError: невозможно прочитать свойство "LinearAxisRenderer" из undefined

Uncaught TypeError: Object [object Object] не имеет метода 'fileupload'

Uncaught TypeError: this.jqEl.datetimepicker не является функцией

Etc.

Как это вызвано и как я могу его решить?

Ответы

Ответ 1

PrimeFaces - это библиотека компонентов JSF, основанная на jQuery. Он уже поставляется с jQuery и jQuery UI из коробки. Неправильно вручную загрузить другую копию пользовательского интерфейса jQuery/jQuery по какой-либо причине. Несколько разных версий jQuery файлов только конфликтуют друг с другом таким образом, потому что они не обязательно используют/совместно используют одни и те же переменные/функции.

Избавьтесь от всех загруженных вручную файлов jQuery/UI. Это не имеет смысла.

Если вы это сделали, потому что вам нужно использовать некоторую магию jQuery/UI на какой-либо странице, которая не обязательно использует какие-либо компоненты PrimeFaces (и, следовательно, ее связанный jQuery не будет автоматически включен и, следовательно, $() будет недоступен), тогда вы всегда можете вручную явно включить пакет jQuery, связанный с PrimeFaces, в каком-то главном шаблоне, как показано ниже:

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

(target="head" не требуется, если вы укажете их непосредственно внутри <h:head>)

Если вам абсолютно необходимо предоставить свою собственную версию jQuery, потому что тот, который поставляется в PrimeFaces, устарел, у вас есть 2 варианта:

  • Пусть ваш webapp будет поставляться самостоятельно на точно таком же идентификаторе ресурса (library/name) /resources/primefaces/jquery/jquery.js (не изменяйте путь и имя файла!). Затем этот файл будет выбран вместо пакета, входящего в состав PrimeFaces.

  • Распакуйте primefaces.jar, замените файл /META-INF/resources/primefaces/jquery/jquery.js на новую версию (не изменяйте путь и имя файла!), переупакуйте новый primefaces.jar.

(и не забудьте удалить все те <h:outputScript> ссылки на собственную копию)

Протестируйте, однако, толерантно. Некоторые функции, специфичные для PrimeFaces, могут сломаться с обновлением из-за незначительных изменений/исправлений в новой версии jQuery по сравнению с пакетом PrimeFaces.

Прежде всего, вы должны быть абсолютно уверены, что вы не предоставляете несколько копий jQuery/UI, или вы по-прежнему сталкиваетесь с конфликтами/столкновениями, как в настоящее время. Использование $.noConflict(), как могут предложить некоторые люди, абсолютно не имеет намерения использовать несколько библиотек jQuery. Он намерен использовать jQuery вместе с другой JS-библиотекой, которая по совпадению также использует $() как глобальную функцию, такую ​​как Prototype. См. Также a.o. JQuery и прототип noconflict.