Question

174

Twitter Bootstrap with Primefaces (JSF)

rated 0 times [ 179] [ 5] / answers: 1 / hits: 25621 / 12 Years ago, wed, april 18, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dustin

Add To Favorites

Follow

Total Points: 599

Total Questions: 105

Total Answers: 106

Location: Belarus

Member since Tue, Mar 14, 2023

1 Year ago

dustin questions

1 'Routes' is not defined react/jsx-no-undef

Wed, Dec 1, 21, 00:00, 3 Years ago

1 event in Javascript is deprecated and I cannot use preventDefault()

Sun, Apr 18, 21, 00:00, 3 Years ago

1 playwright - issues with login form, inputs and submit click

Wed, Apr 14, 21, 00:00, 3 Years ago

1 How to mock fs.readFileSync with jest

Sun, Sep 20, 20, 00:00, 4 Years ago

1 How to download pdf from puppeteer using Nest js as Server Side and React in Client Side?

Wed, Jul 8, 20, 00:00, 4 Years ago

View All

answered 12 Years ago dominiqued · Accepted Answer

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.