Twitter Bootstrap con Primefaces (JSF)

Estoy tratando de usar Primefaces 3.2 (quizás esté relacionado con JSF en general) con Twitter Bootstrap 2.0.2 (http://twitter.github.com/bootstrap).Twitter Bootstrap con Primefaces (JSF)

He añadido a la titular de ejemplo (http://twitter.github.com/bootstrap/examples/starter-template.html) un menú desplegable con las siguientes secuencias de comandos en <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>

Esto funciona bien en la página JSF, pero si añado 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>

el menú desplegable ya no funciona. Supongo que está relacionado con JavaScript, pero no estoy seguro de dónde buscar este error.

Fuente

2012-04-18 Thor

También puede publicar el código HTML procesado correspondiente. – nfechner

El código HTML procesado está aquí: http://pastebin.com/avpKPnai – Thor

En primer lugar es mejor utilizar h:outputScript para cargar los archivos js ...

Creo que es causa de conflictos entre PrimeFaces jQuery y la incluyó manualmente uno ...

PrimeFaces 3.2 viene con jQuery 1.7. 1, ... Así

Retire la

<script src="/resources/js/jquery-1.7.2.js"></script> a partir del código

y modi fy las necesidades de inclusión de la siguiente manera en su elemento <h:head>

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

también echar un vistazo a JQuery Conflicts with Primefaces?resource ordering y relacionados.

Fuente

2012-04-18 08:14:12 Daniel

El menú desplegable aún no funciona. Con 'p: dataTable' desactivado tampoco funciona. (He eliminado el manual '', ¿está bien?). jQuery debe cargarse desde la biblioteca Primefaces, ya que esto se representa: '

Usted está incluyendo JQuery dos veces (Primefaces lo importa automáticamente). Quite su importación manual:

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

y todo debería funcionar.

Fuente

2012-04-18 08:21:16 nfechner

Puedo verificar que JQuery sea importado por Primefaces en la salida representada, pero el menú DropDown no funciona correctamente. – Thor

hay una manera más fácil de agregar este tema.

Si está utilizando un experto bases del proyecto hacen esto:

Agregar dependencia

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

o añadir una dependencia tema

Añadir este en su web.xml

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

Si no está utilizando Maven, descarga el frasco manualmente y añadirlo a la ruta de clases:

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

Referencias:

Fuente

2013-03-22 15:19:44

Cuestiones relacionadas

Twitter Bootstrap con Primefaces (JSF)

Respuesta

Cuestiones relacionadas