Twitter Bootstrap With Primefaces (jsf)

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 (htt

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:facetname="first"><h:outputScriptlibrary="js"name="bootstrap.js"/></f:facet><h:outputScriptlibrary="primefaces"name="jquery/jquery.js"/><h:outputScriptlibrary="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:

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

and everything should work.