I have the next structure in my xhtml
<p:panel>
<p:acordeonPanel>
<p:tab>
<h:form>
<table>
<tr>td><commandButton action="#{myBean.searchAnimals}"update=":form:partidos" ></td></tr>
</table>
</h:form>
</p:tab>
</p:acordeonPanel>
</p:panel>
<p:panel>
<h:form id="form">
<p:dataTable id="partidos" value="#{myBean.foundAnimals}">
</h:form>
....
The method searchAnimals() it´s OK, it returns the Animal items, but the dataTable doesn't refresh, but in the java code (managedBean) the ArrayList contains the items.
What can i do? Thanks
EDIT:
I have de h: and the p: suffix correctly (i think so), the code is part of the complete code but is the fragment that doesn't work correctly. In the first panel i have a filter controls (by category, by date, etc.) and the function of the command button is call a function that execute a query on the database, this function is well because it's filling the ArrayList with the resultset (myBean.foundAnimals) but these items doens't refresh on the view (dataTable) :(
You should use an <h:form> for both and set the render value from your commandButton to rendered=":form" to achieve rerendering the form after clicking the commandButton.
Related
Let's say, I have such .xhtml
<h:form id="form">
<p:dataList id="carList" value="#{myBean.cars}" var="car">
#{car.brand}, #{car.year}
</p:dataList>
<p:commandButton value="Add new car" actionListener="#{myBean.addCar}" update="#form"/>
</h:form>
After pressing Add new car button, a new car object is added to myBean.cars and dataList is fully rerendered. Ajax response with changes contains not only new car, but all existing cars and new one.
Since I have more complex model and large set of data, it's very time consuming to rerender all elements. Is it possible to add new element without rerendering all existing elements of list?
I got the following problem using Primefaces 5.2 and JSF 2.1
I got a p:dataTable, and when the user selects a row, the selected object's data should be shown below the table. One requirement is that there should be a checkbox below the table, which should be editable. If the user toggles the checkbox and selects a different entry in the table, the checkbox' new value should be saved. (see the code below)
But I observed the following behaviour. When I select object1, check its checkbox and then select object2, object2's setter will be called, not object1's. Thus object2.someValue will be changed, while object1.someValue won't be. any idea?
<p:dataTable var="myVar" selectionMode="single"
id="myTable" selection="#{form.myValue}"
rowKey="#{myVar.id}"
value="#{form.myTableData}">
<!-- columns here -->
<p:ajax event="rowSelect" process="my_booleancheckbox" update="wrapper">
<p:dataTable>
<h:panelGroup id="wrapper">
<p:booleanCheckbox value="#{form.myValue.someValue}" id="my_booleancheckbox"/>
<!--other stuff here -->
</h:panelGroup>
That's how it is supposed to work, the rowSelect event is fired after the property selection of your p:dataTable is updated
move your ajax action to the p:booleanCheckbox
<p:dataTable var="myVar" selectionMode="single"
id="myTable" selection="#{form.myValue}"
rowKey="#{myVar.id}"
value="#{form.myTableData}">
<!-- columns here -->
<p:dataTable>
<h:panelGroup id="wrapper">
<p:booleanCheckbox value="#{form.myValue.someValue}" id="my_booleancheckbox">
<p:ajax process="my_booleancheckbox" update="wrapper">
</p:booleanCheckbox>
<!--other stuff here -->
</h:panelGroup>
Use case
I have a dialog that contains a datatable and an inputTextArea. The datatable is filled when the user clicks a button. When some (single) row of the datatable is selected, I want the contents of this row to be inserted at the end of the inputTextArea.
Problem
When using the selection attribute of the datatable, I dont have the most recent contents in the inputTextArea. Scenario: I enter "ABC" in my inputTextArea, then click the button, then make my inputTextArea "FFF" and select a row ("dtText") from the datatable. The new contents of the inputTextArea is "ABC dtText" instead of "FFF dtText".
What I tried
I tried to add a new listener but I cannot figure out how to bring it in properly so that it is being called before the selection happens. Found nothing on google or in the PF User Guide.
I was hoping the blur event updates my ruleText, but it doesn't happen.
inputTextArea
<p:inputTextarea value="#{mrBean.selectedElement.ruleTxt}" id="rt1New" rows="20" cols="100" autoResize="false">
<f:ajax event="blur" update="duoDlgForm2" />
</p:inputTextarea>
datatable
<p:dataTable id="qPdt" var="p" value="#{regelBean.queriedParams}" rowKey="#{p}"
selection="#{mrBean.selectedParam}" selectionMode="single">
<p:ajax event="rowSelect" update="#form"/>
<p:column ...
java
public void setSelectedParam(ParamOrDBParamModel selectedParam) {
if(selectedParam != null) {
selectedElement.setRuleTxt(selectedElement.getRuleTxt() + "\n" + selectedParam.getName().trim());
How can I work with the most recent text (selectedElement.getRuleTxt) when I am inside the setSelectedParam method?
PF 4.0
EDIT: if I try jquery, what do I have to insert into my function
$('#qPdt tr').on('click', function() {
// I reach this point, now what? How to get the contents of a row when I know the type?
$("#rt1New").append( ?? )
});
I have a dataTable and in a column a filterBy parameter.
When I type something on the filter box, it indeed filters the table but when I delete or change what I wrote on that field nothing happens and every other action in the page is blocked.
I mean, after that if I click on a button nothing happens, no event-action is performed.
I'm using JSF 2.1, on Tomcat 7, with EE5.
What are your suggestions? Thanks a lot in advance.
XHTML code fragment:
<p:dataTable value="#{consolidacionAslBean.listaMunicipios}"
rowKey="#{municipio}" var="municipio" paginator="true"
rows="5" id="tableMunicipio"
selection="#{consolidacionAslBean.municipios}" style="font-size: 13px"
filteredValue="#{consolidacionAslBean.filteredMunicipios}"
>
<p:column
filterBy="#{municipio.catMunicipios.id.cdgMunicipio}"
headerText="Clave">
<h:outputText value="#{municipio.catMunicipios.id.cdgMunicipio}" />
</p:column>
And bean the proper objects:
private List<AslMunicipios> filteredMunicipios;
private List<AslMunicipios> listaMunicipios;
Thanks!
I have a bean with 5 properties.In which user has to enter the values and save the values.The saved values are displayed in a datatable by ajax functionality.It is working fine.The problem is when i want to edit the record, i have the edit button associated with every row of the table.When edit button is clicked i have to get the record and show the record in editable format above the datatable.What component i have to use to populate the data for editing ? Edit button is also an ajax request.I used panelGrid for that but i did not get them.
could you suggest the right way to solve this one.
Thank you all.........
Use the same datatable for editing.
If you click edit button, store the selected value or index in the backing bean and
render an output component like h:outputText if rowValue != selectedItem
render an input component like h:inputText if rowValue == selectedItem
in your dataTable.
Here is an example:
<h:dataTable value="#{myBean.itemList}" var="item">
<h:column>
<h:outputText value="#{item.someValue}"
rendered="#{item != selectedItem}"/>
<h:inputText value="#{item.someValue}"
rendered="#{item == selectedItem}" />
</h:column>
</h:dataTable>