I have a <p:tabView> with 2 tabs. The first one contains student details and the second one contains a table of all students.
<p:tab title="List">
<p:dataTable id="studentsTable" value="#{studentMB.allStudents}" var="student">
<p:column>
<f:facet name="header"><h:outputText value="ID"/></f:facet>
<h:outputText value="#{student.id}"/>
</p:column>
<p:column>
<f:facet name="header"><h:outputText value="Name"/></f:facet>
<h:outputText value="#{student.name}"/>
</p:colum>
<p:column>
<p:commandButton value="Details" onclick="tabVar.select(0);" />
</p:column>
</p:dataTable>
</p:tab>
When the "Details" button in the table is pressed, then I would like to show the selected student in the first tab. How can I achieve this?
Primefaces tabview has activeIndex attribute, you can bind to bean variable:
<p:tabView id="tabView" activeIndex="#{studentMB.tabindex}">
In each commandButton action, you pass value to determine student.
<p:commandButton update=":tabView" value="Details" actionListener="#{studentMB.handUpdate(student)}" />
Bean:
public void handUpdate(StudentType stValue){
// get student detail
}
(Sorry for my english)
Related
I have a app created by JSF using Primefaces templates in Netbeans.
One of the pages is a Create.xhtml to insert new record in a mysql database. This page is called by a button in a footer of a List od records.
The problem that when I select this page, the form is empty, only have title and buttons. The outputLabel and inputText are "hidden" (inspecting the page in browser). But if I select first a record in the List and next the Create page the outputLabel and inputText already are visible, but with values.
I want that when I select the Create page this came in an empty form and when I want insert the values I wanted in database.
The code of List.xhtml:
<h:form id="DistritoCreateForm">
<p:panel header="#{bundle.CreateDistritoTitle}">
<h:panelGroup id="display">
<p:panelGrid columns="2" rendered="#{distritoController.selected != null}">
<p:outputLabel value="#{bundle.CreateDistritoLabel_nomeDistrito}" for="nomeDistrito" />
<p:inputText id="nomeDistrito" value="#{distritoController.selected.nomeDistrito}" title="#{bundle.CreateDistritoTitle_nomeDistrito}" required = "true" />
</p:panelGrid>
<p:commandButton actionListener="#{distritoController.create}" value="#{bundle.Save}" update="display,:growl" oncomplete="handleSubmit(args,'DistritoCreateForm');" action="List.xhtml"/>
<p:commandButton value="#{bundle.Cancel}" action="List.xhtml"/>
</h:panelGroup>
</p:panel>
</h:form>
The code of Create.xhtml:
<h:form id="DistritoListForm">
<p:panel header="#{bundle.ListDistritoTitle}">
<p:dataTable id="datalist" value="#{distritoController.items}" var="item" style="width:50%;"
selectionMode="single" selection="#{distritoController.selected}"
paginator="true"
paginatorPosition="bottom"
rowKey="#{item.id}"
rows="10">
<p:ajax event="rowSelect" update="createButton viewButton editButton deleteButton"/>
<p:column filterBy="#{item.nomeDistrito}" filterMatchMode="contains">
<f:facet name="header">
<h:outputText value="#{bundle.ListDistritoTitle_nomeDistrito}"/>
</f:facet>
<h:outputText value="#{item.nomeDistrito}"/>
</p:column>
<f:facet name="footer">
<p:commandButton id="createButton" icon="ui-icon-plus" actionListener="#{distritoController.prepareCreate}" action="Create.xhtml"/>
<p:commandButton id="viewButton" icon="ui-icon-search" action="View.xhtml"/>
<p:commandButton id="editButton" icon="ui-icon-pencil" action="Edit.xhtml"/>
<p:commandButton id="deleteButton" icon="ui-icon-trash" actionListener="#{distritoController.destroy}" update=":growl,datalist" disabled="#{empty distritoController.selected}"/>
</f:facet>
</p:dataTable>
</p:panel>
</h:form>
So effectively (it cannot be seen in your code since it is not an mcve)
You select something
As a consequence a certain variable is set to be used in the shared 'show'/'edit'/'create' page/dialog
Next you press the create button and the same page/dialog is shown with the content from the selection before.
A simple deduction then is that the 'selected' variable is not cleared in the method that is called when the create button is pressed (#{distritoController.prepareCreate})
Solution:
Clear the variable (e.g. by creating a new empty instance of the object...
Effectively this is not a PrimeFaces problem (same would happen with plain jsf too) and it sort of is not a 'java' problem either but a plain coding issue.
for example I am using this datatable
<h:form>
<p:dataTable var="item" value="#{kilowatManager.show}">
<p:column headerText="Id">
<h:outputText value="#{kilowatManager.kilowat.id}" />
</p:column>
<p:column headerText="Name">
<h:outputText value="#{kilowatManager.kilowat.name}" />
</p:column>
<p:column headerText="kWH">
<h:outputText value="#{kilowatManager.kilowat.kwh}" />
</p:column>
<p:column headerText="kWD">
<p:inputText value="#{kilowatManager.kilowat.kwd}"/>
</p:column>
</p:dataTable>
</h:form>
How can I get values of selected row after pressing ENTER key in input text
you can use a button after selecting your row. you can place your button inside datable. for example you can include it inside f:facet tag
<f:facet name="footer">
<p:commandButton id="createButton" icon="ui-icon-plus" value="Nouveau"/>
<p:commandButton id="editButton" icon="ui-icon-pencil" type="submit" value="Modifier" action="#{Controller.Method()}">
you tie your button to a backing bean like this:
#ManagedBean(name = "controller")
#RequestScoped
public class Controller implements Serializable {
public Controller() {
}
public void method(){
DataTable dataTable = (DataTable) FacesContext.getCurrentInstance().getViewRoot().findComponent("form:datalist");
MyDataTableObject myObject = (MyDataTableObject) dataTable.getSelection();
}
}
Where form and datalist is the id of the h:form and p:dataTable tag
i was stuck in this problem and i found my solution using the following link
http://forum.primefaces.org/viewtopic.php?f=3&t=29086
I have a problem with primefaces datatables. I have one datatable with some entries and a column with a button inside. If the button is pressed a popup is opened with another datatable. The entries in the second datatable are depending on the row in which the button is pressed.
<!-- first datatable -->
<h:form id="list">
<p:dataTable id="list1" var="item" value="#{bean1.itemlist}"
rowKey="#{item.id}" selection="#{bean1.selectedItem}"
selectionMode="single">
<p:column headerText="ID">
<h:outputText value="#{item.id}" />
</p:column>
...
<p:column headerText="Edit Entries">
<p:commandButton value="Edit Entries"
actionListener="#{bean2.updateEntries(item)}" ajax="true"
oncomplete="PF('edit_entries').show()" />
</p:column>
</p:dataTable>
<!-- Second datatable in the popup -->
<p:dialog header="Edit Entries" widgetVar="edit_entries" modal="true"
resizable="false">
<p:dataTable id="list2" var="entry"
value="#{bean2.entriesList}" rowKey="#{entry.id}"
selection="#{bean2.selectedEntry}" selectionMode="single">
<p:column headerText="Entry Number">
<h:outputText value="#{entry.number}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton value="Save" oncomplete="PF('edit_entries').hide()" />
</f:facet>
</p:dialog>
</form>
Bean2
public void updateEntries(Item selectedItem) {
this.entriesList = this.entriesQuery.getAllEntriesByItemID(selectedItem.getId());//db query could take some time
System.out.println("entrieslist size: " + this.entriesList.size()); //prints the correct size
}
The problem is that there are no entries listed in the popup datatable although there are some in the list after the db query.
Any ideas how to fix this bug?
Thanks in advance!
UPDATE 1:
<!-- first datatable -->
<h:form id="list">
<p:dataTable id="list1" var="item" value="#{bean1.itemlist}"
rowKey="#{item.id}" selection="#{bean1.selectedItem}"
selectionMode="single">
<p:column headerText="ID">
<h:outputText value="#{item.id}" />
</p:column>
...
<p:column headerText="Edit Entries">
<p:commandButton value="Edit Entries" update=":dialogUpdateEntries"
actionListener="#{bean2.updateEntries(item)}" ajax="true"
oncomplete="PF('edit_entries').show()" />
</p:column>
</p:dataTable>
</h:form>
<!-- Second datatable in the popup -->
<p:dialog header="Edit Enries" id="dialogUpdateEntries" widgetVar="edit_entries" modal="true"
resizable="false">
<h:form id="formEntriesList">
<p:dataTable id="list2" var="entry"
value="#{bean2.entriesList}" rowKey="#{entry.id}"
selection="#{bean2.selectedEntry}" selectionMode="single">
<p:column headerText="Entry Number">
<h:outputText value="#{entry.number}" />
</p:column>
</p:dataTable>
<f:facet name="footer">
<p:commandButton value="Save" oncomplete="PF('edit_entries').hide()" />
</f:facet>
</form>
</p:dialog>
You're indeed not updating the data table in the dialog. JSF doesn't automatically update the view on change of the model, you have to explicitly tell the view to do so. You can use the ajax action component's update attribute for this. This takes a JSF client ID which can be found by rules as outlined in this related answer: How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar".
Given the markup as shown in the question, that'll be
<p:commandButton ... update=":list:list2" />
However, there's another potential problem. You're using <p:dialog modal="true"> inside a form instead of giving the dialog its own form. This way the dialog may not be available in the HTML DOM tree as JavaScript (the one responsible for dealing with ajax stuff) would expect to find it. Giving the dialog its own form should fix this matter. It'll also fix the potential future problems with invoking actions from inside the dialog as handled in this related question: <p:commandbutton> action doesn't work inside <p:dialog>.
<h:form id="viewForm">
...
<p:commandButton ... update=":editDialog" />
...
</h:form>
<p:dialog id="editDialog" modal="true">
<h:form id="editForm">
...
</h:form>
</p:dialog>
Try adding update="list2" to Edit Entries command button (even update="#widgetVar(edit_entries)" should work).
If, because of page layout and structure, you can't target the second datatable using above suggestions, then add styleClass="tList2" to second table, and update it with update="#(.tList2)" on edit button.
I have a <p:dataTable > which is updated from a button and is also filled. The data is displayed correctly. But the PROBLEM is that when I click/select any row, NO RESPONSE; previously while being clicked, the row was highlighted, now-> no highlight. I have done this type of design many times but this time the <p:dataTable> is behaving weirdly. I cannot find the root of problem.
My XHTML snippet for table is :
<p:dataTable id="tblSales" rowIndexVar="rowsn"
paginator="true" value="#{invSaleMB.dummyList}"
var="saleObj" selectionMode="single"
selection="#{invSaleMB.dummySaleObj}"
rowKey="#{saleObj.item.itemTypeId}">
<p:column headerText="#">
<h:outputLabel value="#{rowsn+1}" />
</p:column>
<p:column headerText="Name">
<h:outputLabel value="#{saleObj.item.itemTypeName}" />
</p:column>
<p:column headerText="Count">
<h:outputLabel value="#{saleObj.count}" />
</p:column>
<p:column headerText="Unit Price">
<h:outputLabel value="#{saleObj.unitPrice}" />
</p:column>
<p:column headerText="Total Price">
<h:outputLabel value="#{saleObj.total}" />
</p:column>
</p:dataTable>
My backing bean is #ViewScoped.
And another component which is not responding to an update trigger is <pe:inputNumber> and value for this component is 'double'. I changed the <pe:inputNumber> to <p:inputText> and worked well and displayed accurate data.
<pe:inputNumber id="totalCost" disabled="true" value="#{invSaleMB.totCost}" />
The datatable and pe:inputNumber are on same form.
What have you changed between "before" (was working) and "now" (not working)?. You are sure "#{saleObj.item.itemTypeId}" is unique for each element of the table? More code of the page could be useful.
For pe:inputNumber to work remember to include xmlns:pe="http://primefaces.org/ui/extensions" in your html tag.
I have a JSF application using Primefaces 3.5. I have a page where after click in a commandButton I call a method in Managed Bean which will fill a list that will be showed in fields tblPerfis and txtPerfis below.
<ui:composition template="...">
<ui:define name="content">
<h:form id="formPrincipal">
<br />
<p:fieldset legend="Pesquisa de Perfil" >
<p:panelGrid columns="2" >
<f:facet name="footer">
<p:commandButton id="btnPesquisar"
actionListener="#{perfilAcessoMB.pesquisar}" value="Pesquisar"
update="tblPerfis txtPerfis pnlPerfis"
styleClass="ui-icon-search" />
</f:facet>
</p:panelGrid>
</p:fieldset>
<br />
<h:outputText id="txtPerfis" value="Perfis: #{perfilAcessoMB.perfis}" ></h:outputText>
<p:dataTable id="tblPerfis" value="#{perfilAcessoMB.perfis}" var="perfil" emptyMessage="Nenhum perfil encontrado." >
<p:column headerText="Nome">
<h:outputText value="#{perfil.descricao}"></h:outputText>
</p:column>
</p:dataTable>
<p:outputPanel id="pnlPerfis">
<p:fieldset id="resultadoPesquisa" legend="Resultado da Pesquisa">TESTE</p:fieldset>
</p:outputPanel>
</h:form>
</ui:define>
</ui:composition>
The called method is the follow:
#ManagedBean
#ViewScoped
public class PerfilAcessoMB {
public void pesquisar(ActionEvent event) {
// Fill perfis List
}
}
At principle, it works as waited. My problem happens when I want add rendered attribute:
<h:outputText id="txtPerfis" value="Perfis: #{perfilAcessoMB.perfis}" rendered="#{not empty perfilAcessoMB.perfis}" ></h:outputText>
<p:dataTable id="tblPerfis" value="#{perfilAcessoMB.perfis}" rendered="#{not empty perfilAcessoMB.perfis}" var="perfil" emptyMessage="Nenhum perfil encontrado." >
<p:column headerText="Nome">
<h:outputText value="#{perfil.descricao}"></h:outputText>
</p:column>
</p:dataTable>
<p:outputPanel id="pnlPerfis" rendered="#{not empty perfilAcessoMB.perfis}">
<p:fieldset id="resultadoPesquisa" legend="Resultado da Pesquisa">TESTE</p:fieldset>
</p:outputPanel>
Even when there is results, these fields are not showed. Does someone have any idea what is happening here?
Thanks,
Rafael Afonso
EDIT
Following a workmate suggestion, I changed the code to put dataTable and outputText inside outputPanel. The commandButton will reference the outputPanel but the rendered attibute will be put in datatable and outputText.
<p:commandButton id="btnPesquisar"
actionListener="#{perfilAcessoMB.pesquisar}" value="Pesquisar"
update="pnlPerfis"
styleClass="ui-icon-search" />
<p:outputPanel id="pnlPerfis">
<h:outputText id="txtPerfis" value="Perfis: #{perfilAcessoMB.perfis}" rendered="#{not empty perfilAcessoMB.perfis}" ></h:outputText>
<p:dataTable id="tblPerfis" value="#{perfilAcessoMB.perfis}" rendered="#{not empty perfilAcessoMB.perfis}" var="perfil" emptyMessage="Nenhum perfil encontrado." >
<p:column headerText="Nome">
<h:outputText value="#{perfil.descricao}"></h:outputText>
</p:column>
</p:dataTable>
</p:outputPanel>
After this, the page worked as waited.
However, I still did not understand what happened. What is the explanation for this behaviour?
Your problem occurs because our table is not rendered it simply does not exist in your html code, that is not in this context to be found to update or another source.
When you shut a larger scope as the panel and force an update in this it forces the table to check the condition for rendering, if yes the code is written and can be seen without problems.