Twitter Bootstrap with Primefaces (JSF)
javascript, jsf-2, primefaces, twitter-bootstrap
Solution
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.
Problem
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.