Bootstrap Twitter avec Primefaces (JSF)

Je suis en train d'utiliser Primefaces 3.2 (peut-être que c'est lié à la JSF en général) avec Twitter Bootstrap 2.0.2 (http://twitter.github.com/bootstrap).

J'ai ajouté à la starter-exemple (http://twitter.github.com/bootstrap/examples/starter-template.html) un menu déroulant avec les scripts suivants dans <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>

Cela fonctionne bien sur la page JSF, mais si j'ajoute un 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>

le menu déroulant ne fonctionne plus. Je suppose que c'est du JavaScript liées, mais vous ne savez pas où chercher pour ce bug.

source d'informationauteur Thor

  1. 8

    Tout d'abord de vous permettre de mieux utiliser h:outputScript pour charger les fichiers js...

    Je pense que la cause de conflits entre primefaces jquery et de la main inclus...

    PrimeFaces 3.2 est livré avec jQuery 1.7.1, Donc...

    Supprimer la

    <script src="/resources/js/jquery-1.7.2.js"></script> à partir de votre code

    et modifier votre inclure dans la manière suivante dans votre <h:head> élément

    <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"/>

    Aussi jeter un oeil à JQuery Conflits avec Primefaces? et liées ressources de la commande.

  2. 4

    il y a un moyen plus facile d'ajouter ce thème.

    Si vous utilisez un maven projet bases de ce faire:

    Ajouter la dépendance 

        <dependency>  
        <groupId>org.primefaces.themes</groupId>  
        <artifactId>all-themes</artifactId>  
        <version>1.0.9</version>  
    </dependency>

    Ou ajouter un thème spécifique dépendance

    Ajouter ceci dans votre web.xml

        <context-param>
      <param-name>primefaces.THEME</param-name>
      <param-value>bootstrap</param-value>
    </context-param>

    Si vous n'êtes pas à l'aide de Maven, télécharger le jar manuellement et l'ajouter à votre classpath:

    http://repository.primefaces.org/org/primefaces/themes/

    Références:

  3. 1

    Vous y compris JQuery deux fois (Primefaces importe automatiquement). Retirez votre manuel d'importation:

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

    et tout devrait fonctionner.