I'm currently working on an application that uses JSF 2.2 together with Primefaces running on Wildfly 11.
Error Environment: Primefaces 6.2.5
Working environment: Primefaces 6.2.2
Expected Behavior:
Clicking a context menu item, should invoke a re rendering of the toolbar in the screen. This worked in previous versions.
Actual Behavior:
When I click on a menu item in our screen, it will initiate a re-rendering of the toolbar. Moreover, the context menu is used as a composite component in the screen. But, the context menu item generates following error.
javax.el.MethodNotFoundException: /xhtml/screen/toolbar.xhtml.
listener="#{cc.attrs.someClass.onPreRenderToolbar}": Method not found: class
customComponent.onPreRenderToolbar(javax.faces.event.ComponentSystemEvent)
The problem is that it initiates the onPreRenderToolbar method on the “someClass” rather than the toolbar itself (this did not happen for PF 6.2.2 and earlier).
XHTML:
<h:form id="form" rendered="#{not (param['toolbar'] eq 'false') }">
<p:menubar id="menuBar" model="#{cc.attrs.toolbar.model}">
<c:if test="#{not empty cc.attrs.toolbar}" >
<f:event type="preRenderComponent" listener="
{cc.attrs.toolbar.onPreRenderToolbar}"/>
</c:if>
</p:menubar>
</h:form>
The Context Menu is inside the "someClass" (which essentially is a form), while the toolbar is outside this component.
Someone have any input/suggestions on what could be changed between these two versions that could cause this issue?
Related
Primefaces 7.0, JSF 2.1.19
I am trying to replace richfaces 3.3.3 with primefaces 7.0 (and upgrade JSF to 2.1) and got a special behaviour from the fileUpload widget: When I first render the page it works without problems (no fileupload done, just render it), then I navigate again to the same page it is broken:
The fileupload component:
<p:fileUpload disabled="#{antragAttachments.fileUploadDisabled}" id="attachmentUpload" widgetVar="attachmentUpload" binding="#{antragAttachments.fileUpload}"
fileUploadListener="#{antragAttachments.fileUploadListener}" label="Durchsuchen..." uploadLabel="Datei anhängen" cancelLabel="Abbrechen" invalidFileMessage="test typ"
mode="advanced" fileLimit="1" sizeLimit="15728640" invalidSizeMessage="Der Dateianhang ist zu groß! Die maximale Größe beträgt 15MB!" previewWidth="1"
oncomplete="uploadComplete();" auto="true">
</p:fileUpload>
This is the (menu) component the navigate again to the xthtml:
<ui:repeat value="#{name}" var="item" >
<div id="menuOP" class="ebene#{item.shifting} #{item.selected ? 'divselected' : 'divnotselected'} #{item.spriteClass}">
<p:commandLink immediate="#{item.immediate}" value="#{item.label}" rendered="#{item.enabled}" action="#{item.navigate}"
styleClass="#{item.selected ? 'selected' : 'notselected'}" oncomplete="#{item.oncomplete}"/>
<h:outputText id="menuNoLinkText" rendered="#{!item.enabled}" styleClass="disabled" value="#{item.label}" />
</div>
</ui:repeat>
I tried to remove the immediate, set the type to "submit", use h:commandLink (without the oncomplete of course) just to see if I can get this running somehow. Does not work.
I also looked at the Primefaces fileupload introduction from balusC, but my problem is not the fileupload, it is the second rendering. There is also a Primefaces forum entry about something similar, but the trick von melloware did not work also.
What I do not understand, by the first click on the menu the rendering works fine and after every click on the menu-commandlink the browser console tells me that the widget is not available.
I found examples with similar problems, but there is most of the time a javascript call of the widget like PF('attachmentUpload').doSomething(), but this is not the case here.
EDIT:
I found out that when I first click on the commandlink the fileupload.js is loaded:
By the second click this is not the case anymore:
I also found a thread with the same problem: <p:layout> and <p:fileUpload> not working on page refresh, but there the only solution seems to be to take the css and js for fileupload and add it manualy to as resource... which is a little creepy...
Presentation
I am facing an issue to get an output panel load in deferred mode when the panel is included in a tab managed by Primefaces.
Here is a code sample:
<p:tabview value="#{b.tabs}" var="tab" dynamic="true" cache="false">
<p:tab title="#{tab.name}">
<p:outputpanel id="reportsDisplayId" >
<p:outputPanel id="reportsPanel" deferred="true" >
<h:outputText id="reports" escape="false" value="#{tab.report}" />
</p:outputPanel>
</p:outputpanel>
</p:tab>
</p:tabView>
"tab.report" is generated by Jasper. Generating this report takes time in most cases. This is the reason for using the deferred mode.
Tabs are managed using p:tabView in dynamic mode and no caching, so that tabs are refetched from the server at each tab change.
This works fine for the first tab: the display of the panel is effectively deferred without preventing the context from being displayed. Upon switching between tabs, the whole content of the tab is displayed only when the report is ready.
I have tried using deferredMode="visible", but this feature seems to intended for scroll visibility. I have tried enclosing the h:form into a p:outputPanel and updating the panel instead of the form.
Without success so far.
Working with p:RemoteCommand
I have progressed using p:RemoteCommand and found that others have been following that path, however with some difficulties. I will post my progress.
Here are related posts:
p:remote command not working in asynchronous mode
The bug reported here seems to have disappeared
JSF 2.1
Wildfly 8.2.1.Final
Primefaces 8.0.3
Omnifaces 2.7.7
Java 8
Here is a solution which relies on p:remoteCommand and not on the deferred attribute of output panel.
<h:form id="boardForm">
<p:tabview id="boardTabs" value="#{b.tabs}" var="tab" dynamic="true" cache="false">
<p:ajax event="tabChange" listener="#{board.onTabChange}"/>
<p:tab title="#{tab.name}">
<!-- First rendering: display a loading gif -->
<p:graphicImage value="/resources/img/loading.gif"
rendered="#{!board.loading}" alt="loading" />
<!-- Second rendering: display the report itself -->
<p:outputPanel id="reportsPanel" rendered="#{board.loading}" >
<h:outputText id="reports" escape="false" value="#{board.getJasper(tab)}"/>
</p:outputPanel>
<p:remoteCommand name="deferredLoader_#{board.tabIdx}" async="true" autoRun="true"
actionListener="#{board.setLoading(true)}" rendered="#{!board.loading}"
update=":boardForm:boardTabs:#{board.tabIdx}:jspReportDisplay" />
</p:tab>
</p:tabView>
</h:form>
The rendering goes in two phases:
A simple gif is displayed.
The whole report is displayed. However, the gif
is displayed as long as the report is not ready.
Detailed comments:
Upon tab switch, the event "tabChange" invokes the bean method "onTabChange", which sets "loading" to false and records the active tab index.
As "loading" is false, the gif is displayed, the report is not displayed, and the remote command is run.
The remote command is async so that it is possible to switch to another tab before the active tab is fully displayed.
The remote command sets back "loading" to false before updating the tab for the second phase, so that: (1) the gif is not displayed again; (2) the report is now generated; (3) the auto-run remoteCommand is not run infinitely many times.
the name of remoteCommand is indexed to the active tab to ensure unicity of names for each remoteCommand in various tabs.
Well, I guess there are more elegant solutions than this one. This is the one I found.
PrimeFaces: 7.0
JSF: 2.2.13
JBoss: 7.1
Java: 1.8
Chrome: 83.0.4103.116
I have a simple confirmation dialog to go to another page, there a reason for the action should be provided as a text.
It boils down to the following lines of code:
<p:dialog id="dlg" widgetVar="dlg" modal="true">
<h:form id="dlgForm">
<p:inputText id="reason" required="true" value="#{bean.reason}"/>
<p:message for="reason"/>
<p:commandButton id="proceed" value="Proceed" update="dlgForm" action="#{bean.action}"/>
<p:commandButton id="cancel" value="Cancel" resetValues="true" onclick="PF('dlg').hide()">
<p:ajax update="dlgForm" resetValues="true"/>
</p:commandButton>
</h:form>
</p:dialog>
And the bean:
#ManagedBean(name = "bean")
#SessionScoped
class Bean {
public String processGrundFuerExportDlg() {
PrimeFaces.current().executeScript("PF('dlg').hide()");
return "other_page";
}
}
My requirements:
Dialog opens with the empty 'reason'-inputText.
If 'cancel' is pressed: dialog should close
If 'proceed' is pressed:
If reason is not empty: close dialog and navigate to the 'other_page'
If return is empty: show the error message and don't close the dialog
My problem with this code: the line
PrimeFaces.current().executeScript("PF('dlg').hide()");
seems to be executed AFTER the current page being left resulting in 'dlg' not being found (JavaScript error).
The not properly closed dialog produces a nasty side effect: After returning to my first page later on, the dialog overlay stays active and inputText elements can't be activated with the mouse (TAB works). Overlay logic in the event loop blocks mouse clicks to from being passed to the components on the page.
My question:
How this standard scenario should be properly implemented with JSF and PrimeFaces?
If Upgrade to other versions is required, are there some workaround for removing stale overlays without upgrading?
Disclaimer: I studied many related questions on StackOverflow and tried all proposed solutions without success. For example this one: Keep p:dialog open when a validation error occurs after submit
You won't be having this problem if you would redirect to the new page instead of triggering an Ajax update.
You can simply add ?faces-redirect=true to your returned string, so:
return "other_page?faces-redirect=true";
Or, if you are using faces-config, add <redirect/> to the <navigation-case>.
Then you can remove the script from your bean where you try to close the dialog.
See also:
How to navigate in JSF? How to make URL reflect current page (and not previous one)
If 'proceed' is pressed:
If reason is not empty: close dialog and navigate to the 'other_page'
If return is empty: show the error message and don't close the dialog.
All this above is handled with required true on reason inputText. If reason is empty action in proceed commandButton won't start.
You don' need to close your dialog before you are navigating to other page.
I am working an primefaces application, I am using
Primefaces 5.x version, Jsf 2.x
which has tabview
in one of the tabs I have command button, by clicking on it pdf export should happen.
For the first time click on button page is getting reloaded, from the second time on words request is going to bean page and downloading is working correctly.
this is my code snippet for command button :
<h:form id="mainForm">
<p:tabView id="myId" activeIndex="#{bean.currentTabIndex}" dynamic="true" cache="false">
<p:tab title="vehicle" id="vehId" styleClass="panelBack">
<h:form id="exportForm">
// some code
<p:commandButton value="export" process="#this" actionListener="# {bean.export()}" ajax="false" id="exportButton" />
</h:form>
</h:form>
If I make dynamic = false, it's working. I mean after clicking export button request is going to bean class, export is working.
What would be the problem? Can somebody help me?
Thank you
Yes your problem is most likely nested that is not allowed in JSF.
I work with primefaces 3.4.1 and myfaces 2.1.9.
I need to show a component within a tab conditionally.
For the moment my code looks like that :
<p:tab id="tab" title="tabTitle">
<h:panelGroup id="tabContent">
<componentX:component id="component1" rendered="#{not condition}" />
<componentY:component id="component2" rendered="#{condition}" />
</h:panelGroup>
</p:tab>
I voluntarily changed the name of the components and arguments
My problem is with this solution component1 and component2 are both created. So the server will be working to generate the two components event if one is never shown.
My question is, is there a (clean) way to have this rendering result without creating both components?
I had the same results with c:if and c:choose, I am running out of ideas.
You can use c:if here without problems...