Twitter Bootstrap with Primefaces (JSF)
Solution 1
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.
Solution 2
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
Solution 3
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.
Thor
Updated on July 09, 2022Comments
-
Thor almost 2 years
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.
-
Thor about 12 yearsThe dropdown still does not work. With deactivated
p:dataTable
it's also not working. (I've removed the manual<script src="/resources/js/jquery-1.7.2.js"></script>
, is this ok?). jQuery should be loaded from Primefaces library, since this is rendered:<script type="text/javascript" src="/erp/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces"
-
Thor about 12 yearsI can verify that JQuery is imported by Primefaces in the rendered output, but the DropDown menu does not work properly.
-
Daniel about 12 yearsyes , it is ok to remove the manually loaded jquery cause primefaces got 1.7.1 inside its jar...
-
Thor about 12 yearsOn step forward: Without
p:dataTable
and withouttarget="head"
in the Primefaces script, the dropdown menu is working correctly with Primefaces jQuery. Withtarget=head
in$ = jQuery;
its not working. Without thetarget=head
or without the complete script it's working. -
Thor about 12 yearsIt seems to be the ordering of
primefaces-jquery
andbootstrap.js
(withoutp:dataTable
): Ifprimefaces-jquery
is beforebootstrap.js
it's not working. And this is the case ifp:dataTable
is there! -
Thor about 12 yearsI've already tested this, the problem seems to be that primefaces-jquery is always before manual entries in
<h:head>
ifp:dataTable
is present. I think I will raise another question for this issue.