I want to use (Primefaces with TwitterBootstrap). Currently the DropDown menu it's not working if e.g. a p:dataTable is present. I've figured out, that it's working (without any Primefaces ponents) if I have the following ordering in h:head:

<h:head>
  <h:outputScript library="js" name="bootstrap.js"/>
  <h:outputScript library="primefaces" name="jquery/jquery.js"/>
  ...
</h:head>

If I swap the ordering (first jquery.js, than bootstrap.js), the DropDown menu is broken. My problem is, that with the usage of PrimeFaces ponents in the rendered HTML output the scripts used by PrimeFaces (jquery.js and primefaces.js) are always before manual entries in h:head.

<script src="/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces"></script>
<script src="/javax.faces.resource/primefaces.js.jsf?ln=primefaces"></script>
<script src="/javax.faces.resource/bootstrap.js.jsf?ln=js"></script>

How can I import bootstrap.js before jquery.js?

I want to use (Primefaces with TwitterBootstrap). Currently the DropDown menu it's not working if e.g. a p:dataTable is present. I've figured out, that it's working (without any Primefaces ponents) if I have the following ordering in h:head:

<h:head>
  <h:outputScript library="js" name="bootstrap.js"/>
  <h:outputScript library="primefaces" name="jquery/jquery.js"/>
  ...
</h:head>

If I swap the ordering (first jquery.js, than bootstrap.js), the DropDown menu is broken. My problem is, that with the usage of PrimeFaces ponents in the rendered HTML output the scripts used by PrimeFaces (jquery.js and primefaces.js) are always before manual entries in h:head.

<script src="/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces"></script>
<script src="/javax.faces.resource/primefaces.js.jsf?ln=primefaces"></script>
<script src="/javax.faces.resource/bootstrap.js.jsf?ln=js"></script>

How can I import bootstrap.js before jquery.js?

• javascript
• jsf-2
• primefaces

1 Answer 1

If the problem is related to the include order of your resources, you should have a look at the following blog post of the PrimeFaces team: Customizable Resource Ordering.

You can define a first facet inside your h:head element. Elements placed there will be loaded before the PrimeFaces resources.

<h:head>
    <f:facet name="first">
        <h:outputScript library="js" name="bootstrap.js"/>
    </f:facet>
</h:head>