I've the following form:
<h:form>
<h:inputText size="2" value="#{orderMB.quantity}" />
<h:outputLabel value=" #{orderMB.totalPriceOneItem} €" />
<h:commandButton value="submit" />
</h:form>
And I've the following method in a session scoped managed bean:
public void setQuantity(int quantity) {
this.quantity = quantity;
setTotalPriceOneItem(quantity* item.getItem().getPrice().doubleValue());
}
I would like to auto-update the total price result on every key press of the input field. How can I achieve this without pressing the submit button?
Your code isn't doing that anywhere. It's missing a <f:ajax>.
<h:inputText size="2" value="#{orderMB.quantity}">
<f:ajax event="keyup" render="total" />
</h:inputText>
<h:outputText id="total" value="#{orderMB.totalPriceOneItem} €" />
The event attribute can be set to any HTML DOM event on which JSF must submit the form by ajax, such as click, keyup, blur, focus, etc. The render attribute can be set to any JSF client ID which needs to be updated when the ajax submit finishes. In this case it's referring the ID of the component showing total price.
Note that I replaced the wrong <h:outputLabel> by <h:outputText>. Also noted should be that a setter isn't exactly the right place to perform business logic (a getter also not!). Better revert that setter method to a true setter and add an ajax listener method:
<f:ajax event="keyup" listener="#{orderMB.updateTotalPriceOneItem}" render="total" />
public void updateTotalPriceOneItem() {
totalPriceOneItem = quantity * item.getItem().getPrice().doubleValue();
}
In case when it still doesn't work, then verify if you have a <h:head> in the template instead of a <head>. If still in vain, work through commandButton/commandLink/ajax action/listener method not invoked or input value not updated.
That said, I strongly recommend to take a pause and work through a sane JSF 2.x book. The above is usually already covered in the 1st chapter.
Related
I have a requirement where 2 input values are entered onto JSF 2.2 page. We are using Primefaces controls. These values are then submitted to managed bean method via h:command button.
Then, based upon the values, I want to set a separate output field on the same JSF page to a specific value.
So my issue at the moment is trying to wire a managed bean so that it returns a value back to field on my JSF page which in this case field name is mgrs. The main issue is that I'm dealing with is the third party library that produces the return values and I'm not sure the best approach on how to interface with this library so that I can return the values that I need from it. Also from within my JSF page what would be the best approach from the commandbutton to get the value back from the bean code?
Here is the working portion of my JSF page
<p:panel id="horizontal" header="Horizontal Toggle" toggleable="true"
toggleOrientation="horizontal">
<h:panelGrid columns="2" cellpadding="10" styleClass="left">
<h:outputLabel for="basic" value="Enter Latitude:" />
<p:inplace id="lat">
<p:inputText value="Latitude" />
</p:inplace>
<h:outputLabel for="basic" value="Enter Longitude:" />
<p:inplace id="long">
<p:inputText value="Longitude" />
</p:inplace>
<p:inplace id="mgrs">
<p:inputText value="Longitude" />
</p:inplace>
<h:commandButton actionlistener="#{coordinates.mgrsFromLatLon(lat, long)}" update="mgrs" />
Here is the third party API:
package com.berico.coords;
import gov.nasa.worldwind.geom.Angle;
import gov.nasa.worldwind.geom.coords.MGRSCoord;
import javax.faces.bean.ManagedBean;
#ManagedBean(name="coordinates")
public class Coordinates {
public static String mgrsFromLatLon(double lat, double lon){
Angle latitude = Angle.fromDegrees(lat);
Angle longitude = Angle.fromDegrees(lon);
return MGRSCoord
.fromLatLon(latitude, longitude)
.toString();
}
public static double[] latLonFromMgrs(String mgrs){
MGRSCoord coord = MGRSCoord.fromString(mgrs);
return new double[]{
coord.getLatitude().degrees,
coord.getLongitude().degrees
};
}
}
Yes Why not its quite simple.
Changes in JSF page
Put your elements inside a <h:panelGrid/> or something similar component.
Give one id to your <h:panelGrid id="panelID"/>
Bind your <h:outputtext/> with a variable from your bean.
Use rendered attribute in your <h:outputtext rendered="#{bean.showOutputBox}" />
Now in your button with action use render attribute and give id of pandelgrid which added in Step2
Changes in Java/bean side
Create a variable(boolean) showOutputBox = false with get/set method.
When you click on sumbitmethod call a action in bean ,in that action method make this(above) declare variable true rest JSF will take care.
I am trying to log the number of the button clicks.
1. Should log the number of clicks though the form is invalid. The field value1 in the form is integer. So, It shall also consider conversion errors.
2. Action to be done at backing bean
I have tried with listener on ajax.
<h:form id="form">
<h:inputText id="in" name="in" value="#{listenBean.value1}" autocomplete="off">
</h:inputText>
<h:commandButton value="Click Me" action="#{listenBean.save}">
<f:ajax execute="#form" render="#form message eventcount" />
</h:commandButton>
<h:message for="in"/>
Button Clicks: <h:outputText id="eventcount" value="#{listenBean.eventCount}"/>
</h:form>
Bean
public void eventCount(AjaxBehaviorEvent event) {
//increment the counter
}
public void save() {
//save
}
Issues:
The listener method is not called when the conversion errors on input field binded to integer at bean. I enter the value as "some text". During thsi time listener is not called.
Version: Mojaraa 2.2.8
Is this the correct way of doing. Am I doing any mistake.
Can some one help me.
The <h:outputText value> doesn't represent a method expression which should reference a bean (listener) method. It represents a value expression which should reference a bean property which will then be outputted as (escaped) text to the response.
Your best bet is to hook on preRenderView event of the component and check if the current request represents a postback request.
<h:form id="form">
<h:commandButton ...>
<f:ajax execute="#form" render="#form" />
</h:commandButton>
Button Clicks:
<h:outputText id="eventcount" value="#{listenBean.eventCount}">
<f:event type="preRenderView" listener="#{listenBean.incrementEventCount}" />
</h:outputText>
</h:form>
private int eventCount;
public void incrementEventCount(ComponentSystemEvent event) {
if (FacesContext.getCurrentInstance().isPostback()) {
eventCount++;
}
}
public int getEventCount() {
return eventCount;
}
Note that render="#form" covers the entire form already, so there's no need of specifying individual components inside the very same form. In case you've another ajax action inside the same form for which you'd like to not count the event, then make sure that render="..." is specific enough that it doesn't cover the eventcount component.
Setup:
I have 2 forms A & B
I have a commandLink in form A:
<h:commandLink actionListener="#{homeView.selectDiv('homeUpdates')}">#{msg.homeUpdates}
<f:ajax render=":B" execute="#this" />
</h:commandLink>
...which updates form B.
The problem is that when I click the ajax link, it rebuilds form A as well and gets an exception from a ui:repeat I have. Is this correct behaviour? Should it rebuild form A as well?
I am using JSF 2.2 and form A contains a ui:fragment=>ui:include=>ui:repeat
=====Added SSCCE=======
The following code does not run after pressing Update B! twice. It gives an exception of duplicate id. The value for ui:repeat is irrelevant
<h:head>
</h:head>
<h:body>
<h:form id="A">
<ul class="tableView notification">
<ui:repeat var="notification" value="#{dashboardBean.notifications}">
<li>
xx
</li>
</ui:repeat>
</ul>
<h:commandLink value="Update B!" listener="#{dashboardBean.toggleRendered}">
<f:ajax execute="#this" render=":B" />
</h:commandLink>
</h:form>
<h:form id="B">
</h:form>
</h:body>
Upon initial request the view is created, upon postbacks the view is restored. To recite some points of JSF 2.2 specification for clarity (emphasis mine):
P. 2.2.1:
If the request is not a postback ... call createView() on the ViewHandler. If the request is a postback, ... call ViewHandler.restoreView(), passing the FacesContext instance for the current request and the view identifier, and returning a UIViewRoot for the restored view.
P. 2.5.8:
Selected components in a JSF view can be priocessed (known as partial processing) and selected components can be rendered to the client (known as partial rendering).
P. 13.4:
The JavaServer Faces lifecycle, can be viewed as consisting of an execute phase and a render phase. Partial traversal is the technique that can be used to “visit” one or more components in the view, potentially to have them pass through the “execute” and/or “render” phases of the request processing lifecycle.
When you use AJAX, PartialViewContext class will contain all the information that's needed to traverse the restored view.
So, to get back to your question, under <f:ajax render=":B" execute="#this" /> setup, only the form with id="B" will be rerendered, which implies <h:form id="B">, no form nestings, etc.
Regarding your 'doesn't work' comment the simple test case with a plain view scoped managed bean gave me the expected results:
<h:form id="A" >
<h:outputText value="#{twoFormsBean.a}"/>
<h:commandLink actionListener="#{twoFormsBean.actionA}">
Update B!
<f:ajax execute="#this" render=":B"/>
</h:commandLink>
</h:form>
<h:form id="B" >
<h:outputText value="#{twoFormsBean.b}"/>
<h:commandLink>
Update Both!
<f:ajax execute="#this" render=":A :B"/>
</h:commandLink>
</h:form>
with
#ManagedBean
#ViewScoped
public class TwoFormsBean implements Serializable {
private String a = "A";//getter
private String b = "B";//getter
public void actionA(ActionEvent ae) {
a = "newA";
b = "newB";
}
}
Consider a simple h:outputText component:
<h:outputText value="#{myBean.myValue}"/>
How can I lazy load that value after the page has been rendered, and display custom 'ajax loading' icon instead of the value while this is being done?
I am using PrimeFaces 3.5 in my project so any PF-specific implementation will be welcome.
A suggest to do this by calling remoteCommand after on page load (it is done by setting autoRun attribute to true) and update your outputText.
private String myValue;
// getter and setter
public void initMyValue() {
// init myValue
}
On page you should have ajaxStatus component for viewing loading image, and your outputText. Also there should be p:remoteCommand component:
<p:ajaxStatus style="width:16px;height:16px;" id="ajaxStatusPanel">
<f:facet name="start">
<h:graphicImage value="ajaxloading.gif" />
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
<h:outputText id="myText" value="#{myBean.myValue}"/>
<p:remoteCommand autoRun="true" actionListener="#{myBean.initMyValue}" update="myText"/>
EDIT: I supposed that you want to lazy load value of outputText because it contains some long running calculations, but if you want to completely deffer rendering of outputText first add boolean property in your backing bean, and set this property to true at the end of initMyValue method:
private boolean loaded;
// getter and setter
public void initMyValue() {
// init myValue
loaded = true;
}
on the page reorganize it as follows:
<h:panelGroup id="myPanel" layout="block">
<h:graphicImage value="ajaxloading.gif" rendered="#{!myBean.loaded}"/>
<h:outputText value="#{myBean.myValue}" rendered="#{myBean.loaded}"/>
</h:panelGroup>
<p:remoteCommand autoRun="true" actionListener="#{myBean.initMyValue}" update="myPanel"/>
You can use a BlockUI to conditionally block the component while it loads.
Define a preRenderComponent event on the <h:outputText/>
<h:outputText id="myText">
<f:event name="preRenderComponent" id="started"/>
</h:outputText>
Define a <p:blockUI/> with the id of the event as the trigger
<p:blockUI block="myText" trigger="started" />
You can customize the blockui to display an image or whatever.
A word of caution: I presume you require this because you're doing some heavy lifting in the getter of that component. Know that the getter will be called several times in the lifecycle of that page. So hiding the fact that the operation is taking a long time will not change the fact. A better design would be to preload and cache the value for that component in a durable scope, rather than the theatrics of a "loading" throbber.
This is how I ended up implementing it:
<h:panelGroup id="loginLocation">
<p:graphicImage library="assets" name="small-kit-loader.gif" width="16" height="16" rendered="#{empty mybean.lastLoginLocation}"></p:graphicImage>
<h:outputText value="#{myBean.lastLoginLocation}" rendered="#{!empty myBean.lastLoginLocation}"/>
</h:panelGroup>
<p:remoteCommand global="false" actionListener="#{actionBean.getUserLoginLocation(myBean.selectedUser)}" name="refreshLoginLocation" id="rc1" autoRun="true" update="loginLocation" process="#this"></p:remoteCommand>
Personally I am not entirely happy with this implementation:
lazy loading state is stored server-side, not client-side where it should be
I have to implement separate method on my backing bean (getUserLoginLocation) to retrieve the value, and explicitly store it in another property (lastLoginLocation). It would have been much cleaner just to have a single getter that is lazy-called after rendering the page in browser
Not easily reusable - depends on backing bean 'loaded' flag (#{empty myBean.lastLoginLocation} in this case), and requires action listener to actually set the value. Any composite component based on this approach would also depend on specific code in backing bean.
Any recommendations on how to improve this code are welcome! :)
I have a form with a dataTable which has various columns having links and outputTexts. There is one input field which is evaluated through an ajax request . A custom validator makes sure that only integers are added to the field. The form is below.
<form>
<h:dataTable var="item" value="#{listItems.model}" id="adminlistItems">
//other columns having commandLinks and outputTexts
<h:column>
<f:facet name="header" >
<h:outputText value="Quantity"/>
</f:facet>
<f:ajax listener="#{listItems.AddQuantityAction}">
<div style="padding:5px;float:left">
<h:inputText label="changeQuantity" id="addquantity" value="#{item.additionalQuantity}" maxlength="4" size="3">
<f:validator validatorId="integerValidator"/>
</h:inputText>
<h:outputText value=" "/>
<h:commandButton value="AddQuantity" />
<h:message for="addquantity"/>
</div>
</f:ajax>
</h:column>
</h:dataTable>
</h:form>
The code for the bean is :
#ViewScoped
#ManagedBean
public class ListItems implements Serializable {
//...
public String AddQuantityAction(){
//...
boolean result = //some action
FacesContext context=FacesContext.getCurrentInstance();
UIComponent component=UIComponent.getCurrentComponent(context);
String clientID=component.getClientId(context);
if (result) {
FacesMessage message = new FacesMessage("Quantity added successfully");
FacesContext.getCurrentInstance().addMessage(clientID, message);
} else {
FacesMessage message = new FacesMessage("Quantity not added.Processing error");
FacesContext.getCurrentInstance().addMessage(clientID, message);
}
return "adminListItems";
}
}
The custom validator throws a validator exception which is not displayed. And the listener also has code for messages which too are not displayed. I have read several similar questions and this sounds a common question too. But even if i am missing something obvious,i am in need of a third eye to see what i dont.
The execute and render of <f:ajax> defaults to #this. So only the currently active component will be processed and refreshed. When you press the button, this won't send the input value nor refresh the message component.
Fix it accordingly:
<f:ajax execute="addquantity" render="addquantity_message" listener="#{listItems.AddQuantityAction}">
...
<h:message id="addquantity_message" for="addquantity"/>
...
</f:ajax>
By the way, why don't you just use the builtin javax.faces.Integer converter instead of that validator?
<h:inputText ... converter="javax.faces.Integer">
Further, the return value of ajax listener methods should be void. It's totally ignored in any way. Also, method names should start with lowercase. See also Java naming conventions.
Update as per the comment, that didn't seem to work out well with regard to validation. The listener is invoked 2 times because essentially 2 ajax requests are been sent, one for the input and one for the command. I suggest to move the listener method to the <h:commandButton action>.
<f:ajax execute="addquantity" render="addquantity_message">
...
<h:commandButton action="#{listItems.AddQuantityAction}" />
<h:message id="addquantity_message" for="addquantity"/>
</f:ajax>
You'll only fix the obtained client ID to be the input ID, not the button ID.