javascript - 带有 Primefaces (JSF) 的 Twitter Bootstrap

Question

我正在尝试将 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 相关，但不确定在哪里搜索此错误。

Answer 1

首先你最好使用h:outputScript加载 js 文件...

我认为这是 primefaces jquery 和手动包含的 jquery 之间冲突的原因...

PrimeFaces 3.2 附带 jQuery 1.7.1，所以...

删除

<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 Conflicts with Primefaces?及相关resource ordering .