I have a jsf page that loads an image dynamically. The image generation may take a few seconds, so I would like to display a message or a gif so the user knows something is loading (at the moment there is just an empty space during loading).
I have tried to use primeface's deferred loading, but it made no difference at all.
I have a ajaxStatus in my page, but it is not activated during loading.
Here is the code containing the graphicImage:
<p:outputPanel deferred="true">
<h:graphicImage
value="/wfDiagram?processId=#{workflowAction.processId}"/>
</p:outputPanel>
the value is pointing to a servlet that handles image generation.
You should try the primefaces p:blockUI component.
Here is some example:
<p:blockUI widgetVar="loading" trigger="btnFilterProgram" block=":layout">
<h:panelGrid styleClass="custom-painelgrid-center">
<h:outputText value="Loading" />
<p:graphicImage value="resources/img/loading.gif" />
</h:panelGrid>
</p:blockUI>
In this case, a kind of "popup dialog" opens when the user clicks the button with the id btnFilterProgram and the component closes itself after the AJAX request is finished.
Related
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.
I have a JSF page. The framework is PrimeFaces.
The layers build up like topbar, sidebar, main-layout.
The sidebar and top bar contain a menu. Both menus are in a <form>:
<p:commandLink action="#{bean.modify}" ajax="false">
<span>Modify</span>
</p:commandLink>
The main layout also contains buttons form in another form tThe button contains a confirmDialog):
<p:commandLink id="close" action="#{bean.close}" ajax="false" update="form">
<span>Close</span>
<p:confirm header="Lezárás" message="Are you sure close it?" icon="ui-icon-alert"/>
</p:commandLink>
If I use ajax=true, just by clicking on the button in the main layout, confirmDialog does not appear.
If I use ajax = false, confirmationDialog will appear, but the page will break down for a short time. First, the page will be displayed without css formatting, and later the css will be validated.
Why can this be? What's the difference between the seven calls? In one case, why does this render the rendering in the other case why the confirmDialogs do not come up?
Update:
I've read the link, but I still do not understand why it works.
I may have written the problem incorrectly.
There is a JSF page: list.xhtml. It is a commandLink
<p:commandLink action="#{bean.modify}" ajax="false">
<span>Modify</span>
</p:commandLink>
The backing bean:
public String modify(){
return "edit.xhtml";
}
The edit.xhtml has the button with confirmDialog:
<p:commandLink id="close" action="#{bean.close}" ajax="false" update="form">
<span>Close</span>
<p:confirm header="Lezárás" message="Are you sure close it?" icon="ui-icon-alert"/>
</p:commandLink>
If I call edit.html with list.xhtm with ajax = true then confirmDialog works but the page is rendering slowly.
If I call ajax = false then rendering is fast but confirmationDialog does not work.
I do not understand because it is another page, so not just part of it is updated but the entire page
Solved
There was a bug in PrimeFaces.
https://github.com/primefaces/primefaces/commit/9f86efba16ead70f9db1194744d291a7f64acefb
I've corrected the bug in source code version 6.2 and has been working well since then.
Question: How can I prevent the execution of a while the website is rendering?
Thats where my Button sits:
<p:dialog widgetVar="newComment" height="200" width="500">
<h:form>
<h:panelGrid>
<h:outputText value="#{commentDialog.username}" />
<h:inputTextarea id="in_text" value="#{commentDialog.text}" />
<p:message for="in_text" />
</h:panelGrid>
<p:commandButton validateClient="true" value="Abschicken" ajax="true"
actionListener="#{popupRequestView.update}" action="PF('newComment').hide();update_popup();" />
</h:form>
</p:dialog>
The action attribute is intented to execute a backing bean action method on click, not to print some JavaScript code (which of course get executed immediately
You perhaps meant to use onclick or oncomplete instead. Like as in basic HTML, those on* attributes are intented to execute some JavaScript code during the specified HTML event ("click", "complete", etc).
oncomplete="PF('newComment').hide();update_popup();"
Another cause not visible in the information provided so far is that you forgot to register the p: XML namespace. Any <p:xxx> tags would then be printed as if it's plain text. Verify if a parent element somewhere in the markup has this:
xmlns:p="http://primefaces.org/ui"
Regardless, taking a JSF pause and learning some basic HTML/JavaScript wouldn't be a bad idea. After all, JSF is "just" a HTML/CSS/JS code generator.
you must use primefaces ajaxStatus to prevent click on button while rendering and execute ajax
ajaxStatus in primefaces showcase
<h:commandButton value="A" action="#{juegoService.ingresarPalabra('A')}">
</h:commandButton>
I'm using JSF 2.0, and I have a button like the above,
for each letter of the alphabet that call a method that load an image on the page, depending the word you press will load the corresponding image, but I need to call the method without reloading the page because I can only have loaded one image on the page, because when I click other the page reloads the Bean and the other image returns to the first state thats its not charged.
You should use f:ajax and refresh container with image.
<h:commandButton value="A with AJAX" id="button" action="#{juegoService.ingresarPalabra('A')}" >
<f:ajax execute="#this" render="containerId" />
</h:commandButton>
I have a dialog on one of my pages. It opens fine. It works fine if you use the button on the page, it closes. However, if you try and "x" out of the dialog it will not close. I believe it is related to the fact that I have an input field on the dialog, but I am not sure. I apologize if this is a dupe, I could not find a similar post.
<p:commandButton action="#{phoneListBean.debugger}"
value="Merge Unqiue" onclick="mdlg.show();"
update=":pmsg, :createNewPanel, :listform" />
<p:dialog id="mdialog" header="Merge Unqiue" widgetVar="mdlg"
appendToBody="true">
<h:form id="mform">
<h:panelGrid columns="2" cellpadding="5" id="m">
<h:outputLabel for="listName" value="Enter the List Name:" />
<p:inputText value="#{phoneListBean.mergeList.name}" id="listName" />
<p:commandButton action="#{phoneListBean.mergeUnique}"
value="Merge Unqiue" update=":pmsg, :listform"
onclick="mdlg.hide();" />
</h:panelGrid>
</h:form>
</p:dialog>
Thanks in advance for the help.
Your problem is that you don't want to use the onclick attribute with Primefaces buttons for displaying and hiding the dialogs. The click event may not get invoked before the postback because these buttons are not Ajax enabled.
Instead you should use oncomplete attribute. This will notify the Javascript event to execute only after the server postback has occurred, meaning that show() will display already updated dialog contents, and hide() will occur only after the server side execution has finished.