I see abnormal behavior of fileUpload component on IE9 (it wokrs well on Chrome & Mozilla). When p:fileUpload is put p:dialog, file chooser dialog is not opened unless user double clicked the button, this behaviour on IE<=9 only.
Very simple code sample:
FileUploader.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head></h:head>
<h:body>
<p:commandButton onclick="PF('dlg').show()" value="open"></p:commandButton>
<h:form enctype="multipart/form-data">
<p:dialog widgetVar="dlg">
<p:growl id="messages" showDetail="true" />
<p:fileUpload value="#{UtilityView.file}" mode="simple" skinSimple="true" />
</p:dialog>
</h:form>
</h:body>
</html>
I tried to change CSS as suggested in some posts and tried to fire click event programmatically when user clicked once but all of that didn't help!
Your suggestions are welcomed.
Primefaces version: 5.3
Related
I have below code to display an editor and toolbar, somehow toolbar is not displaying and I am just getting a big thin line (yellow highlighted in screenshot).
I used the toolbar code from here.
Could someone please help me point out the issue, I search and see that jquery could be issue but I am not loading any jquery or other library explicitly. Also, my editor is working fine but not toolbar.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<h1>Hello World PrimeFaces</h1>
<h:form>
<p:editor></p:editor>
<br></br>
<p:toolbar>
<f:facet name="left">
<p:commandButton type="button" title="Save" icon="ui-icon-disk" />
<p:commandButton type="button" title="Delete" icon="ui-icon-trash" />
<p:commandButton type="button" title="Print" icon="ui-icon-print" />
</f:facet>
</p:toolbar>
</h:form>
</h:body>
</html>
I cloned the PrimeFaces Test Project: https://github.com/primefaces/primefaces-test
Entered your exact code above into test.xhtml.
I then then ran the project with mvn clean jetty:run and navigated to http://localhost:8080/primefaces-test/test.xhtml
And here is my my screenshot.
Environment:
- PrimeFaces version: 5.0
I'm trying to include a p:carousel
in my application, but the p:dataTable appears as a blank in the p:tab view. The following is a simplified example. The facelets template page is:
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="./css/default.css"/>
<h:outputStylesheet name="./css/cssLayout.css"/>
<h:outputStylesheet name="./css/style.css"/>
<title>Test Template</title>
</h:head>
<h:body>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
</h:body>
The carousel JSF page:
<body>
<ui:composition template="./ClientNav.xhtml">
<ui:define name="content">
<h:form>
<p:carousel numVisible="1" autoPlayInterval="20000" effect="easeInStrong"
headerText="Contents" style="margin-bottom: 0" circular="true">
<p:tab>
<h1>Heading</h1>
<p>Text of the first tab view</p>
<p:graphicImage name="images/enterBlank.jpg" alt="sky" width="1000" height="252"/>
</p:tab>
<p:tab>
<p:dataTable value="#{topicbean.pubTopList}" var="top">
<p:column>
<p:commandLink value="#{top.topicname}" action="#{topicbean.searchGuestItems}"
ajax="false"/>
</p:column>
</p:dataTable>
</p:tab>
</p:carousel>
</h:form>
</ui:define>
</ui:composition>
</body>
If i replace p:dataTable with h:dataTable it renders perfectly. I also tested an ordinary JSF page (without templating) using the p dataTable and the same problem (no rendering) happened. Finally I tried to strip the carousel component to the bare minimum (in case any setting were causing css conflict):
<p:carousel numVisible="1">
tabs here
</p:carousel>
I'm not sure if this is a bug or I'm missing something in my code or how I'm using the carousel. Would appreciate any guidance. Thank you.
Today I discovered a new bug in P5. When I update the button which the overlay panel is referring to, it doesn't work anymore - The overlaypanel is not shown anymore.
As a workaround I do use PF('widgetVar').loadContents(); but this feels very uncomfortable.
In PF4 this did work without any workarounds.
Anyone got some solution?
My solution:
don't update single button that opens overlay, update both
also add dismissable="false" showCloseIcon="true"
in the case you are using overlay on a dialog: add appendTo="#(body)"
Example code:
<p:commandButton value="updateSection" update=":form:overlayPanelGroup" />
<h:panelGroup id="overlayPanelGroup">
<p:commandButton id="openOverlayBtn" process="#this" value="openOverlay"/>
<p:overlayPanel for="openOverlayBtn" showEffect="fade" hideEffect="fade" dismissable="false" showCloseIcon="true" appendTo="#(body)">
<h:outputText value="textSample"/>
</p:overlayPanel>
</h:panelGroup>
I don't know exactly what you are pointing at. What do you mean with updating the button?
For me the following code works fine with PrimeFaces 5.0:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:pm="http://primefaces.org/mobile">
<h:head>
</h:head>
<h:body>
<p:commandButton id="menuButton" value="Menu" icon="ui-icon-home"/>
<p:overlayPanel for="menuButton" widgetVar="menuPanel" at="left" showEffect="push">
<!-- overlayPanel content goes here -->
</p:overlayPanel>
</h:body>
</html>
Does this help you with your problem?
I'm unable to use ui:include in tabView. I'm trying to make dynamic tabs using included Facelet.
Here's my code:
<p:tabView id="panelGl" var="tabContent" value="#{mainPageBackingBean.tabs}" widgetVar="panelGlJs" style="height: 100%;" dynamic="true" >
<p:ajax event="tabClose" listener="#{mainPageController.onTabClose}" oncomplete="questionDialogWV.show()" update="#(this) :questionForm:questionFormPanel" />
<p:ajax event="tabChange" onstart="setActive()" update="#(this)" />
<p:tab title="#{tabContent.title}" titletip="#{tabContent.description}" closable="true">
<ui:include src="#{mainPageBackingBean.tabContents}" />
</p:tab>
</p:tabView>
And #{mainPageBackingBean.tabContents} runtime value is pointing at this Facelet:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:p="http://primefaces.org/ui">
<p:panel>
<h:form>
<p:commandButton id="testEmail" value="" process="#this" actionListener="#{communicationChannelsController.testEmailChannel()}"/>
</h:form>
</p:panel>
</ui:composition>
When I use the above ui:include outside of p:tabView it works normally (I am able to invoke communicationChannelsController.testEmailChannel() without a problem). Also when I copy the contents of above file inside p:tab everything works fine also.
Problem is that, when combined p:tab and ui:include do not work, this bean method is not called.
What is the best approach at creating dynamic tabs using some navigation bean like mainPageBackingBean in my example?
I'm having a issue with PrimeFaces 3.4 and Facelets
I created a Facelets template with the following:
<?xml version='1.0' encoding='UTF-8' ?>
<h:head>
<h:outputStylesheet library="css" name="styles.css"></h:outputStylesheet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="200px" collapsible="true">
<ui:include src="header.xhtml"></ui:include>
</p:layoutUnit>
<p:layoutUnit position="south" size="50px" collapsible="true">
Sul
</p:layoutUnit>
<p:layoutUnit id="contentView" position="center">
<ui:insert name="content"></ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
My index.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="./maintemplate.xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:define id="contentView" name="content">
<ui:include src="#{userController.currentPage}"></ui:include>
</ui:define>
</ui:composition>
So, the userController.currentPage contains at the beginning a login page that works with primeFaces componends.
When I click the menu that is available inside the header.xhtml I have the following:
<p:menuitem value="Tickets" actionListener="#{userController.setCurrentPage('tickets.xhtml')}" update=":contentView" ajax="false"></p:menuitem>
After clicking the center layout gets blank. I don't see any error or information that something is wrong.
I can render the page tickets.xhtml without any problem.
Any help is most appreciated.
I'm using Netbeans 7.3 RC1 - Apache Tomcat 7.0.34.0 / PrimaFaces 3.4 / JSF 2.1
EDIT: putting ajax="false" in the menu works, but it refreshed all page. Anyidea how I can make this work without having to refresh the full page, I would like to refresh just the center one.
finally managed to do it.
Found over here the following:
How to ajax-refresh dynamic include content by navigation menu? (JSF SPA)
based on the above answer I performed the following operations:
1.put the ajax tag and the menu inside it.
2. And this was also my mistake, change the ajax render from the <ui:layoutUnit> to <h:form>
3. removed all the h:form tags from the child xhtml as it is now included in the template file.
After this it works withoout any problem.