I am trying to develop a Billing application using JSF and PrimeFaces. The basic functionality requires to add several items to a bill and click the update button when the bill is complete. The printed bill must include details like BillId which is generate at the end of the backing bean settleBill method. It is needed to do it in one page so that after the print, the application is ready for a new bill.
I developed that as follows, but Printing and executing the method do not happen as expected.
<p:commandButton value="Settle" action="#{billController.saveSelected()}" ajax="false" >
<p:printer target="pDetails" />
</p:commandButton>
When I use without Ajax, Printing part is ok, but action is not executed. When used with Ajax, command is executed, but print is not working. I used an action listner instead of the action, still the same result.
<p:commandButton value="Settle" actionListener="#{billController.settleBill}" ajax="false" >
<p:printer target="pDetails" />
</p:commandButton>
How can I execute a backing bean method at the same time getting printouts with final values like Bill Id, which is generated after the backing bean method is fully executed. I want to achieve it in a single page so that after every bill the screen is ready for the next bill.
Thanks in advance.
When you use without Ajax, To make printing as well as action to work you have to use following code:
<p:commandButton value="Settle" actionListener="#{billController.settleBill}">
<f:ajax execute="#this"/>
<p:printer target="pDetails" />
</p:commandButton>
and In the settleBill method declare it with ActionEvent like below:
public void settleBill (ActionEvent actionevent) {}
<p:remoteCommand name="rc" actionListener="#{movimentoBean.test}" />
<p:commandButton value="Imprimir" type="button"
icon="ui-icon-print" onclick="rc();PF('visDialog').hide()"
style="display:block;margin-bottom: 20px">
<p:printer target=":formMovimentos:etiqueta" />
</p:commandButton>
public void test(ActionEvent actionevent) {}
Related
I am struggling in trying to send some information from a textfield to a bean-method and process the input there. My code looks like that:
<h:form id="form2">
<p:inputText id="casTextBox" value="#{TsneDAODB.getNearestNeighborsAsJSON('blubb2')}" />
<br/>
<p:commandButton id="nearestNeighborsSubmit" type="post" action="#{TsneDAODB.getNearestNeighborsAsJSON('blubb')}" value="Surrounding substances">
</p:commandButton>
</h:form>
I would like to send the input in the textfield to the method nearestneighborsAsJSON(String) of the bean TsneDAODB but i can't figure out how i access the content of the textfield and what attribute i have to use to send it away. The current code at least triggers the method with the given input through the action= attribute of the commandbutton (but without even pushing it). So where do i have to add the respective EL to submit the input and what would the correct EL syntax look like to access the casTextBox input?
You should link the input text box to a field contained into your bean then in your getNearestNeighborsAsJSON method you can access the value posted by your form. Remember that the bean should expose getter and setter for that field
<h:form id="form2">
<p:inputText id="casTextBox" value="#{TsneDAODB.fieldXXX}" />
<br/>
<p:commandButton id="nearestNeighborsSubmit" type="post" action="#{TsneDAODB.getNearestNeighborsAsJSON('blubb')}" value="Surrounding substances">
</p:commandButton>
</h:form>
So I have this code:
<h:form id="serviceCustomFormForm">
<p:dialog id="parameterGroupAddDialog" widgetVar="parameterGroupAddDialog" header="#{messages.addParameterGroup}" modal="true" resizable="false">
<p:inputText value="#{serviceCustomFormBean.serviceParameterGroup.name}" styleClass="Wid90" />
<br />
<br />
<p:commandButton value="#{messages.save}" styleClass="Fright BlueButton" update="serviceCustomFormForm" actionListener="#{serviceCustomFormBean.addServiceParameterGroup}" oncomplete="PF('parameterGroupAddDialog').hide()" />
<p:commandButton value="#{messages.cancel}" styleClass="Fright RedButton" oncomplete="PF('parameterGroupAddDialog').hide()"/>
</p:dialog>
<div class="Container100">
<div class="ContainerIndent">
<p:commandButton value="#{messages.addParameterGroup}" icon="fa fa-plus-circle" styleClass="Fright CyanButton FloatNoneOnMobile" oncomplete="PF('parameterGroupAddDialog').show()" />
<div class="EmptyBox10 ShowOnMobile"></div>
</div>
</div>
</h:form>
When the page is first loaded the #PostConstruct method is called.
When I click the commandButton to open the dialog it's called again. And when I press the Cancel button inside the dialog it's called again.
This behavior does not occur in other parts of the application, and I can't see what I am missing here.
Update: As requested, the Bean code is here:
#ManagedBean
#ViewScoped
public final class ServiceCustomFormBean implements Serializable {
private ServiceParameterGroup serviceParameterGroup = new ServiceParameterGroup();
// Other attributes
#PostConstruct
private void init() {
// Reads attributes sent from previous page
}
public void addServiceParameterGroup() {
// Saves the serviceParameterGroup to database
}
// Getters and Setters
}
It's because the Commandbutton submits the form. You can
change to this:
<p:commandButton type="button" ...onclick="PF('parameterGroupAddDialog').hide()"
Type button tells primefaces not to submit the form. If the form isn't submitted oncomplete is never called. So it's onclick.
Try setting the following attributes to your 'Add Service' and 'Cancel' commandButton elements: partialSubmit="true" process="#this".
Code like this:
<commandButton value="#{messages.addParameterGroup}" ... partialSubmit="true" process="#this" ... />
By default, pf commandButtons try to submit the whole form, while in those two cases you just want to call the invoked method without doing a submit. With this, you are saying to primefaces that you don't want to submit it all (partialSubmit=true), and that you just want to process the invocation of the button itself (process=#this). Maybe that is your problem.
As an additional comment, i don't think getting the label values for the buttons from the bean is a good idea (unless you want to intentionally change the labels dynamically), because you will end up doing excessive requests to the bean. Better try using a messages properties file, as described in here http://www.mkyong.com/jsf2/jsf-2-0-and-resource-bundles-example/.
If I remember correctly, you should put your Dialog outside your main form, at the end of your body or use the appendTo="#(body)" param, and then, have another form inside the dialog.
After a long time dealing with this problem, I finally found the reason.
The annotation ViewScoped that I was importing in the backing bean was from the package javax.faces.view.
The correct one is javax.faces.bean.
Thanks for everyone that spend some time trying to help.
I have a form inside a modal dialog and after closing (hiding in fact) one I wanted to reset all inputs that user might have changed. I though about something like as follow:
<p:dialog widgetVar="myDialog">
<h:form id="formId">
<!-- ... -->
<p:commandButton value="Cancel" onclick="myDialog.hide();"
update="formId">
<p:resetInput target="formId" />
</p:commandButton>
</h:form>
</p:dialog>
But the result was not that I expected. After a while of searching I found a solution that was to add process="#this" attribute to the <p:commandButton>. And my question is why it is necessary? What is really happening in backgroud that this process is desired. I don't really get the idea of process attribute at all.
I have done some work with dialog boxes and the way I did to make the form null is, when clicking the button to open dialog box, I ran a method in backing bean which cleared my pojo so my form had empty values.
In your case it could be something like this:
<h:form id="form-button">
<p:commandButton id="AddButton" value="open dialog box"
update=":form" action="#{myBean.myMethodToSetPojoNull}" immediate="true"
oncomplete="PF('myDialog').show()" />
</h:form>
When clicking this button, the called method will set to null all the fields and your dialog box will be empty. Getting back to your question of why process=#this is neccessary much better explained answer is here
What is the function of #this exactly?
You can also reset input after submitting through this method:
<p:commandButton value="Reset Non-Ajax"
actionListener="#{pprBean.reset}" immediate="true" ajax="false">
<p:resetInput target="panel" />
</p:commandButton>
If you don't add process="#this" then by default attribute value will be set to process="#form" which means all the elements in the form are processed. In command buttons process="#this" is mandatory to execute the corresponding actions associated with that button.
You can directly refer the answer from Balusc in this link
What is the function of #this exactly?
Is it possible to reset the value of an inputText after clicking on the commandButton in JSF? The inputText UIElement provides the method ResetValue so I tried something like this:
<h:inputText id="measurementadd" binding="#{inputTextMeasurement}">
<f:validateRegex pattern="[a-zA-Z ]*"/>
<f:ajax event="keyup" render="measurementaddmessage submit" execute="#this"/>
<h:inputText>
<p:commandButton id="submit" action="#{Bean.addMeasurement(inputTextMeasurement.value)}"
value="submit" update="dataTable measurementadd measurementaddmessage"
disabled="#{empty inputTextMeasurement.value or facesContext.validationFailed }" >
<f:ajax event="mouseup" execute="#{inputTextMeasurement.resetValue()}" />
</p:commandButton>
<h:messages for="measurementadd" id="measurementaddmessage"/>
But after clicking the Button the inputTextMeasurement doesn't reset it's value.
Does someone know a good workaround for this?
I'm searching for a solution without JS and JAVA, so a realization in JSF would be very cool.
Your mistake is here in the execute attribute:
<f:ajax event="mouseup" execute="#{inputTextMeasurement.resetValue()}" />
The execute attribute should represent a space separated collection of client IDs to include in the process/decode of the ajax request. However, you specified a listener method there.
You need the listener attribute instead:
<f:ajax listener="#{inputTextMeasurement.resetValue()}" />
(and I omitted event as it defaults here to click which is already the right one)
Interesting detail is that the other <f:ajax> in the same piece of code used the exeucte attribute the right way.
Unrelated to the concrete problem, have you looked at <p:resetInput>? This saves an ajax listener method in the bean. Replace the whole <f:ajax> with
<p:resetInput target="measurementadd" />
Why dont we just use
<input type="Reset"/>
This one is works fine for me! ???
I have solved my problem as below
<p:commandButton id="submit" action="#{Bean.addMeasurement(inputTextMeasurement)}">
Sending back bean UIInput component. Get and Reset value in back bean.
public void addMeasurement(UIInput
String msr = (String) inputTextMeasurement.getValue()
inputTextMeasurement.resetValue();
}
I am trying to listen to select event from autocomplete using attribute selectListener.
I am passing a remoteCommand as select listener. But the selectListener never calls this remoteCommand method.
My code follows:
<h:form>
<p:autoComplete autocomplete="true" completeMethod="#{search.fetchSuggestions}" value="#{search.selectedSuggestion}" selectListener="moveToSelectedPage()"/>
<p:remoteCommand name="moveToSelectedPage" action="firstPage.xhtml?faces-redirect=true" />
</h:form>
All I am trying to do is, navigating to a different page after the user selects a particular suggested item among suggestions made by autocomplete.
Looking at PrimeFaces version 3.5, it appears that the selectListener attribute is no longer available for the AutoComplete component. The link in BalusC's answer leads to the correct place, where it shows the new approach to be to include a <p:ajax> tag inside the <p:autocomplete>:
<p:autoComplete id="acSimple" value="#{autoCompleteBean.txt1}" completeMethod="#{autoCompleteBean.complete}">
<p:ajax event="itemSelect" listener="#{autoCompleteBean.handleSelect}" update="messages" />
</p:autoComplete>
The selectListener attribute should refer to a managed bean method taking SelectEvent and returning void, not to some arbitrary JavaScript function.
See also the PrimeFaces <p:autoComplete> showcase page.
<p:autoComplete selectListener="#{autoCompleteBean.handleSelect}" ... />
with
public void handleSelect(SelectEvent event) {
// ...
}