JSF datatable: adding and removing rows clear rows values - jsf

I have a h:datatable showing a list of rows, and the fields of each row are input fields.
I render an "Add Row" button before the table, and a "Remove Row" button on each row of the table.
The baking bean is viewScoped, and the buttons add/remove elements from the java list in the backing bean, and then return to the same view.
I set the immediate attribute to "true" in the buttons in order to not validate the input fields when I add or remove a row.
Everything works ok but one thing: the values of the input fileds are cleared. I thought that the view kept the values beacuse the bean is viewScoped.
How can I achieve adding/removing rows without triggering validations and keeping the values that were already typed by the user in the form?
My view:
<h:form>
<h:commandButton value="Añadir Fila" immediate="true" action="#{tablaController.addRowAction}" />
<h:dataTable value="#{tablaController.lista}" var="fila" cellpadding="0" cellspacing="0" border="1">
<f:facet name="header">TABLA</f:facet>
<h:column>
<f:facet name="header"><h:outputLabel value="NOMBRE" /></f:facet>
<h:inputText id="nom" value="#{fila.nombre}" />
<h:message for="nom" class="msjError" />
</h:column>
<h:column>
<f:facet name="header"></f:facet>
<h:commandButton value="Quitar Fila" immediate="true" action="#{tablaController.removeRowAction(fila)}" />
</h:column>
</h:dataTable>
</h:form>
My backing bean:
#ManagedBean(name="tablaController")
#ViewScoped
public class TablaController {
private List<Fila> lista;
...
public TablaController() { }
...
#PostConstruct
public void init() {
this.lista = new ArrayList<Fila>();
for (int i=0; i<5; i++) {
Fila fila = new Fila();
fila.setNombre("");
this.lista.add(i,fila);
}
}
...
public String addRowAction () {
Fila fila = new Fila();
fila.setNombre("");
this.lista.add(fila);
return "";
}
public String removeRowAction (Fila f) {
boolean exito = this.lista.remove(f);
return "";
}
...
}
UPDATE --> MY SOLUTION:
I write here my solution if someone is interested.
The problem is that I use immediate="true" to skip validations, but this makes to skip the update_model_values too, so that the values entered by the user in the form are lost after clicking the add/remove buttons and re-redenring the page.
As I use "JSR-303 bean validation", my solution was to skip validations using the f:validateBean to enable/disable them. Depending on the button I click, if I want the validations to execute, I enable the bean validation (for example in a "submit" button), and if I want to skip them, I disable bean validation (like in the add/remove row buttons). But anyway the update_model_values always executes, so the values are not lost.
Here's the view:
<h:form>
<f:validateBean disabled="#{!empty param['disableValidation']}">
<h:commandButton value="Añadir Fila" action="#{tablaController.addRowAction}">
<f:param name="disableValidation" value="true" />
</h:commandButton>
<h:dataTable value="#{tablaController.lista}" var="fila" cellpadding="0" cellspacing="0" border="1">
<f:facet name="header">TABLA</f:facet>
<h:column>
<f:facet name="header"><h:outputLabel value="NOMBRE" /></f:facet>
<h:inputText id="nom" value="#{fila.nombre}" />
<h:message for="nom" class="msjError" />
</h:column>
<h:column>
<f:facet name="header"></f:facet>
<h:commandButton value="Quitar Fila" action="#{tablaController.removeRowAction(fila)}">
<f:param name="disableValidation" value="true" />
</h:commandButton>
</h:column>
</h:dataTable>
<h:commandButton value="Submit" action="#{tablaController.saveData}" />
</f:validateBean>
</h:form>
The backing bean:
#ManagedBean(name="tablaController")
#ViewScoped
public class TablaController {
private List<Fila> lista;
...
public TablaController() { }
...
#PostConstruct
public void init() {
this.lista = new ArrayList<Fila>();
for (int i=0; i<5; i++) {
Fila fila = new Fila();
fila.setNombre("fila "+i);
this.lista.add(i,fila);
}
}
...
public String addRowAction () {
Fila fila = new Fila();
fila.setNombre("");
this.lista.add(fila);
return "";
}
public String removeRowAction (Fila f) {
this.lista.remove(f);
return "";
}
...
public String saveData () {
...
//processes the valid data
//for example, calls to a service method to store them in a database
...
return "";
}
...
}

I set the immediate attribute to "true" in the buttons in order to not validate the input fields when I add or remove a row.
immediate="true" is the wrong tool for the job. It should be used to prioritize validation, not to enable/disable validation. The difference is rather huge as you encountered yourself.
You want to trigger validation conditionally. In case of e.g. required="true" that'd be as easy as
<h:inputText ... required="#{saveButtonPressed}" />
where #{saveButtonPressed} evaluates true when the save button is pressed. E.g. when its client ID is present in request parameter map.
In case of JSR 303 bean validation, that'd be a matter of
<f:validateBean disabled="#{not saveButtonPressed}">
<h:inputText ... />
</f:validateBean>
or with OmniFaces <o:validateBean> which allows controlling that on a per-command basis.
<h:commandButton id="add" ...>
<o:validateBean disabled="true" />
</h:commandButton>

I had exactly the same problem. In short, you can NOT use immediate for action that update data table(UIData) or facelet repeat. Short explanation:submitted values are not kept for re-display if inputs in UIData do not go through validation. Long explanation can be found here: long explanation and a related bug in Mojarra

Related

jsf inputText only displayed value when is readonly true or outputText

I have a h:inputText with valueChangeListener, when the user type some code another h:inputText display data from MySQL about that code, the valueChangeListener works but the second h:inputText not displayed the value and only do it when I set the readonly attribute or I change the component to h:outputText
my facelets page is:
<h:form id="idFacturacion">
<rich:panel>
<f:facet name="header">
<h:outputText value="FACTURACION AL CLIENTE" />
</f:facet>
<h:panelGrid columns="4">
<h:outputText value="Cedula: " />
<h:inputText value="#{facturaBean.encFactura.cedula}" onchange="submit();" valueChangeListener="#{facturaBean.processValueChange}" />
<h:outputText value="Nombre: " />
<h:inputText value="#{facturaBean.encFactura.nombre_cli}" />
</h:panelGrid>
</rich:panel>
</h:form>
facturaBean is:
#ManagedBean
#SessionScoped
public class FacturaBean {
private EncFactura encFactura = new EncFactura();
//getter and setter
public void processValueChange(ValueChangeEvent event){
String ced = event.getNewValue().toString();
try{
//do the database thing
if(resultSet.next()){
encFactura.setNombre_cli(resultSet.getString("nombre_cli"));
}else{
encFactura.setNombre_cli("");
}
}catch(SQLException error){
facesContext.addMessage(null, new FacesMessage("Hubo un error SQL."));
}
}
}
Please see
Change inputText value from listener method… and
Possible to execute `valueChangeListener` for `p:inputText` without hitting `enter` key?
May I suggest using ajax?
Here is a primefaces example but you could apply to richfaces..
<h:inputText value="#{facturaBean.stringOne}" >
<p:ajax event="change" listener="#{facturaBean.processValueChange}" update="strTwo"/> </h:inputText> <h:outputText value="Nombre: " />
<h:inputText id="strTwo" value="#{facturaBean.stringTwo}" />
</h:panelGrid>
private String stringOne= "";
private String stringTwo= "";
public void processValueChange(){
stringTwo = stringOne;
}
With getters etc.. basically on change, fires off to ajax, you do your database call etc, then it returns the response and updates your other input field, it's a much cleaner way than trying to submit forms etc..
Also are you sure you want session scope?

Primefaces <f:selectItems> attribute got set several times with or without values

I have a problem debugged for all half day. I still could not figure it out. Basically, I use datatable expandable feature to show some extra options for each row. User could check some or none of them, then user click on update button to update database. So one row will have many options.
<f:selectItems value="#{adminBean.allTabNames}" /> is to use collect users' selected options, then managed bean will save them into database once user clicks update.
Then problem is that public void setSelectedTabsNames(List<String> selectedTabsNames) {
this.selectedTabsNames = selectedTabsNames;
} method is called several times with expected values or null values(empty list). The values are passed randomly, sometimes there are no values.
View:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:form id="form1">
<p:growl id="growl" showDetail="true"/>
<p:dataTable var="user" value="#{adminBean.users}" scrollable="false"
>
<p:ajax event="rowToggle" listener="#{adminBean.onRowToggle(user.id)}" update=":form:tabView:form1:growl" />
<f:facet name="header">
All Users
</f:facet>
<p:column style="width:2%">
<p:rowToggler />
</p:column>
<p:column headerText="First Name">
<h:outputText value="#{user.firstname}" />
</p:column>
<p:column headerText="Last Name">
<h:outputText value="#{user.lastname}" />
</p:column>
<p:column headerText="Password">
<h:outputText value="#{user.password}" />
</p:column>
<p:column headerText="Active">
<h:outputText value="#{user.active}" />
</p:column>
<p:column headerText="Last Login">
<h:outputText value="#{user.timestamp}" />
</p:column>
<p:column headerText="Notes">
<h:outputText value="#{user.notes}" />
</p:column>
<p:rowExpansion>
<h:panelGrid id="display" columns="1" cellpadding="4">
<h:outputText value="Tabs: " />
<p:selectManyCheckbox id="grid" value="#{adminBean.selectedTabsNames}"
layout="pageDirection" >
**<f:selectItems value="#{adminBean.allTabNames}" />**
</p:selectManyCheckbox>
</h:panelGrid>
<br/>
<p:commandButton value="Update" id="submit" actionListener="#{adminBean.updateTabsForUser(user.id)}" ajax="true" />
</p:rowExpansion>
</p:dataTable>
</h:form>
Managed Bean:
setSelectedTabsNames(List selectedTabsNames)
package org.userlogin.view;
import java.io.Serializable;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.bean.ViewScoped;
import org.userlogin.db.entity.FopsUser;
import org.userlogin.service.UserService;
#ManagedBean
#ViewScoped
public class AdminBean implements Serializable {
private static final long serialVersionUID = -9002632063713324598L;
private List<FopsUser> users;
private List<String> selectedTabsNames;
private List<String> allTabNames;
private UserService us;
public AdminBean() {
us = new UserService();
users = us.getAllUsers();
allTabNames = us.getAllTabs();
}
public List<FopsUser> getUsers() {
return users;
}
public void setUsers(List<FopsUser> users) {
this.users = users;
}
public void setSelectedTabsNames(List<String> selectedTabsNames) {
this.selectedTabsNames = selectedTabsNames;
}
public List<String> getSelectedTabsNames() {
return selectedTabsNames;
}
public List<String> getAllTabNames() {
return allTabNames;
}
public void setAllTabNames(List<String> allTabNames) {
this.allTabNames = allTabNames;
}
public void updateTabsForUser(Long uid) {
us.updateTabsUser(selectedTabsNames);
}
public void onRowToggle(Long uid) {
//set current selected user
us.setCurrent(uid);
this.selectedTabsNames = us.getTabNamesByUserId(uid);
}
}
---------------update-------
Remove the nested 'form', but still not working. I found the the issue is not affecting the last row of data table. Suppose I have three rows in data table, the setters are called multiple times and set to null at last time when I manipulate the first two rows. But for the last row, the setter is still called multiple times. The last call sets the expected value. Now I just add
public void setSelectedOptions(List<String> selectedOptions) {
if (selectedOptions == null || selectedOptions.size() == 0) {
return;
}
this.selectedOptions = selectedOptions;
}
It is still ugly ...
------------update----------
<p:selectManyCheckbox id="grid" value="#{user.selectedTabsNames}"
layout="pageDirection" >
**<f:selectItems value="#{adminBean.allTabNames}" />**
</p:selectManyCheckbox>
Should design like this: put selectedTabsNames into User object. But still not working. since I have this ajax submit button, this requests each selectedTabsNames got called with empty list passed in.
<p:rowExpansion>
<h:panelGrid id="display" columns="1" cellpadding="4">
<h:outputText value="Tabs: " />
<p:selectManyCheckbox id="grid" value="# {user.selectedTabsNames}"
layout="pageDirection" >
<f:selectItems value="#{adminBean.allTabNames}" />
</p:selectManyCheckbox>
<p:commandButton value="Update" id="submit" ajax="true" />
</h:panelGrid>
<br/>
</p:rowExpansion>
----------------update with my own solution (not graceful one, but works) -----
Every time an ajax buttom has been clicked, the whole data table is updated. That means each setSelectedItem method will be called with expected value or empty value. I don't know how to change that.
So I modify my save() method called from ajax button with following logic:
public void save(Long userId, List<String> selectedItem) {
for (User user: users) {
if (user.getId() == userId) {
//update selectedItem in db for this user.
} else {
// read selectedItems in db
// update selectedItem in user object.
}
}
}
When the ajax event is fired, all the input elements in the form are sent. That means that all the selectManyCheckbox (one for each row) are sent. That's why setSelectedTabsNames is called several times.
You have to change how you have designed your implementation. One way woud be to store the selected options in the FopsUser object, so you could do value="#{user.selectedTabsNames}":
<p:selectManyCheckbox id="grid" value="#{user.selectedTabsNames}"
layout="pageDirection" >
**<f:selectItems value="#{adminBean.allTabNames}" />**
</p:selectManyCheckbox>
This way the selected tabs for each row are stored separately.
I may be wrong, but I don't think rowToggle event is the kind of ajax event that can handle row-level parameters. Think about it this way: var="user" is a row-iteration level variable, available for each row in the datatable. The rowToggle event on the other hand is a single level tag, applicable to the entire table as one component. So there probably isn't a reliable way for the datatable to know which row you're referring to when you use
adminBean.onRowToggle(user.id), it'll just select the last row that was rendered
A more effective way to get hold of the details of the row that was toggled is using the ToggleEvent listener in the backing bean, where you don't have to pass a variable:
public void onRowToggle(ToggleEvent te){
User theSelectedUser = (User)te.getData();
int id = theSelectedUser.getId();
}
In your view, you'll now have:
<p:ajax event="rowToggle" listener="#{adminBean.onRowToggle}" update=":form:tabView:form1:growl"/>

Get rowIndex of rich:dataTable rows

In my JSF application, I use a rich:dataTable as follows:
<rich:dataTable id="itemTable" value="#{backingBean.itemsList}" var="i" >
<rich:column> <f:facet name="header">ItemValue</f:facet>
<h:inputText id="myId" value="#{i.value}" style="width: 30px" />
</rich:column> </rich:dataTable>
<h:commandButton id="saveB" value="Save" action="#{backingBean.doSave()}" />
Bean code of doSave:
public String doSave() {
Iterator<Item> = itemsList.iterator();
while(iter.hasNext()) {
//do something
}
}
In the doSave()-Method, i need to know the row index of the current Item, is there a way to achieve this?
While Richfaces extended data tables support a selection management, Richfaces datatables don't.
What I found the easiest way to do to retrieve a somehow selected item from a list, is to add an icon to every row. For this, put the command-Button into the data table itself:
<rich:dataTable id="itemTable" value="#{backingBean.itemsList}" var="i" >
<rich:column>
<h:inputText id="myId" value="#{i.value}" />
<h:commandButton id="saveB" action="#{backingBean.doSave}" />
</rich:column>
</rich:dataTable>
In the bean code, provide the method doSave but with an additional parameter ´ActionEvent´
public String doSave(ActionEvent ev) {
Item selectedItem = null;
UIDataTable objHtmlDataTable = retrieveDataTable((UIComponent)ev.getSource());
if (objHtmlDataTable != null) {
selectedItem = (Item) objHtmlDataTable.getRowData();
}
}
private static UIDataTable retrieveDataTable(UIComponent component) {
if (component instanceof UIDataTable) {return (UIDataTable) component;}
if (component.getParent() == null) {return null;}
return retrieveDataTable(component.getParent());
}
You see, that the ActionEvent ev provides you with the source element (UIComponent)ev.getSource(). Traverse through it until you hit the UIDataTable element and use it's row data.
Possible way two is to justgive the element as parameter with the function call:
<rich:dataTable id="itemTable" value="#{backingBean.itemsList}" var="i" >
<rich:column>
<h:inputText id="myId" value="#{i.value}" />
<h:commandButton id="saveB" action="#{backingBean.doSave(i)}" />
</rich:column>
</rich:dataTable>
and in the bean
public String doSave(Item item) {
// do stuff
}
That's not as clean, but should work with the EL, too. Hope, it helps...

JSF Cannot save change to datatable row to the database

I have a primefaces datatable. I populate it from the database. One of the fields is a boolean represented by a checkbox. I want that if I check or uncheck the checkbox, that I can save the change back to the database.
I have tried passing the current value of the row to the managed bean to save, but the new value of the checkbox isn't reflected in the current row object. How can I get the change into the current row object so I can successfully save the change to the DB?
Here is what I am doing now... I have tried to provide just what is needed. If it is too much information or too little, let me know. Thanks.
#ManagedBean(name = "itemManagerBean")
#ViewScoped
public class ItemManagerBean implements Serializable {
...
public ArrayList<Item> getAllItemsForUser() {
List list = ecf.findByPartyId(user.getPartyId());
ArrayList<Item> itemList = new ArrayList<>(list);
return (itemList);
}
...
public String saveItem(Item item){
System.out.println(item.toString());
ecf.updateRecord(item);
return (null);
}
}
//item class
public class Item {
private BigInteger itemId;
private String name;
priave boolean saleable; //database column is not null
//getters and setters
}
//facelet
<h:form>
<p:dataTable id="id_itemList"
var="item"
value="#{itemManagerBean.allItemsForUser}" >
<p:column headerText="ID">
<h:outputText value="#{item.itemId}" />
</p:column>
<p:column headerText="Name">
<h:outputText value="#{item.name}" />
</p:column>
<p:column headerText="Saleable" >
<p:selectBooleanCheckbox value="#{item.saleable}" />
</p:column>
<p:column width="15" >
<p:commandButton id="id_saveRowButton" icon="ui-icon-disk"
title="Save" action="#{itemManagerBean.saveItem(item)}"/>
</p:column>
</p:dataTable>
</h:form>
You need to create a selectedItem property in ItemManagerBean and update its value when the user clicks on the commandButton:
In ItemManagerBean
private Item selectedItem;
// getter and setter
In the xhtml page
<p:column width="15" >
<p:commandButton id="id_saveRowButton" icon="ui-icon-disk"
title="Save" action="#{itemManagerBean.saveItem}">
<f:setPropertyActionListener value="#{item}" target="#{itemManagerBean.selectedItem}" />
</p:commandButton>
</p:column>
(Note that you don't need to pass item through saveItem method. Modify saveItem in the managed bean in order to make it work with selectedItem instead of accepting an input item).
Links:
example in the PrimeFaces showcase
Passing parameter to JSF action
BalusC blog

h:selectOneMenu in loop

I want to remember values from multiple h:selectOneMenu component in c:forEach loop. Now only last value from h:selectOneMenu is remember. I don't know how many h:selectOneMenu will appear.
<h:panelGrid
id="wynik"
columns="2"
border="0"
cellpadding="2"
cellspacing="0"
rowClasses="jsfcrud_odd_row,jsfcrud_even_row"
rules="all"
style="border:solid 1px">
<h:outputText id="ns" value="Numer stanowiska"/>
<h:outputText id="kontr" value="Kontroler"/>
<c:forEach
var="stanowisko"
begin="1"
end="#{stojakiController.selected.iloscstanowisk}"
step="1">
<h:column>
<h:outputText value="#{stanowisko}"/>
</h:column>
<h:column>
<h:selectOneMenu
id="kontroler_#{stanowisko}"
value="#{wyposazenieStojakaController.selected.kontroler}"
title="#{bundle.CreateWyposazenieStojakaTitle_kontroler}"
required="true"
requiredMessage="#{bundle.CreateWyposazenieStojakaRequiredMessage_kontroler}">
<f:selectItems value="#{kontroleryController.itemsAvailableSelectOne}"/>
</h:selectOneMenu>
</h:column>
</c:forEach>
</h:panelGrid>
This is not the right way to render a table based on a dynamically sized collection. You're binding the value of each row to one and same backing bean property. This property would get overwritten every time whenever each row needs to set the value. That's why you end up with only the value of the last row.
You should be using <h:dataTable> instead, not a <h:panelGrid> with a <c:forEach>. You should be preparing a collection of concrete model objects, not only the size of objects. For example,
public class Item {
private String value;
// ...
}
Then, in the (post)constructor of the backing bean you should prepare as many as necessary.
public class Bean {
private List<Item> items;
#PostConstruct
public void init() {
items = new ArrayList<Item>();
for (int i = 0; i < yourDesiredAmountOfItems; i++) {
items.add(new Item());
}
}
// ...
}
And here's a basic kickoff example how you should use it:
<h:dataTable value="#{bean.items}" var="item">
<h:column>
<h:selectOneMenu value="#{item.value}">
<f:selectItems value="#{bean.availableValues}" />
</h:selectOneMenu>
</h:column>
</h:dataTable>
When you submit the form, JSF will set the value of each row rightly in each separate item object associated with the row.

Resources