Щебетать Bootstrap с Primefaces (JSF)
Я пытаюсь использовать Primefaces 3.2 (возможно, это связано с JSF в целом) с Twitter Bootstrap 2.0.2 (http://twitter.github.com/bootstrap).
Я добавил в стартовый пример (http://twitter.github.com/bootstrap/examples/starter-template.html) выпадающее меню со следующими сценариями в <h:head>
:
<script src="/resources/js/bootstrap.js"></script>
<script src="/resources/js/jquery-1.7.2.js"></script>
<script src="/resources/js/bootstrap-dropdown.js"></script>
Это отлично работает на странице JSF, но если я добавлю простой p:dataTable
<p:dataTable var="i" value="#{testBean.list}">
<p:column>
<f:facet name="header"><h:outputText value="Item"/></f:facet>
<h:outputText value="#{i}"/>
</p:column>
</p:dataTable>
выпадающее меню больше не работает. Я полагаю, что это связано с JavaScript, но не уверен, где искать эту ошибку.
Ответы
Ответ 1
Прежде всего, вы можете использовать h:outputScript
для загрузки js файлов...
Я думаю, что это причина конфликтов между файлами jquery и включенным вручную...
PrimeFaces 3.2 поставляется с jQuery 1.7.1, So...
Удалите
<script src="/resources/js/jquery-1.7.2.js"></script>
из вашего кода
и измените свое включение следующим образом в элементе <h:head>
<f:facet name="first">
<h:outputScript library="js" name="bootstrap.js"/>
</f:facet>
<h:outputScript library="primefaces" name="jquery/jquery.js"/>
<h:outputScript library="js" name="bootstrap-dropdown.js"/>
Также рассмотрите Конфликты JQuery с помощью Primefaces? и связанные с этим упорядочение ресурсов.
Ответ 2
есть более простой способ добавить эту тему.
Если вы используете базовые базы maven, выполните следующие действия:
Добавить зависимость
<dependency>
<groupId>org.primefaces.themes</groupId>
<artifactId>all-themes</artifactId>
<version>1.0.9</version>
</dependency>
Или добавьте определенную зависимость темы
Добавьте это в свой web.xml
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>bootstrap</param-value>
</context-param>
Если вы не используете Maven, загрузите банку вручную и добавьте ее в свой путь к классам:
http://repository.primefaces.org/org/primefaces/themes/
Ссылки:
Ответ 3
Вы включаете JQuery дважды (Primefaces импортирует его автоматически). Удалите импорт вручную:
<script src="/erp/resources/js/jquery-1.7.2.js"></script>
и все должно работать.