Personally I have a registration page of notes, it got a selectOneMenu vehicle. But I want to offer the user the ability to click a button to open a dialog where he registers a vehicle if you do not already in the registry. And this is set back in the notes page to close the dialog. I know it sounds very simple. But would an example of how I can do this.I use JSF, Primefaces, JEE7 Thank you
Here's the most important, the buttons:
In main page, surrounded by form mainForm:
<p:commandButton icon="ui-icon-plus"
value="New"
actionListener="#{bean.prepareCreate}"
update=":formInDialog"
oncomplete="PF('dialogWidgetVar').show()"/>
In bean.prepareCreate you create the new entity for binding into.
In dialog, which has its own form formInDialog inside it:
<p:commandButton actionListener="#{bean.create}"
value="Save"
update=":mainForm:listOfEntities, formInDialog, :growl"
oncomplete="if(args && !args.validationFailed {PF('dialogWidgetVar').hide()}" />
formInDialog and growl needs to be updated in case of errors.
Related
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'm working with JSF and PrimeFaces, and I can't handle the following situation:
I have a dialog, and I placed a dataTable on it. In one of the cells of the table I would like to display given data in 3 different ways, and I'd like to switch between them. So far I managed to switch between these rendering types via commandLink, but my problem is that when I click on one of the 3 links, the dialog closes! Can I update the content of the dialog, and be able to keep it open the same time? (I'm updating which render type to use via myMethod)
my commandLink looks like this:
<p:commandLink id="id" update=":myForm:myDialog" ajax="false"
action="#{myBean.myMethod}" oncomplete="dialog.show()">
If i don't use the ajax=false attribute, the method is not called, and I also tried imediate=true, but that's not it either.
You need to define an p:outputPanel inside your dialog and update the outputpanel, not the dialog itself (that's why your dialog closes):
<p:dialog id="myDialog" ...>
<p:outputPanel id="myOutputPanel">
... your dialog content goes here
</p>
</p:dialog>
and change your commandlink
<p:commandLink id="id" update=":myForm:myDialog:myOutputPanel" ajax="true"
action="#{myBean.myMethod}" oncomplete="dialog.show()">
Regarding the oncomplete="dialog.show()" - I'm not entirely sure if you need that. A precise answer can be given if you provide more code regarding your table and code.
I had the same problem, and solution is to update a form instead of dialog. For example:
<p:dialog id="id_dialog" ...>
<h:form id="id_form">
... content
</h>
</p:dialog>
and commandLink:
<p:commandLink update=":id_form" process="#all" ...>
This worked for me!
I have a single page application written in JSF - PrimeFaces.
There are a couple of dialogs that are displayed correctly at the begining.
But after clicking:
<p:menuitem value="Logout" update="#all" action="#{loginBean.logout}"/>
the dialogs don't open correctly.
Maybe is is possible for you to make an update elements list, for example like:
update=":a:b,:c,:d:e:f".
Many people complains when try to use "#all".
you can also use, its like to show dialog force fully
<p:dialog widgetVar="statusDialog" ....... />
and use onClick = "PF('statusDialog').show();"
I'm trying to generate dynamic chat windows within a PanelGroup. The structure is like this:
<h:panelGroup id="chats">
<p:dialog id="chatWindow1">
</p:dialog>
<p:dialog id="chatWindow2">
</p:dialog>
</h:panelGroup>
The problem is when I'm adding a new chat window, it's not showing. I think the newly created dialog is not updating [ by RequestContext's update method] since it's not existing yet in view. So, I've to update "chats" panel group in order to see the new dialog. But the problem in that is pre-existing dialogs in that panel group gets updated.
Consider a scenario: user types some text in chat window.Suddenly a new chat window pops up & all his chat text in that pre-existing dialog vanishes.
I just want to prevent that scenario. How can it be done?
I m trying to open a rich modal panel with populated data on a button click
tried
<h:commandButton id="btn_search" value="#{text['button.add']}"
action="#{cartBean.search}"
oncomplete="#{rich:component('dlg_results')}.show()">
</h:commandButton>
and
<h:commandButton id="btn_search" value="#{text['button.add']}"
action="#{cartBean.search}" immediate="true">
<rich:componentControl for="dlg_results" attachTo="btn_search" operation="show" event="onclick"/>
</h:commandButton>
This code opens the model panel on button click but when response is sent back from the server the whole page gets refreshed
can some one suggest a way to handle this ???
Use <a4j:commandButton> instead of h:commandButton.
Thanks, this was helpful information.
I used showWhenRendered tag in rich:modalpanel to solve my problem. I added a variable in my bean and set its value to true on click of button if records are found.