JSF Cannot save change to datatable row to the database - jsf

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

Related

Accessing DataTable item returns incorrect selected item when order is changed

To better read the contents of a cell within a dataTable, I used a commandLink to bring up a dialog box.
This works fine as long as the sortOrder of the dataTable is set to ascending. Upon using sortOrder desc and clicking the commandLink, the dialog brings up the result of the item that would have been there, had the sortOrder been ascending (in other words, in a desc dataTable -8,7,....,2,1- with 8 rows, clicking on row with id =2 will bring up the contents of row id=7).
What causes this mix-up in IDs? Am I not storing the actual clicked on item in the backing bean temporarily, which should not be affected by the sortOrder? IS there a better practice for what I am trying to accomplish?
PF version 5.3, JSF 2.2.7
dataTable and dialog
<p:dataTable id="improvementTable" var="improvement" widgetVar="improvementsTable" value="#{Controller.improvements}" sortBy="#{improvement.id}" sortOrder="descending">
<p:column headerText="ID">
<p:cellEditor>
<f:facet name="output">
<h:outputText value="#{improvement.id}" />
</f:facet>
<f:facet name="input">
<p:inputText id="modelInput" value="#{improvement.id}" />
</f:facet>
</p:cellEditor>
</p:column>
<p:column>
<p:commandLink id="detailOut" value="#{improvement.detail}" action="#{Controller.setSelectedImprovement(improvement)}" process="#this" oncomplete="PF('wDetail').show();" update=":dlgDetail" />
</p:column>
</p:dataTable>
</h:form>
<p:dialog id="dlgDetail" widgetVar="wDetail">
<h:outputText value="#{Controller.selectedImprovement.detail}" />
</p:dialog>
In the Bean
#ManagedBean (name="Controller")
#RequestScoped
public class Controller{
private List<Improvement> improvements;
private Improvement selectedImprovement;
#PostConstruct
public void load() {
CIMImprovementDao cimDao = new CIMImprovementDao();
improvements = cimDao.getAll();
}
public List<Improvement> getImprovements() {
return improvements;
}
public Improvement getSelectedImprovement() {
return selectedImprovement;
}
public void setSelectedImprovement(Improvement selectedImprovement) {
this.selectedImprovement = selectedImprovement;
}
}

Dynamic update primefaces component according to a autocomplete value

Someone can explain how to update an certain component in a view (example: dataScroller, dataList etc) using an autocomplete component ? I'm trying something with the ajax event "itemSelect" but with no success on how to proceed, any example, explanation, light will be a good help.
Some code (xhtml page)
<h:form id="frmPesquisarModalidade">
<p:autoComplete id="autoModalidade" multiple="true" value="#{matriculaBean.modalidadesSelecionadas}" completeMethod="#{matriculaBean.completeModalidade}"
var="modalidade" itemLabel="#{modalidade.nome}" itemValue="#{modalidade}" forceSelection="true">
<f:converter binding="#{modalidadeConverter}"/>
<f:ajax listener="#{matriculaBean.onItemSelect}" event="itemSelect" render="test"/>
<p:column style="width:10%">
<h:outputText value="#{modalidade.nome}"/>
</p:column>
</p:autoComplete>
<p:dataScroller id="dataScrollModalidadesSelecionadas" value="#{matriculaBean.modalidadesSelecionadas}" var="modalidade" chunkSize="6">
<h:panelGrid columns="2" cellpadding="5" id="test">
<h:outputText value="#{modalidade.nome}"/>
</h:panelGrid>
</p:dataScroller>
</h:form>
backing bean
#Named
#ViewScoped
public class MatriculaBean {
private List<Modalidade> modalidadesDisponiveis;
private List<Modalidade> modalidadesSelecionadas;
#Autowired
private ServicoModalidade servicoModalidade;
#PostConstruct
private void init(){
modalidadesDisponiveis = servicoModalidade.listar();
}
public List<Modalidade> completeModalidade(String busca) {
List<Modalidade> filtrados = new ArrayList<Modalidade>();
for (Modalidade mod : modalidadesDisponiveis) {
if (mod.getNome().contains(busca)) {filtrados.add(mod);}
}
return filtrados;
}
public void onItemSelect(SelectEvent event){
//????????
}
What you need to do in onItemSelect method is update the value of the target component, based on the selected item.
If you want to update dataScrollModalidadesSelecionadas:
public void onItemSelect(SelectEvent event){
//Get the selected item value
Modalidade m = new Modalidade();
m = event.getObject();
//Create/use a List method which can search the DB based on the selected item
modalidadesDisponiveis = servicoModalidade.listarPorModalidade(m);
}
And in the JSF, you just have to update the target component:
<p:autoComplete ...... >
<p:ajax listener="#{matriculaBean.onItemSelect}" event="itemSelect" update="dataScrollModalidadesSelecionadas"/>
</p:autoComplete>
I'm not sure if those options and properties you defined gonna work as expected, but the example above is the basics to update a component based on ItemSelect.
Also, I prefer using <p:ajax> rather than <f:ajax>
<h:form id="frmPesquisarModalidade">
<p:autoComplete id="autoModalidade" multiple="true" value="#{matriculaBean.modalidadesSelecionadas}" completeMethod="#{matriculaBean.completeModalidade}"
var="modalidade" itemLabel="#{modalidade.nome}" itemValue="#{modalidade}" forceSelection="true">
<f:converter binding="#{modalidadeConverter}"/>
<p:ajax event="itemSelect" update="dataScrollModalidadesSelecionadas"/>
<p:column style="width:10%">
<h:outputText value="#{modalidade.nome}"/>
</p:column>
</p:autoComplete>
<p:dataScroller id="dataScrollModalidadesSelecionadas" value="#{matriculaBean.modalidadesSelecionadas}" var="modalidade" chunkSize="6">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="#{modalidade.nome}"/>
</h:panelGrid>
</p:dataScroller>
</h:form>
solved!!! to resolve my issue i'd discovered theres no need to apply an backing bean logic withe the itemSelect event... just create an ajax event in the xhtml page and use the update attribute with the respective id! Thanks for help

disable a particular button in a datatable, jsf

I have a data table with with two columns- Title and Action
Title is populated from a list in a managed bean and for each title in the list the datatable has a button called Confirm under Action column.
When the user clicks on the Confirm button, a dialog is displayed with additional information and another button called Submit.
If the user hits the Submit button inside that dialog a variable confirmDate is set in the backing bean, of the confirmDate is not null, I need to disable the particular Confirm button under the Action column in the main data table. Right now if I disable it, all the Confirm button is getting disabled. How do I disable only the selected confirm button. Really appreciate your help on this.
main data table
<h:panelGrid id="notificationList" width="100%">
<h:panelGroup >
<p:dataTable var="dt" value="#
{myBean.listAll}" id="titles" rowKey="#{dt.id}">
<f:facet name="header">
<h:outputText value = "Title List"/>
</f:facet>
<p:column headerText ="Title">
<h:outputText value="#{dt.title}"/>
</p:column>
<p:column headerText="Action">
<p:commandButton id="nID"
value="Confirm"
oncomplete="myDialog.show();"
process="#this"
disabled= "#{not empty dt.confirmDate}
update="#form">
<f:setPropertyActionListener value="#{dt}" target="#
{myBean.selectedTitle}"/>
</p:commandButton>
</p:column>
</p:dataTable>
</h:panelGroup>
</h:panelGrid>
Hard to say with your code, maybe all your dt objects which you retrieve via listAll are identical objects. How do you set up the list?
Anyhow this should work (simplified):
<p:dialog widgetVar="dlg">
<p:commandButton value="Submit" action="#{myBean.updateNotificationConfirmDate}" oncomplete="dlg.hide()"
update="notificationList" />
</p:dialog>
<p:dataTable id="notificationList" var="dt" value="#{myBean.tableData}">
<p:column>
<p:commandButton value="Confirm" process="#this" disabled="#{!empty dt.confirmDate}" update="#form"
oncomplete="dlg.show();">
<f:setPropertyActionListener value="#{dt}" target="#{myBean.selectedTitle}" />
</p:commandButton>
</p:column>
</p:dataTable>
And the backing bean (whatever your DT is :)):
#ManagedBean
#ViewScoped
public class MyBean {
private List<DT> tableData = new ArrayList<DT>();
private DT selectedTitle;
public MyBean() {
tableData.add(new DT(1L, "title1", null));
tableData.add(new DT(2L, "title2", null));
tableData.add(new DT(3L, "title3", null));
tableData.add(new DT(4L, "title4", null));
}
public DT getSelectedTitle() {
return selectedTitle;
}
public void setSelectedTitle(DT selectedTitle) {
this.selectedTitle = selectedTitle;
}
public List<DT> getTableData() {
return tableData;
}
public void updateNotificationConfirmDate() {
selectedTitle.setConfirmDate(Calendar.getInstance());
}
}

JSF Cannot set the current variable entity in the managed bean in order to understand which entity has been selected by the user

Im trying to implement the modification of an entity in JSF using Primefaces.
My main view, which lists the users is the following:
<p:growl id="growlEditUnit" showDetail="true" life="12000" />
<p:dialog id="dialogEditUnit" header="Edit Unit" widgetVar="editUnitDialog" showEffect="fade" hideEffect="fade" resizable="false" >
<ui:include src="editUnit.xhtml" />
</p:dialog>
<h:form id="form2">
<p:dataTable id="units" var="unit" value="#{unitController.unitsOfLoggedInUser}" >
<f:facet name="header">
Click Edit or Delete after selecting a unit to modify or remove it
</f:facet>
<p:column headerText="Code">
#{unit.unitCode}
</p:column>
<p:column headerText="Name">
#{unit.unitName}
</p:column>
<p:column headerText="Semester" >
#{unit.semester}
</p:column>
<p:column headerText="Academic Year">
#{unit.academicYear}
</p:column>
<p:column headerText="Twitter Username">
#{unit.twitterUsername}
</p:column>
<p:column headerText="Actions">
<p:commandButton id="editButton" value="Edit" action="#{unitController.setCurrent(unit)}" update=":dialogEditUnit" oncomplete"editUnitDialog.show()" />
</p:column>
</p:dataTable>
</h:form>
This view lists all the data correctly. However, when I press the current, my aim is to set the current attribute of the managed bean (code listed below) with the unit based on the button clicked. After this I try to update the edit dialog, so it will be filled with the values of that unit, and then make it visible using the oncomplete attribute. However, it seems that the managed been method setCurrent(unit) is never called when clicking the edit button. Subsequently the dialog is shown empty. Can someone help me with what am I doing wrong?
I am posting the managed bean code too.
#ManagedBean(name = "unitController")
#ViewScoped
public class UnitController implements Serializable {
private Unit current;
private List<Unit> unitsOfLoggedInUser;
#ManagedProperty(value="#{loginController.checkedUser}")
private Lecturer lecturer;
#EJB
private web.effectinet.ejb.UnitFacade ejbFacade;
#EJB
private web.effectinet.ejb.LecturerFacade lecturerFacade;
public UnitController() {
}
#PostConstruct
public void init(){
if (lecturer.getLecturerId() == null)
unitsOfLoggedInUser = null;
else
unitsOfLoggedInUser = (List<Unit>) lecturer.getUnitCollection();
}
public List<Unit> getUnitsOfLoggedInUser() {
return unitsOfLoggedInUser;
}
public void setCurrent(Unit current) {
this.current = current;
}
public Lecturer getLecturer() {
return lecturer;
}
public void setLecturer(Lecturer lecturer) {
this.lecturer = lecturer;
}
The action attribute of the commandButton is rendered without information on the value of the unit variable.
To pass the unit to the action method of your managed bean, then you need to pass the ID of unit in an <f:param> child tag of commandButton.
<p:commandButton action="#{managedBean.actionMethod}" ........>
<f:param name="unitid" value="#{unit.id}" />
</p:commandButton>
From your action method you can get the request parameter by the name from the ExternalContext and this will give you the ID of the unit that the commandButton was pressed for in your dataTable.

JSF datatable: adding and removing rows clear rows values

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

Resources