Щебетать 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>

и все должно работать.