Change InputText-Values with Ajax - ajax

Question

So I have a bunch of InputText-Boxes, which express some kind of customer data (customer-id, firstname, lastname, etc.)
Now i want to auto-fill (with the corresponding mysql data) all InputText-Boxes, when I enter a valid customer-id.
<h:inputText id = "customer_id" value="#{reservationHandler.customer.customer_id}"/>
I guess I'll have to use Ajax to pass the current customer-id to the managed bean, but how do i do this? And how do i fill the other InputText-Boxes?
Thanks in advance.

Answer 1

This task can be done using the <f:ajax> tag that comes with JSF 2 and is good illustrated in this tutorial. The first example shows you how to accomplish the task at hand. Another advice would be to use #ViewScoped annotation for your managed bean as explained by BalusC blog post: Communication in JSF 2.0 - Managed bean scopes.
With all this info and the managed bean you're using, a demo could be:
Customer class
public class Customer {
private int customer_id;
private String name;
//constructor, getters and setters...
}
ReservationHandler managed bean
#ManagedBean
#ViewScoped
public class ReservationHandler {
private Customer customer;
//this EJB will retrieve the Customer data
//if you don't have it like this, then use your own
//custom CustomerService class/implementation to retrieve the data from dabatase
#EJB
private CustomerService customerService;
//constructor, getters and setters...
#PostConstruct
public void init() {
customer = new Customer();
}
public void showCustomerDataListener(AjaxBehaviorEvent event) {
Customer customerFromDB =
customerService.getCustomer(customer.getCustomer_id());
if (customerFromDB != null) {
customer = customerFromDB;
}
}
}
Customer Facelets view (just the relevant code)
<h:form>
<h:outputText value="Customer ID:" />
<h:inputText id="customer_id"
value="#{reservationHandler.customer.customer_id}">
<f:ajax event="blur"
listener="#{reservationHandler.showCustomerDataListener}"
render="customer_name" />
</h:inputText>
<h:outputText value="Customer name:" />
<h:inputText id="customer_name"
value="#{reservationHandler.customer.name}" />
</h:form>
In case your Customer class posses more than 1 attribute, you have two options:
Set the ID of every input in the render attribute of the <f:ajax> component, but this is very naive.
Group all the components with an UIContainer and render this UIContainer. Example given assuming that the Customer class has an additional private String address attribute:
<h:form>
<h:outputText value="Customer ID:" />
<h:inputText id="customer_id"
value="#{reservationHandler.customer.customer_id}">
<f:ajax event="blur"
listener="#{reservationHandler.showCustomerDataListener}"
render="customerData" />
</h:inputText>
<h:panelGrid id="customerData" columns="2">
<h:outputText value="Customer name:" />
<h:inputText id="customer_name"
value="#{reservationHandler.customer.name}" />
<h:outputText value="Address:" />
<h:inputText id="customer_address"
value="#{reservationHandler.customer.address}" />
</h:panelGrid>
</h:form>
To know the supported events that cna be applied in <f:ajax event="what_to_write_here">, refer to f:ajax JSF Core Tag Reference, event tag attribute description:
The event that will invoke Ajax requests, for example "click", "change", "blur", "keypress", etc. The event must be supported by the component(s) that have Ajax behavior enabled. Note: the event name is the same as the DOM event name without the "on" prefix, so for the "onclick" event the correct event name is "click". The "action" event is supported for command components such as h:commandButton and h:commandLink, and the "valueChange" event is supported for input components such as h:inputText and h:selectOneMenu.