javascript - Twitter Bootstrap with Primefaces (JSF) - Stack Overflow

admin管理员组

文章数量:1203220

I'm trying to use Primefaces 3.2 (perhaps it's related to JSF in general) with Twitter Bootstrap 2.0.2 ().

I've added to the starter-example (.html) a drop down menu with the following scripts in <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>

This works fine on the JSF page, but if I add a simple 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>

the dropdown menu is not working anymore. I suppose it's JavaScript related, but not sure where to search for this bug.

I'm trying to use Primefaces 3.2 (perhaps it's related to JSF in general) with Twitter Bootstrap 2.0.2 (http://twitter.github.com/bootstrap).

I've added to the starter-example (http://twitter.github.com/bootstrap/examples/starter-template.html) a drop down menu with the following scripts in <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>

This works fine on the JSF page, but if I add a simple 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>

the dropdown menu is not working anymore. I suppose it's JavaScript related, but not sure where to search for this bug.

• javascript
• jsf-2
• primefaces
• twitter-bootstrap

Share Improve this question Follow asked Apr 18, 2012 at 8:02 ThorThor 6,6561313 gold badges6363 silver badges9696 bronze badges 2

• Can you please also post the relevant rendered HTML code. – nfechner Commented Apr 18, 2012 at 8:03
• Rendered HTML code is here: pastebin.com/avpKPnai – Thor Commented Apr 18, 2012 at 8:10

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 8

First of all you better use h:outputScript to load js files...

I think its cause of conflicts between primefaces jquery and the manually included one...

PrimeFaces 3.2 comes with jQuery 1.7.1, So...

Remove the

<script src="/resources/js/jquery-1.7.2.js"></script> from your code

and modify your include in the following way in your <h:head> element

<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"/>

Also take a look at JQuery Conflicts with Primefaces? and related resource ordering.

there is an easier way to add this theme.

If you are using a maven project bases do this:

Add dependency

    <dependency>  
        <groupId>org.primefaces.themes</groupId>  
        <artifactId>all-themes</artifactId>  
        <version>1.0.9</version>  
    </dependency>

Or add a specific theme dependency

Add this in your web.xml

    <context-param>
      <param-name>primefaces.THEME</param-name>
      <param-value>bootstrap</param-value>
    </context-param>

If you are not using Maven, download the jar manually and add It to your classpath:

http://repository.primefaces.org/org/primefaces/themes/

References:

• http://www.primefaces.org/showcase-labs/ui/home.jsf?theme=bootstrap
• http://blog.primefaces.org/?p=2139
• http://primefaces.org/themes.html

You are including JQuery twice (Primefaces imports it automatically). Remove your manual import:

<script src="/erp/resources/js/jquery-1.7.2.js"></script>

and everything should work.

本文标签： javascriptTwitter Bootstrap with Primefaces (JSF)Stack Overflow