Twitter Bootstrap with Primefaces (JSF)

Question

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.

Can you please also post the relevant rendered HTML code. – nfechner Apr 18 '12 at 08:03 — nfechner, Apr 18 '12 at 08:03
Rendered HTML code is here: http://pastebin.com/avpKPnai – Thor Apr 18 '12 at 08:10 — Thor, Apr 18 '12 at 08:10

score 8 · Accepted Answer · edited May 23 '17 at 10:32

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.

edited May 23 '17 at 10:32

Community

1
1

answered Apr 18 '12 at 08:14

Daniel

36,833
10
119
200

The dropdown still does not work. With deactivated `p:dataTable` it's also not working. (I've removed the manual ``, is this ok?). jQuery should be loaded from Primefaces library, since this is rendered: ` – Thor Apr 18 '12 at 08:22
yes , it is ok to remove the manually loaded jquery cause primefaces got 1.7.1 inside its jar... – Daniel Apr 18 '12 at 08:49
On step forward: Without `p:dataTable` and without `target="head"` in the Primefaces script, the dropdown menu is working correctly with Primefaces jQuery. With `target=head` in `$ = jQuery;` its not working. Without the `target=head` or without the complete script it's working. – Thor Apr 18 '12 at 09:20
It seems to be the ordering of `primefaces-jquery` and `bootstrap.js` (without `p:dataTable`): If `primefaces-jquery` is before `bootstrap.js` it's not working. And this is the case if `p:dataTable` is there! – Thor Apr 18 '12 at 09:24
I've already tested this, the problem seems to be that primefaces-jquery is always before manual entries in `` if `p:dataTable` is present. I think I will raise another question for this issue. – Thor Apr 18 '12 at 09:38

score 4 · Answer 2 · answered Mar 22 '13 at 15:19

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:

score 1 · Answer 3 · answered Apr 18 '12 at 08:21

1

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.

answered Apr 18 '12 at 08:21

nfechner

17,295
7
45
64

I can verify that JQuery is imported by Primefaces in the rendered output, but the DropDown menu does not work properly. – Thor Apr 18 '12 at 08:31

Twitter Bootstrap with Primefaces (JSF)

3 Answers3

Linked