I have the following situation:
after clicking a button, some business logic is done and after it is done, a new tab with a report should be visible.
<p:commandButton value="this button" update="growlMain"
actionListener="#{myBean.businesslogic}"
onstart="ajaxDialog.show();"
oncomplete="ajaxDialog.hide();"
onsuccess="window.open('./report.jsp', '_newtab');" />
This does not work :(
If the business logic only lasts some milliseconds, the following works:
<p:commandButton value="this button" update="growlMain"
actionListener="#{myBean.fastbusinesslogic}"
onclick="window.open('./report.jsp', '_newtab');" />
the onclick opens a new tab, also things like onstart but it doesn't work with onsuccess or oncomplete. Why? And is there a solution for business logic that lasts some seconds?
onclick is called before the ajax request is even created (pure client side) while oncomplete and onsuccess are executed after the server responded to the ajax request. So, if you need to execute some business logic before showing a dialog, for example, you want to go with oncomplete. That's what I always use.
You can also condition your javascript inside oncomplete to perform only if there's no validation errors. Intuitively I think onsuccess would behave like that and only execute when there's no validation errors, but that's not how it goes. I don't really know the difference between them. I assume there's a way to flag success=false in the backing beans, but I couldn't really find it in the documentation.
If you want to check for validation in your oncomplete attribute, this is how you'd do:
oncomplete="if (!args.validationFailed){someDialog.hide()}"
In this case, you would only close the dialog if the fields are properly validated. You can actually inject parameters from the backing bean and use them in the javascript after the request has been served. In your backing bean you can do something like this:
RequestContext.getCurrentInstance().addCallbackParam("showDialog", false);
And you can access the parameter like this in your incomplete attribute:
oncomplete="if (args && args.showDialog){someDialog.show()}else{ alert('the bean didnt let me open the dialog')}"
Anyway, I hope that helps.
I have noticed that onsuccess for PrimeFaces command button does not work. The oncomplete however works and does the needful even if there is an error , such as in my case shows a success dialog even if there is an error in my business logic. Tried to use onsuccess but doesn't work.
You could try oncomplete as below:
<p:commandButton value="this button" update="growlMain"
actionListener="#{myBean.businesslogic}"
onstart="ajaxDialog.show();"
oncomplete="ajaxDialog.hide(); window.open('./report.jsp', '_newtab');"/>
You can see the difference here:
Primefaces and ajax onsuccess event
or with onsuccess you can do something before full loading DOM
Related
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.
This question already has an answer here:
How to call JSF backing bean method only when onclick/oncomplete/on... event occurs and not on page load
(1 answer)
Closed 5 years ago.
<h:outputLink value="/4JVA-157292-war/supinfo/auth/mycar.xhtml">Car</h:outputLink>
<h:outputLink value="Log Out" onclick="${loginController.logout()}" />
As you see, If i click the Car link. I will excute the ${loginController.logout()}, but if i delete the Log out. I will go into the car page.
<h:ouputLink> component is used to render plain a anchor element with its href attribute evaluated as value attribute of <h:outputLink> with the query parameters attached in case the component has <f:param> tags as its children.
<h:ouputLink> is not used to execute server-side actions as you wrongly seemed to expect. You may have confused it with a <h:commandLink> component that is used to trigger a server-side action via a JavaScript call.
If you want to call the action method you must switch to a command comnponent (or its derivative) like <h:commandLink>. Its action attribute should point to the desired action method, like so:
<h:commandLink value="Log out" action="#{loginController.logout}" />
In this way you will be able to execute the bean action method.
Also it is worth noting that since JSF 2.0 there has been an <h:link> component that is useful for handling application-wide navigation. It takes a navigation case outcome in its outcome attribute thus leaving <h:outputLink> component useful for links to external resources.
For more information on the subject read the following answer: When should I use h:outputLink instead of h:commandLink?.
As to the cause of the problem you faced, onclick attribute is rendered as onclick event handler of the generated a element that responds to a click event on the HTML element it is attached to. In case the event is fired a client-side JavaScript code is called (by function call onclick points to or by executing inline code that is contained therein). Do note that onclick runs on the client (in JavaScript context within web browser) while action runs on the server (executes Java code depending on the submit button pressed within web server).
Usage of onclick may be fruitful at least in the following circumstances:
in case it is used in conjunction with a command component it may stop form submission to the server if some client-side requirements are not met (i.e. confirm dialog was shown and cancel button was pressed, or client-side validation failed) as soon as the event will be fired before any consecutive events associated with the element (like form submission):
<h:commandLink value="Delete item" action="#{bean.delete(item)}" onclick="return confirm("Are you sure you want to delete this item?");" ... />
or
<h:commandLink value="Submit data" action="#{bean.action}" onclick="return inputValid();" ... />
with
<script type="text/javascript">
function inputValid() {
var isInputValid = ...;
//decide what's valid or not and set variable to true/false accordingly
return isInputValid;
}
</script>
it may be used to trigger some GUI changes, especially when used in conjunction with non-command components, like in:
<h:button value="Show dialog" onclick="showDialog(); return false;" ... />
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'm working on building a web page and notice now that I have to press the command button twice. Any command button has the same problem, so I figured I would add and action listener on one of them to see if I could see something.
<h:form id="formP">
<p:commandButton id="temp" value="photos" actionListener="#{viewBacking.debugBreakpoint()}" action="userPhoto" />
</h:form>
The backing bean has
public void debugBreakpoint() {
int i = 0;
i++;
}
Unfortunately, this does help. It hits my breakpoint only after the second press. I suspect that some field somewhere isn't passing validation but I would like some method of detecting what exactly is going wrong - why do I need the second push? Is there some option I can turn on in Glassfish, or something else where I can look at a dump of debug information? I can ignore the dump until everything is stable and then see what exactly is happening when I press the button for the first time.
Is there any such tool which I can use?
That can happen when a parent component of the given <h:form> has been rendered/updated by another command button/link with <f:ajax>. The given form will then lose its view state which it would only get back after submitting the form for the first time. Any subsequent submits will then work the usual way. This is caused by a bug in JSF JS API as descibred in JSF issue 790 which is fixed in the upcoming JSF 2.2.
You need to fix the another command button/link with <f:ajax> to explicitly include the client ID of the given <h:form> in the render.
<f:ajax render=":somePanel :formP" />
Another way is to replace this <f:ajax> by a PrimeFaces <p:commandLink> or <p:commandButton> so that you don't need to explicitly include the client ID of all the forms. PrimeFaces's own JS API has namely already incorporated this fix.
add event="onclick" in your p:commandbutton
I guess that will sort it out.
or you can add this ajax="false" property in your commandButton
<p:commandButton ajax="false" action="#{userController.create}" value="#{bundle.CreateUserSaveLink}"></p:commandButton>
I ran into the same issue. The solution was simple, instead of having both an actionListener and an action, just convert the actionListener method to return a string to where you want to navigate to and use it as the method for the action (and don't have an actionListener).
In simple terms: only use an action (do not use an actionListener on a commandButton that is submitting a form).
Please check your binding with bean.
bean fields should be String or non primitive.
I am little confused about my radio button list in JSF and how it reacts to stuff and I didn't find much help online. Below is the declaration of my radio button list and the method which should be called in case the value of the radio changes:
<h:selectOneRadio value="#{AddExpense.selectedTypeExp}" layout="pageDirection"
valueChangeListener="#{AddExpense.changed}">
<f:selectItems value="#{AddExpense.typeExpList}"/>
<a:support event="onclick" action="#{AddExpense.typeExpChanged}" immediate="true"/>
</h:selectOneRadio>
When I choose a different value, only the typeExpChanged is called, but the AddExpense.changed method is not called. I think I'm confusing something here, not sure how the changeListener should react... Below is my very simple test method which should be called:
public void changed(ValueChangeEvent event){
System.out.println("In changed event method: "+event.getNewValue());
}
Should I change something in the <a:support> ?
The reason I have both event and valueChangeListener is because I wanted to test what reacts to my changing the selection. I just need a method to be called with a parameter which tells me the selected value, so I can load something else.
Thanks in advance!
The valueChangeListener is not a client side event listener. It's a server side event listener. It does not generate any line of HTML/JS/Ajax code and it is triggered by JSF itself when you submit the form to the server and the submitted value is different from the initial model value.
Just keep using Ajax4jsf <a4j:support>, it's perfectly fine for your particular functional requirement.