I have a problem with open and close a primefaces dialog on error in a prerenderview event listener. I use the event listener to load data from a third-party system, which under some circumstances needs special authentication.
So far when the special authentication is required i set a property on a request scoped bean and use the visible property of the dialog to decide if the dialog should be visible or not.
<p:dialog widgetVar="#{name}" resizable="false" modal="true"
closable="false" id="#{name}Dialog" width="375"
useWindow="true"
visible="#{specialAuthenticationBean.authenticationRequired}">
Hint: #{name} is an include parameter.
Is this the recommended way to do it?
If yes how can i close the dialog when the cancel or ok button was clicked?
So far for the cancel button i tried this with the following code but without success.
<p:commandButton id="cancel" value="#{messages['cancel']}" onclick="#{name}.hide()" type="button" />
Any ideas?
UPDATE: I tried out different things and found the cause. The dialog did not close because there were three includes for the same dialog with different parameters, but the visible-condition was true for all three dialogs.
And now i ask myself if it is really necessary to have three instances of the same dialog, only because the login buttons execute different actions (bean methods). What i really want to do is after one bean method invocation leads to open the authentication dialog, execute the same bean method again after submit the correct authentication data in the authentication dialog.
Related
I have a PrimeFaces <p:dialog>. The dialog has an input field and a command button. The command button posts the form without ajax (e.g. to upload a file via simple mode). If there is a validation error on the input field then the <p:message> in the dialog shows the error correctly, however the dialog closes because of the non-ajax postback. Because I am not using ajax, I can't really use the oncomplete trick to keep the dialog open as answered in Keep p:dialog open when a validation error occurs after submit.
What are my options to keep the dialog open (or reopen) after non-ajax submit if there was a validation error?
Make use of the dialog component's visible attribute. If this is set to true during render, then the page will render with the dialog opened.
E.g. if there's a postback and validation has failed:
<p:dialog ... visible="#{facesContext.postback and facesContext.validationFailed}">
Or if there are more forms in the same page and you'd like to check only if dialog's own form is been submitted:
<p:dialog ... visible="#{dialogForm.submitted and facesContext.validationFailed}">
<h:form binding="#{dialogForm}">
Note: the #{facesContext.validationFailed} works by default of course only if you make use of JSF builtin validation facilities (required="true", <f:validateXxx>, etc) and/or use fullworthy Validator implementations. It you're for example manually validating in action method and manually adding faces messages, then this will not work, unless you implicitly call FacesContext#validationFailed() yourself.
See also:
Difference between rendered and visible attributes of <p:dialog>
I have
<p:inputText id="sales-person">
<p:ajax event="change"
update="employee_name" listener="#{quoteBean.rebuildServiceDataList}"/>
</p:inputText>
... and
<p:commandButton id="confirm-button" process="#{breadcrumb.breadcrumb_base_name}" value="#{shop_msgs['continue.label']}" actionListener="#{quoteBean.showPayUI}" />
Skipped some part of code for understanding.
Basically when I change something on the input text it will call some ajax method to fetch some data, validate etc. And when I click on command button it will submit.
In Chrome browser if I type something and directly click on submit button, it is actually first firing onchange event, this calls the ajax then action listener for command button will execute.
But in case of IE if I do the above mentioned step, it will only execute the onchanage and calls the ajax method. The actionListner will not be invoked.
Can anybody please help me with this?
Edit 1: I tried even with onclick in command button, even that is not called in case of IE. When I try to click on button only the onchange event of text box is executed.
Thanks in advance.
Use the developer tools of IE browser by pressing F12.
Are there any error messages in console? What happens with the ajax call?
My first thought, I doubt that there is a lack in your Bean or similar, because basically it works.
From my experience (in connection with datatables), IE has indeed more troubles dealing with java script than Firefox or Chrome for example.
I am trying to execute a JSF2 bean method and show a dialog box after completion of the method on click of PrimeFaces <p:commandButton>.
<p:commandButton id="viewButton" value="View"
actionlistener="#{userBean.setResultsForSelectedRow}" ajax="false"
update=":selectedRowValues"
oncomplete="PF('selectedRowValuesDlg').show()">
</p:commandButton>
<p:dialog id="selectedRowValues" widgetVar="selectedRowValuesDlg" dynamic="true">
<h:outputText value="#{userBean.selectedGroupName}" />
</p:dialog>
When I click on the command button, the bean action listener method setResultsForSelectedRow executes properly, but it does not show the dialog box when the method completes. If I remove actionlistener, it shows the dialog box. I do not know what is going wrong.
What is the execution order of events? Is it possible to execute actionlistener and oncomplete simultaneously?
It failed because you used ajax="false". This fires a full synchronous request which in turn causes a full page reload, causing the oncomplete to be never fired (note that all other ajax-related attributes like process, onstart, onsuccess, onerror and update are also never fired).
That it worked when you removed actionListener is also impossible. It should have failed the same way. Perhaps you also removed ajax="false" along it without actually understanding what you were doing. Removing ajax="false" should indeed achieve the desired requirement.
Also is it possible to execute actionlistener and oncomplete simultaneously?
No. The script can only be fired before or after the action listener. You can use onclick to fire the script at the moment of the click. You can use onstart to fire the script at the moment the ajax request is about to be sent. But they will never exactly simultaneously be fired. The sequence is as follows:
User clicks button in client
onclick JavaScript code is executed
JavaScript prepares ajax request based on process and current HTML DOM tree
onstart JavaScript code is executed
JavaScript sends ajax request from client to server
JSF retrieves ajax request
JSF processes the request lifecycle on JSF component tree based on process
actionListener JSF backing bean method is executed
action JSF backing bean method is executed
JSF prepares ajax response based on update and current JSF component tree
JSF sends ajax response from server to client
JavaScript retrieves ajax response
if HTTP response status is 200, onsuccess JavaScript code is executed
else if HTTP response status is 500, onerror JavaScript code is executed
JavaScript performs update based on ajax response and current HTML DOM tree
oncomplete JavaScript code is executed
Note that the update is performed after actionListener, so if you were using onclick or onstart to show the dialog, then it may still show old content instead of updated content, which is poor for user experience. You'd then better use oncomplete instead to show the dialog. Also note that you'd better use action instead of actionListener when you intend to execute a business action.
See also:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
Differences between action and actionListener
I just love getting information like BalusC gives here - and he is kind enough to help SO many people with such GOOD information that I regard his words as gospel, but I was not able to use that order of events to solve this same kind of timing issue in my project. Since BalusC put a great general reference here that I even bookmarked, I thought I would donate my solution for some advanced timing issues in the same place since it does solve the original poster's timing issues as well. I hope this code helps someone:
<p:pickList id="formPickList"
value="#{mediaDetail.availableMedia}"
converter="MediaPicklistConverter"
widgetVar="formsPicklistWidget"
var="mediaFiles"
itemLabel="#{mediaFiles.mediaTitle}"
itemValue="#{mediaFiles}" >
<f:facet name="sourceCaption">Available Media</f:facet>
<f:facet name="targetCaption">Chosen Media</f:facet>
</p:pickList>
<p:commandButton id="viewStream_btn"
value="Stream chosen media"
icon="fa fa-download"
ajax="true"
action="#{mediaDetail.prepareStreams}"
update=":streamDialogPanel"
oncomplete="PF('streamingDialog').show()"
styleClass="ui-priority-primary"
style="margin-top:5px" >
<p:ajax process="formPickList" />
</p:commandButton>
The dialog is at the top of the XHTML outside this form and it has a form of its own embedded in the dialog along with a datatable which holds additional commands for streaming the media that all needed to be primed and ready to go when the dialog is presented. You can use this same technique to do things like download customized documents that need to be prepared before they are streamed to the user's computer via fileDownload buttons in the dialog box as well.
As I said, this is a more complicated example, but it hits all the high points of your problem and mine. When the command button is clicked, the result is to first insure the backing bean is updated with the results of the pickList, then tell the backing bean to prepare streams for the user based on their selections in the pick list, then update the controls in the dynamic dialog with an update, then show the dialog box ready for the user to start streaming their content.
The trick to it was to use BalusC's order of events for the main commandButton and then to add the <p:ajax process="formPickList" /> bit to ensure it was executed first - because nothing happens correctly unless the pickList updated the backing bean first (something that was not happening for me before I added it). So, yea, that commandButton rocks because you can affect previous, pending and current components as well as the backing beans - but the timing to interrelate all of them is not easy to get a handle on sometimes.
Happy coding!
I have a PrimeFaces <p:dialog>. The dialog has an input field and a command button. The command button posts the form without ajax (e.g. to upload a file via simple mode). If there is a validation error on the input field then the <p:message> in the dialog shows the error correctly, however the dialog closes because of the non-ajax postback. Because I am not using ajax, I can't really use the oncomplete trick to keep the dialog open as answered in Keep p:dialog open when a validation error occurs after submit.
What are my options to keep the dialog open (or reopen) after non-ajax submit if there was a validation error?
Make use of the dialog component's visible attribute. If this is set to true during render, then the page will render with the dialog opened.
E.g. if there's a postback and validation has failed:
<p:dialog ... visible="#{facesContext.postback and facesContext.validationFailed}">
Or if there are more forms in the same page and you'd like to check only if dialog's own form is been submitted:
<p:dialog ... visible="#{dialogForm.submitted and facesContext.validationFailed}">
<h:form binding="#{dialogForm}">
Note: the #{facesContext.validationFailed} works by default of course only if you make use of JSF builtin validation facilities (required="true", <f:validateXxx>, etc) and/or use fullworthy Validator implementations. It you're for example manually validating in action method and manually adding faces messages, then this will not work, unless you implicitly call FacesContext#validationFailed() yourself.
See also:
Difference between rendered and visible attributes of <p:dialog>
I am trying to popup a window when someone clicks a button on the data table.
<h:commandButton
action="#{cacheController.popupDetails}"
immediate="false"
onclick="popup()"
value="View Details"
styleClass="submit">
</h:commandButton>
The associated popup function is
function popup() {
window.open('RDDetails.jsf','popupWindow', 'dependent=yes, menubar=no, toolbar=no, height=500, width=400');
}
Now in the new 'RDDetails.jsf" file, I am trying to access the same managedBean cacheController. But the problem is, the pop-up window and JSF lifecycle is not in sync. As a result, the popup first displays blank and when I refresh, it pulls out the proper data.
Is there anyway I can click on a button which will do some processing in the managed bean and then opens a pop up which rerieves the processed data from the managed bean.
I am using JSF 1.1.
You're here basically firing two independent requests: one associated with the form submit and other which opens the RDDetails.jsf in a popup. You'll need to combine this in one request. You can achieve this in basically two ways:
Get rid of the onclick and just add target="_blank" to the <h:form> so that it get submitted into a new window/tab.
Block the default action by adding return false; to the onclick and do the business logic in the constructor of the bean associated with RDDetails.jsf. The only (major) caveat is here that the model won't be updated with the form fields. Thus, you'll need to pass the form fields as request parameters of the popup URL manually with help of JavaScript. You can then make use of managed property entries in the faces-config.xml to inject the GET request parameters into the model.
First way is obviously the easiest, but this doesn't give you a "fullworthy" popup/modal dialog. The second way is a bit harder (unless you've already a good grasp on both JavaScript and JSF). I would then consider to look for a component library which provides a ready-to-use popup component.
See my example:
<h:commandLink action="#{controller.myAction}" onmousedown="document.forms['idform'].target='_blank';">
I'm using jsf 1.1