I require some advice on a query regarding record navigation.
I have a datatable that is displayed with the results of an Hibernate query. The datatable looks something like this:
<h:dataTable value="#{myBean.dataList}" var="dataItem">
<h:column>
<f:facet name="header">
<h:outputText value="ID" />
</f:facet>
<h:outputText value="#{dataItem.id}" />
</h:column>
The user then selects a row and it displays a form with the details on a JSF form.
What I would like to do is allow the user to go to the next row in the results table from the JSF form without going 'back' to the results table.
Is this possible?
You can do a ajax call on click of Next button present on the form. When the user presses Next, on default event "action", you can write code in a managed bean method which will be called through the listener property of f:ajax. in this method call, you can set the values of different fields on the form depending on the Id of the next record. These values may be used by different components on your form.
<h:commandButton value="Next">
<f:ajax event="action" execute="#this" render="#form" listener="#{myBean.populateNextRecord}"/>
</h:commandButton>
Related
I have an h:dataTable inside of an h:form, where each row has it's own h:commandButton type="submit" action="#{bean.saveChanges(item)}".
f:inputs are declared as required and they also need to match a pattern.
If every input is in the right format, then it works fine.
Otherwise it needs only one input to be wrong and an updating function on a commandButton corresponding to a completely different item in another row seems not to be called, therefore not updated in the database.
Also only the wrong row's validation message is displayed and the changes are maintained in the view by a (backing Spring view scoped) bean, so the user might actually think, that the initial row was indeed updated in the database too.
Is there a way, how to separate individual rows of the h:dataTable, so that the validation messages of another row does not stop other items from being updated by the method of a (Spring/backing) bean?
Use ajax to process/execute only the current row. You can achieve that by explicitly specifying the client IDs of the input components in <f:ajax execute>.
<h:form>
<h:dataTable ...>
<h:column>
<h:inputText id="foo" ... />
</h:column>
<h:column>
<h:inputText id="bar" ... />
</h:column>
<h:column>
<h:inputText id="baz" ... />
</h:column>
<h:column>
<h:commandButton ...>
<f:ajax execute="foo bar baz #this" ... />
</h:commandButton>
</h:column>
</h:dataTable>
</h:form>
This won't process the inputs in other rows. Use if necessary <f:ajax render> to update the <h:message(s)> associated with the inputs.
See also:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
The required on the input cause the Process validation to fail and the render response to be invoked.
A simple solution could be You could remove the required from the input and handle the case in you managed bean. Since the action would move on till Phase 5: Invoke application the valid data can be saved. For all invalid rows highlight the row by having a boolean in you data model.
I have a counter in a column of a datatable. Once the counter reaches a certain time, I need to change the background color of that column only. The data for the table is being pulled from a database. I'm using a4j:poll to reRender the column but the issue is that the entire table is rendered. Some code below:
<a4j:region>
<h:form>
<a4j:poll id="poll" interval="1000" enabled="true" reRender="blink" limitToList="true" />
</h:form>
</a4j:region>
<h:form id="form1">
<a4j:outputPanel id="panel1" ajaxRendered="true">
<h:dataTable id="blinks" styleClass="tableClass" value="#{bean.list}" var="_item">
<h:column id="blink">
<f:facet name="header">
<h:outputText value="Header1" />
</f:facet>
<div id="div1" class="#{bean.check() ? 'red' :''}">
<h:outputText value="Counter text (counts seconds)" />
</h:column>
</h:dataTable>
</a4j:outputPanel>
</h:form>
If you meet the following minimum req' JSF 2.0, EL 2.1 and Servlet 2.5
You can try out the Ajax#updateColumn() by Omnifaces , there is an example on how to use it in the showcase
Note that Ajax#updateRow() and Ajax#updateColumn() can only update
cell content when it has been wrapped in some container component with
a fixed ID.
Maybe you can use a push server side events to trigger the update on client side instead of use polling which performs full form.
http://livedemo.exadel.com/richfaces-demo/richfaces/push.jsf?tab=choices&cid=987178
A full description how to use this: Using RichFaces Push and DataTable Ajax Keys for Partial Tables Updates
you should re render by column id, but because you have data which coming from database, and it is a one list, can you confirm what you can do call which real can update one column?
So, I have a session scoped bean that has a 2 lists of string values. This bean is called AgreementBean.java. I'm showing these lists in a page called agreementDetail.xhtml like this
<h:dataTable id="servers" value="#{agreement.licenseServerNames}" var="licenseServerName">
<h:column>
<h:inputText value="#{licenseServerName}"/>
</h:column>
</h:dataTable>
Computer IDs<br/>
<h:dataTable id="idNames" value="#{agreement.computerIdNames}" var="computerIdName">
<h:column>
<h:inputText value="#{computerIdName}"/>
</h:column>
</h:dataTable>
As you can see, I expect user input on these values. I need to make an Ajax call to update those values when the customer clicks on a "Save button". Here's the button's jsf code.
<script type="text/javascript">
function showAlert(data){
alert("SAVED!");
}
</script>
<h:commandButton value="Save" immediate="true" type="submit" action="#{agreement.save}">
<f:ajax onevent="showAlert"/>
</h:commandButton><br/><br/>
The "Save" bean method does nothing right now, except for logging the values stored in both lists.
When clicking on the button, 2 things are happening right now. If the customer changed the values on the inputFields, the bean's list's value is set to null. If the customer didn't change anything, then the bean's original value is kept.
How can I fix this? Thanks!
There are 2 problems with your command button:
<h:commandButton value="Save" immediate="true" type="submit" action="#{agreement.save}">
<f:ajax onevent="showAlert"/>
</h:commandButton>
immediate="true" causes that only input elements which also have immediate="true" set will be processed. However, your inputs don't have this attribute set.
<f:ajax execute> defaults to #this, causing that only the command button itself is processed during form submit. Your inputs are therefore skipped in processing.
Get rid of the misplaced attribute and tell <f:ajax> to execute the entire form.
<h:commandButton value="Save" type="submit" action="#{agreement.save}">
<f:ajax execute="#form" onevent="showAlert"/>
</h:commandButton>
See also:
Why was "immediate" attribute added to the EditableValueHolders?
Then there's a potential problem with your data model. You seem to be supplying a List<String> to the data table instead of a List<SomeBean>. The String is immutable and doesn't have a setter for the value. A <h:inputText value="#{string}"> is never going to work. For the first table, you really need to have a LicenseServer bean with a private String name property. You can then use it as follows:
<h:dataTable value="#{agreement.licenseServers}" var="licenseServer">
<h:column>
<h:inputText value="#{licenseServer.name}"/>
See also:
Why input (for example h:inputText) nested in h:dataTable do not update Bean model?
Unrelated to the concrete problem, are you aware that onevent is invoked 3 times? For the purpose you'd probably like to check if ajax event status equals to "success".
See also:
Proccess onclick function after ajax call <f:ajax>
I really love actionListener and the possibility to pass whole objects as as parameter, instead needing to pass values as String or creating (hidden) form fields. I'm using JSF 2.1 (Mojarra) and RichFaces (for popupPanel).
Currently I'm stuck with the following problem:
I create a table with a button that opens a popup. In that popup, the user can edit the data of the current user/object in the table.
When I click the button in the popup to save the edits, how can I submit the values from the popup AND tell the bean action which userObject I'm edited?
Currently, my workaround is using a hidden inputText field in the popup, but I don't like it this way. Is there an alternative?
This is what I try to achieve (minimized):
<h:datatable value="#{bean.users}" var="user">
<h:column>
Username #{user.name}
</h:column>
<h:column>
<input onclick="showPopup()"/>
</h:column>
</h:datatable>
<rich:popupPanel>
<h:inputText value="#{bean.text}" />
<h:commandButton value="Action" actionListener="#{bean.doSomething}">
<f:attribute name="selected" value="#{userObjectFromDatatable}" /> <-- HOW? -->
</h:commandButton>
</rich:popupPanel>
Looks pretty straightforward for you to preserve the selected the userObject in a conversation-like scope as in #ViewScoped. See this article for details on the #ViewScope. As an example, Declare a variable of the desired type as an instance variable in your backing bean
UserObject userObject;
//getters and setters
In your table you'll now have something like the following to set the selected object in your backing bean
<h:commandButton value="Action" actionListener="#{bean.doSomething}">
<f:setPropertyActionListener value="#{user}" target="#{bean.userObject}"/>
</h:commandButton>
By setting the variable in your backing bean from within the table, the viewscope will ensure that any other operation you perform on that object will be with the same instance, provided you stay on the same JSF view and you do not navigate away from it.
Problem is simple. Page has some textfields and user must be able to write into as many of them as he needs. When user starts to fill last textfield then new empty textfield must be added.
Currently i am able to add rows with ajax but focus gets lost. Bean keeps track of total number of rows and if currently focused row is last then new item is added to list and datatable rerendered. How to keep the focus in input textfield where it was before rendering. I can also use openfaces features.
<h:form id="myform">
<h:dataTable id="table" value="#{ajaxTestBean.rows}" var="rows">
<h:column>
<h:inputHidden id="inputtext" binding="#{ajaxTestBean.input}" value ="#{rows.rownum}"></h:inputHidden>
<h:inputText value="#{rows.text}">
<f:ajax event="focus" listener="#{ajaxTestBean.action}" render=":myform"></f:ajax>
</h:inputText>
</h:column>
</h:dataTable>
</h:form>