I have a screen that I show some records with datatable from primefaces
enter code here
1) In my bean, I have two lists, the first one I enter the records returning from the database,
and the other is used to store the selected screen items.
#Getter #Setter
private List<RecorsDTO> recordsList;
#Getter #Setter
private List<RecorsDTO> selectedRecordsList;
In another screen, I show the IDs selected in the previous screen, for that I used the repeat
function of primefaces
<h:panelGroup>
<h:outputText value="#{selectedRecords.id}" />
</h:panelGroup>
The problem here is that it only shows the first list item, for example:
Records Selected in first screen: 100, 101
Records displayed on second screen: 100
2) I also need to show other attributes of the List, but these outside the repeat block, for example:
<h:panelGroup>
<h:outputText value="#{selectedRecords.id}" />
</h:panelGroup>
</ui:repeat>
<h:panelGroup>
<h:outputText value="#{selectedRecords.nome}" />
</h:panelGroup>
The problem here is that I can't access var = selectedRecords out of the repeating block, I tried to use
the dataGrid component to have is a var visible inside and outside the repeating block, but it didn't work either.
Any ideas that might help me in this case?
thanks for your feedback, I managed to solve the problem as below:
1) This issue was related to duplicate records, my Bean myBBean.selectedRecordsList was returning two records
equal (100, 100) and then within the repeat block he would perform a sort of "DISTINCT" and display only a record (100).
2) The var = selected records that I defined within block repetition are valid only within it and for access outside of
repetition block, I failed not to mention the index as it is a list as below
value="#{myBBean.selectedRecordslist.get(0).name}"
Related
i have p:selectOneMenu, all values are viewed correctly but just first on my list can be chosen for example, on my list i have e-mail addresses, i can choose everyone but mail is sending just on first of them on list. My JSF code:
<p:dataTable value="#{additionalOrdersBean.additionalOrdersList}"
var="additionalOrders" rowIndexVar="lp" id="myTable" editable="true>
<p:column>
<p:selectOneMenu id="recipient" value="#{additionalOrdersBean.mailTo}" converter="#{mailConverter}" required="true" requiredMessage="#{loc['fieldRequired']}">
<f:selectItems value="#{buildingBean.buildingList2}" var="mail" itemLabel="#{mail.mail1}" itemValue="#{mail.mail1}" />
<f:selectItems value="#{buildingBean.buildingList2}" var="mail" itemLabel="#{mail.mail2}" itemValue="#{mail.mail2}" />
<f:selectItems value="#{buildingBean.buildingList2}" var="mail" itemLabel="#{mail.mail3}" itemValue="#{mail.mail3}" />
</p:selectOneMenu>
<h:message for="recipient" style="color:red"/>
<h:commandButton value="#{loc['send']}" action="#{additionalOrdersBean.sendProtocol()}" onclick="sendProtocolDialog.hide()"/>
</p:column>
</p:dataTable>
My bean:
private String mail1;
private String mail2;
private String mail3;
public List<Building> getBuildingList2() {
buildingList2 = getBldRepo().findByLocationId(lid);
return buildingList2;
}
Can anyone know how to fix it? I wont to send e-mail on choosen address not just on first on my list. Thanks
You seem to expect that only the current row is submitted when you press the command button in the row. This is untrue. The command button submits the entire form. In your particular case, the form is wrapping the whole table and thus the dropdown in every single row is submitted.
However, the value attribute of all those dropdowns are bound to one and same bean property instead of to the currently iterated row.
The consequence is, for every single row, the currently selected value is set on the bean property, hereby everytime overriding the value set by the previous row until you end up with the selected value of the last row.
You've here basically a design mistake and a fundamental misunderstanding of how basic HTML forms work. You basically need to move the form to inside the table cell in order to submit only the data contained in the same cell to the server.
<p:dataTable ...>
<p:column>
<h:form>
...
</h:form>
</p:column>
</p:dataTable>
If that is design technically not an option (for example, because you've inputs in another cells of the same row, or outside the table which also need to be sent), then you'd need to bind the value attribute to the currently iterated row instead and pass exactly that row to the command button's action method:
<p:dataTable value="#{additionalOrdersBean.additionalOrdersList}" var="additionalOrders" ...>
<p:column>
<p:selectOneMenu value="#{additionalOrders.mailTo}" ...>
...
</p:selectOneMenu>
...
<h:commandButton value="#{loc['send']}" action="#{additionalOrdersBean.sendProtocol(additionalOrders)}" ... />
</p:column>
</p:dataTable>
It's by the way not self-documenting and quite confusing to have a plural in the var name. Wouldn't you rather call it additionalOrder? Or is the javabean/entity class representing a single additional order really named AdditionalOrders?
Unrelated to the concrete problem: doing business logic in getter methods is killing your application. Just don't do that. See also Why JSF calls getters multiple times.
JSF-2.0, Mojarra 2.1.19, PrimeFaces 3.4.1
Summary of the problem: Have a p:inputText inside p:dataTable and inputText action fired by p:remoteCommand which passes the dataTable row index as a parameter with f:setPropertyActionListener. But it always passes the last row of the dataTable, not the index of the row which includes currently clicked p:inputText.
As it can be seen from my previous questions, I am trying to use p:inputText as a comment taker for a status like in Facebook or etc. Implementation includes a p:dataTable. It's rows represents each status. Seems like:
<p:dataTable id="dataTable" value="#{statusBean.statusList}" var="status"
rowIndexVar="indexStatusList">
<p:column>
<p:panel id="statusRepeatPanel">
<p:remoteCommand name="test" action="#{statusBean.insertComment}"
update="statusRepeatPanel">
<f:setPropertyActionListener
target="#{statusBean.indexStatusList}"
value="#{indexStatusList}">
</f:setPropertyActionListener>
</p:remoteCommand>
<p:inputText id="commentInput" value="#{statusBean.newComment}"
onkeypress="if (event.keyCode == 13) { test(); return false; }">
</p:inputText>
</p:panel>
</p:column>
</p:dataTable>
Upper code says when the press enter key, fire p:remoteCommand which calls the insert method of the managed bean.
#ManagedBean
#ViewScoped
public class StatusBean {
List<Status> statusList = new ArrayList<Status>();
public int indexStatusList;
public String newComment
//getters and setters
public void insertComment() {
long statusID = findStatusID(statusList.get(indexStatusList));
statusDao.insert(this.newComment,statusID)
}
Let's debug together; assuming there are three statuses shown in the p:dataTable, click in the p:inputText which in the second status(index of 1), type "relax" and press the enter key.
In the debug console, it correctly shows "relax", but it finds the wrong status because indexStatusList has the value of 2 which belongs the last status in the p:statusList. It must be 1 which is the index of p:inputText that clicked on the dataTable row.
I think problem is about p:remoteCommand which takes the last index on the screen.
How it works?
Let's imagine there is a p:commandLink instead of p:remoteCommand and p:inputText:
<p:commandLink action=#{statusBean.insertComment>
<f:setPropertyActionListener target="#{statusBean.indexStatusList}"
value="#{indexStatusList}"></f:setPropertyActionListener>
This component successfully passes the indexStatusList as currently clicked one.
Conceptual problem in this solution lies in way how p:remoteCommand works. It creates JavaScript function whose name is defined in name attribute of p:remoteCommand. As you putted this in dataTable it will iterate and create JavaScript function called test as many times as there is rows in this table, and at the end last one will be only one. So, solution can be in appending index at the name of the remoteCommand but that is bad, because you will have many unnecessary JavaScript functions. Better approach would be to create one function an pass argument to it. So define remoteCommand outside of datatable:
<p:remoteCommand name="test" action="#{statusBean.insertComment}" update="statusRepeatPanel">
and call test function like this in your onkeypress event:
test([{ name: 'rowNumber', value: #{indexStatusList} }])
This will pass rowNumber parameter in your AJAX request. In backing bean's insertComment() method you can read this parameter and do with it anything you want:
FacesContext context = FacesContext.getCurrentInstance();
Map map = context.getExternalContext().getRequestParameterMap();
Integer rowNumber = Integer.parseInt(map.get("rowNumber").toString());
NOTE: as you are updating panel in each row, maybe you can change update attribute of remoteCommand to #parent so this will work for all rows.
EDIT: You can update the specific panel in specific row with following code in Java method:
RequestContext.getCurrentinstance().update("form:dataTable:" + rowNumber + ":statusRepeatPanel")
I have data table like below:
<p:dataTable id="transactionTableID" binding="#{transactionReportBean.dataTable}"
value="#{transactionReportBean.summarizedDateWiseTransactionList}"
var="transacVAR" rowKey="#{transacVAR.OID}" style="float:center;">
<p:column headerText="#{build.reportSelection}">
<p:selectOneMenu id="" value="#{transactionReportBean.summaryTxnReportSelected}" >
<f:selectItem itemLabel="-Select One-" itemValue="-Select One-"/>
<f:selectItem itemLabel="#{build.matchedreport}" itemValue="#{build.matchedreport}"/>
<f:selectItem itemLabel="#{build.carryforwardreport}" itemValue="#{build.carryforwardreport}"/>
<f:selectItem itemLabel="#{build.exceptionreport}" itemValue="#{build.exceptionreport}"/>
</p:selectOneMenu>
<p:commandButton update="#form" value="Generate" ajax="false"
actionListener="#{transactionReportBean.getReportSelected}" />
</p:column>
</p:dataTable>
And an action listener method like below:
public void getReportSelected(){
if(this.SummaryTxnReportSelected.equalsIgnoreCase("-Select One-")||this.SummaryTxnReportSelected.equalsIgnoreCase(null)){
this.message = AlgoMessageHandler.getMessage(AlgoMessageHandler.USER_MSG, "ERR0048");
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR,
this.getMessage(), AFTSConstants.BLANK_STRING));
} else {
this.selectedDtTxn= (TransactionsSummaryReportVO) dataTable.getRowData();
System.out.println("listener called "+this.getSummaryTxnReportSelected()+" Selected transaction ID "+selectedDtTxn.getExecutionID());
String reportname = generateJasperReport(this.getSummaryTxnReportSelected(),AFTSConstants.SUMMARY_TXN_REPORT,this.selectedDtTxn);
System.out.println("Report Name"+reportname);
this.summaryReportStored= AFTSConstants.SUMMARY_REPORT_STORED_PATH+reportname+".pdf";
System.out.println(this.summaryReportStored);
this.setRenderGenerateButton(false);
}
}
That method is about to generate report based on the dropdown item we are selecting. In my table I have 10 rows, each row contains one dropdown having 3 items. There is a "generate" button. After selection of dropdown items and clicking the "generate" button, for first 9 rows it doesn't give component IDs and for 10th row it's working.
Here the problem is not about generating report, the problem is JSF doesn't take different component IDs for each dropdown in each row. I tried id="reportID", but no success. I tried to give row key value of table rowKey="#{transacVAR.OID}" as id="#{transacVAR.OID}", but it throws an exception like "empty component id".
How am I supposed to solve this problem?
Your problem has nothing to do with component IDs. Your problem is caused because you're binding submitted values of all rows to one and same bean property. JSF processes the submitted values based on the order the input elements appear in the tree. So, JSF will call the very same setter method with the submitted value for every single row until the last row is reached. You end up with the value of the last row. If you have placed a breakpoint on the setter method, you'd have noticed that it's subsequently been called with different values from every individual row.
You need to bind the value to the currently iterated row object instead.
<p:selectOneMenu value="#{transacVAR.summaryTxnReportSelected}">
I stumbled upon a JSF / PrimeFaces problem and although I managed to get it working by changing the scope of the backing bean I would still like to understand why it failed in the first case. So, here's a narrowed-down example that reproduces the behavior:
We have a dead simple xhtml page that displays two p:dataTables in a form, one below the other. The top p:dataTable displays numbers and the second their divisors. So we have a classical master-detail view. A button allows us to update the page so when a new number is selected from the top table we can view its divisors on the bottom table:
<h:form id="NUMBERS-form">
<p:dataTable id="dt1" var="item" value="#{numbersController.divisorSets}"
rowKey="#{item}" rows="10" selection="#{numbersController.selectedDivisorSet}"
selectionMode="single">
<p:column>
#{item}
</p:column>
</p:dataTable>
<p:dataTable id="dt2" var="item" value="#{numbersController.divisors}"
rowKey="#{item}" rows="10" selection="#{numbersController.selectedDivisor}"
selectionMode="single">
<p:column id>
#{item}
</p:column>
</p:dataTable>
<p:commandButton id="Update" ajax="true" update=":NUMBERS-form"
action="#{numbersController.foo}" value="update"/>
</h:form>
The backing bean defines two read-only collections: one for the DivisorSets (i.e. the numbers whose divisors we want to find) and another one for the divisors of currently selected number. It also has two fields and property getters/setters for the currently selected number and the currently selected divisor of that number:
#ManagedBean
#ViewScoped // if this is toggled to #RequestScoped it stops working
public class NumbersController implements Serializable {
private static final Logger l = Logger.getLogger(NumbersController.class.getName());
public List<DivisorSet> getDivisorSets() {
List<DivisorSet> retValue = new ArrayList<DivisorSet>();
for (int i = 10 ; i < 20 ; i++)
retValue.add( new DivisorSet(i) );
return retValue;
}
public List<Integer> getDivisors() {
if (selectedDivisorSet != null)
return selectedDivisorSet.getDivisors();
else return null;
}
private DivisorSet selectedDivisorSet;
// getter and setter ...
private Integer selectedDivisor;
// getter and setter ...
public String foo() { return null; }
}
When the page first loads, only the top p:dataTable is populated. When a row of the top table is selected and the p:commandButton pressed, the divisors of that number are fetched on the bottom p:dataTable. So far so good. Here comes the problem: when a row is selected from the top table and a row also selected from the bottom table and the p:commandButton pressed, the logging messages I have in the setters reveal that:
when the scope of the backing bean is set to View both selected numbers are set correctly in the update model values phase
when the scope of the backing bean is set to Request only the selected number from the top table is set correctly, the setter for the selectedDivisor field (that is linked with the bottom p:dataTable) carries a value of 0 (or null in other examples I've tried with different classes used).
Note that there is no business logic in this trivial example to make it necessary to select a number from the bottom p:dataTable - this is just a narrowed-down version of the same problem I had in a real context. Can anybody explain the steps in the JSF lifecycle that result in the bottom table selected value not set properly when view is RequestScoped (as opposed to ViewScoped that succeeds)?
The Problem
We have a swing based front end for an enterprise application and now are implementing a (for now simpler) JSF/Seam/Richfaces front end for it.
Some of the pages include fields that, when edited, should cause other fields to change as a result. We need this change to be shown to the user immediately (i.e. they should not have to press a button or anything).
I have implemented this successfully using h:commandButton and by adding onchange="submit()" to the fields that cause other fields to change. That way, a form submit occurs when they edit the field, and the other fields are updated as a result.
This works fine functionally, but especially when the server is under significant load (which happens often) the form submits can take a long time and our users have been continuing to edit fields in the meantime which then get reverted when the responses to the onchange="submit()" requests are rendered.
To solve this problem, I was hoping to achieve something where:
Upon editing the field, if required, only that field is processed and only the fields it modifies are re-rendered (so that any other edits the user has made in the meantime do not get lost).
Upon pressing a button, all fields are processed and re-rendered as normal.
The (Unstable) Solution
Okay, I think it might be easiest to show a bit of my page first. Note that this is only an excerpt and that some pages will have many fields and many buttons.
<a4j:form id="mainForm">
...
<a4j:commandButton id="calculateButton" value="Calculate" action="#{illustrationManager.calculatePremium()}" reRender="mainForm" />
...
<h:outputLabel for="firstName" value=" First Name" />
<h:inputText id="firstName" value="#{life.firstName}" />
...
<h:outputLabel for="age" value=" Age" />
<h:inputText id="age" value="#{life.age}">
<f:convertNumber type="number" integerOnly="true" />
<a4j:support event="onchange" ajaxSingle="true" reRender="dob" />
</h:inputText>
<h:outputLabel for="dob" value=" DOB" />
<h:inputText id="dob" value="#{life.dateOfBirth}" styleClass="date">
<f:convertDateTime pattern="dd/MM/yyyy" timeZone="#{userPreference.timeZone}" />
<a4j:support event="onchange" ajaxSingle="true" reRender="age,dob" />
</h:inputText>
...
</a4j:form>
Changing the value of age causes the value of dob to change in the model and vice versa. I use reRender="dob" and reRender="age,dob" to display the changed values from the model. This works fine.
I am also using the global queue to ensure ordering of AJAX requests.
However, the onchange event does not occur until I click somewhere else on the page or press tab or something. This causes problems when the user enters a value in say, age, and then presses calculateButton without clicking somewhere else on the page or pressing tab.
The onchange event does appear to occur first as I can see the value of dob change but the two values are then reverted when the calculateButton request is performed.
So, finally, to the question: Is there a way to ensure that the model and view are updated completely before the calculateButton request is made so that it does not revert them? Why is that not happening already since I am using the AJAX queue?
The Workarounds
There are two strategies to get around this limitation but they both require bloat in the facelet code which could be confusing to other developers and cause other problems.
Workaround 1: Using a4j:support
This strategy is as follows:
Add the ajaxSingle="true" attribute to calculateButton.
Add the a4j:support tag with the ajaxSingle="true" attribute to firstName.
The first step ensures that calculateButton does not overwrite the values in age or dob since it no longer processes them. Unfortunately it has the side effect that it no longer processes firstName either. The second step is added to counter this side effect by processing firstName before calculateButton is pressed.
Keep in mind though that there could be 20+ fields like firstName. A user filling out a form could then cause 20+ requests to the server! Like I mentioned before this is also bloat that may confuse other developers.
Workaround 2: Using the process list
Thanks to #DaveMaple and #MaxKatz for suggesting this strategy, it is as follows:
Add the ajaxSingle="true" attribute to calculateButton.
Add the process="firstName" attribute to calculateButton.
The first step achieves the same as it did in the first workaround but has the same side effect. This time the second step ensures that firstName is processed with calculateButton when it is pressed.
Again, keep in mind though that there could be 20+ fields like firstName to include in this list. Like I mentioned before this is also bloat that may confuse other developers, especially since the list must include some fields but not others.
Age and DOB Setters and Getters (just in case they are the cause of the issue)
public Number getAge() {
Long age = null;
if (dateOfBirth != null) {
Calendar epochCalendar = Calendar.getInstance();
epochCalendar.setTimeInMillis(0L);
Calendar dobCalendar = Calendar.getInstance();
dobCalendar.setTimeInMillis(new Date().getTime() - dateOfBirth.getTime());
dobCalendar.add(Calendar.YEAR, epochCalendar.get(Calendar.YEAR) * -1);
age = new Long(dobCalendar.get(Calendar.YEAR));
}
return (age);
}
public void setAge(Number age) {
if (age != null) {
// This only gives a rough date of birth at 1/1/<this year minus <age> years>.
Calendar calendar = Calendar.getInstance();
calendar.set(calendar.get(Calendar.YEAR) - age.intValue(), Calendar.JANUARY, 1, 0, 0, 0);
setDateOfBirth(calendar.getTime());
}
}
public Date getDateOfBirth() {
return dateOfBirth;
}
public void setDateOfBirth(Date dateOfBirth) {
if (notEqual(this.dateOfBirth, dateOfBirth)) {
// If only two digits were entered for the year, provide useful defaults for the decade.
Calendar calendar = Calendar.getInstance();
calendar.setTime(dateOfBirth);
if (calendar.get(Calendar.YEAR) < 50) {
// If the two digits entered are in the range 0-49, default the decade 2000.
calendar.set(Calendar.YEAR, calendar.get(Calendar.YEAR) + 2000);
} else if (calendar.get(Calendar.YEAR) < 100) {
// If the two digits entered are in the range 50-99, default the decade 1900.
calendar.set(Calendar.YEAR, calendar.get(Calendar.YEAR) + 1900);
}
dateOfBirth = calendar.getTime();
this.dateOfBirth = dateOfBirth;
changed = true;
}
}
What is the scope of your bean? When the button is executed, it's a new request and if your bean is in request scope, then previous values will be gone.
So, finally, to the question: Is there a way to ensure that the model and view are updated completely before the calculateButton request is made so that it does not revert them?
What you could do is disable the submit button from the time you initiate your ajax request until your ajax request completes. This will effectively prevent the user from pressing the submit button until it resolves:
<a4j:support
event="onblur"
ajaxSingle="true"
onsubmit="jQuery('#mainForm\\:calculateButton').attr('disabled', 'disabled');"
oncomplete="jQuery('#mainForm\\:calculateButton').removeAttr('disabled');" />
One thing that is additionally helpful with this approach is if you display an "ajaxy" image to the end user while this is happening so that they intuitively understand that stuff is happening that will resolve soon. You can show this image in the onsubmit method as well and then hide it oncomplete.
EDIT:
The issue may just be that you need to add the process attribute to your a4j:commandButton. This attribute specifies the components by id that should participate in the model update phase:
<a4j:commandButton
id="calculateButton"
value="Calculate"
action="#{illustrationManager.calculatePremium()}"
process="firstName"
reRender="mainForm" />
i guess i can provide another work-around.
we should have two flags on js level:
var requestBlocked = false;
var requestShouldBeSentAfterBlock = false;
h:inputText element blocks the ajax request on blur:
<h:inputText id="dob" onblur="requestBlocked = true;" ...
a4j:commandButton sends the request if requestBlocked is false:
<a4j:commandButton id="calculateButton"
onkeyup="requestShouldBeSentAfterBlock = requestBlocked;
return !requestBlocked;" ...
a4j:support sends the request if requestShouldBeSentAfterBlock is true:
<a4j:support event="onchange"
oncomplete="requestBlocked = false;
if (requestShouldBeSentAfterBlock) {
requestShouldBeSentAfterBlock = false;
document.getElementById('calculateButton').click();
}" ...
since oncomplete block works after all needed elements are re-rendered, things will work in the needed order.
It looks like a reason is somewhere in getters/setters.
For example one of the possibilities: when no ajaxSingle=true and the calculate button is clicked. All the values are set to the model, so both setAge and setDateOfBirth are invoked. And it may happen so that setDateOfBirth is invoked before setAge.
Looking closer at setAge method it in fact resets the date to the beginning of the year, even though the date could have had the right year already.
I would recommend simplifying the logic first. For example have separate disconnected fields for year and birth day, and check if the issue is still reproducible to find minimal required conditions to reproduce.
Also from user experience standpoint, a common practice is to do something like the following, so the event fires once user stops typing:
<a4j:support event="onkeyup"
ajaxSingle="true"
ignoreDupResponses="true"
requestDelay="300"
reRender="..."/>