Primefaces update strange behaviour - jsf

i have a strange behaviour on Primefaces update :
I have i page with a panel grid with several output text and a dataTable with several rows. If I modify a row, the datatable update correctly, but if I insert a new row or delete a row it doesn't update. The page code is the following:
<ui:composition>
<p:dialog id="composizioneDlg" widgetVar="ComposizioneDialog" modal="true" resizable="false" appendTo="#(body)" header="#{bundle.ListDescImmTitle}">
<h:form id="composizioneListForm">
<p:panelGrid columns="10" rendered="#{immobiliController.selected != null}">
<h:outputText value="#{bundle.ViewImmobiliLabel_categoria}"/>
<h:outputText value="#{immobiliController.selected.categoria.descrizione}"
-------SEVERAL OUTPUTS---------------------------------
</p:panelGrid>
<p:panel header="#{bundle.ListDescImmTitle}">
<p:dataTable id="datalistComp" value="#{descImmController.composizione}" var="item" >
-----SEVERAL OPTIONS OF DATA TABLE-------------------
<p:ajax event="rowSelect" update="createButton viewButton editButton deleteButton"/>
<p:ajax event="rowUnselect" update="createButton viewButton editButton deleteButton"/>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDescImmTitle_stato}"/>
</f:facet>
<h:outputText value="#{item.stato}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDescImmTitle_categoria}"/>
</f:facet>
<h:outputText value="#{item.categoria}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDescImmTitle_descrizione}"/>
</f:facet>
<h:outputText value="#{item.descrizione}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListDescImmTitle_mq}"/>
</f:facet>
<h:outputText value="#{item.mq}"/>
</p:column>
<f:facet name="footer">
<p:commandButton id="createButton" icon="ui-icon-plus" value="#{bundle.Create}" actionListener="#{descImmController.prepareCreate}" update=":DescImmCreateForm" oncomplete="PF('DescImmCreateDialog').show()"/>
<p:commandButton id="editButton" icon="ui-icon-pencil" value="#{bundle.Edit}" update=":DescImmEditForm" oncomplete="PF('DescImmEditDialog').show()" disabled="#{empty descImmController.selected}"/>
<p:commandButton id="deleteButton" icon="ui-icon-trash" value="#{bundle.Delete}" actionListener="#{descImmController.destroy}" update=":composizioneListForm:datalistComp, :growl" disabled="#{empty descImmController.selected}"/>
</f:facet>
</p:dataTable>
</p:panel>
</h:form>
</p:dialog>
</ui:composition>
The editButton code is this ( and it works ):
<ui:composition>
<p:dialog id="DescImmEditDlg" widgetVar="DescImmEditDialog" modal="true" resizable="false" appendTo="#(body)" header="#{bundle.EditDescImmTitle}">
<h:form id="DescImmEditForm">
<h:panelGroup id="display">
<p:panelGrid columns="2" rendered="#{descImmController.selected != null}">
<p:outputLabel value="#{bundle.EditDescImmLabel_stato}" for="stato" />
<p:inputText id="stato" value="#{descImmController.selected.stato}" title="#{bundle.EditDescImmTitle_stato}" />
<p:outputLabel value="#{bundle.EditDescImmLabel_descrizione}" for="descrizione" />
<p:inputText id="descrizione" value="#{descImmController.selected.descrizione}" title="#{bundle.EditDescImmTitle_descrizione}" />
<p:outputLabel value="#{bundle.EditDescImmLabel_mq}" for="mq" />
<p:inputText id="mq" value="#{descImmController.selected.mq}" title="#{bundle.EditDescImmTitle_mq}" />
</p:panelGrid>
<p:commandButton actionListener="#{descImmController.update}" value="#{bundle.Save}" update="display, :composizioneListForm:datalistComp, :growl" oncomplete="handleSubmit(args, 'DescImmEditDialog');"/>
<p:commandButton value="#{bundle.Cancel}" onclick="DescImmEditDialog.hide()"/>
</h:panelGroup>
</h:form>
</p:dialog>
</ui:composition>
This is the code of createButton ( not update instead of editButton ) :
<ui:composition>
<p:dialog id="DescImmCreateDlg" widgetVar="DescImmCreateDialog" modal="true" resizable="false" appendTo="#(body)" header="#{bundle.CreateDescImmTitle}">
<h:form id="DescImmCreateForm">
<h:panelGroup id="display">
<p:panelGrid columns="2" rendered="#{descImmController.selected != null}">
<p:outputLabel value="#{bundle.CreateDescImmLabel_descrizione}" for="descrizione" />
<p:inputText id="descrizione" value="#{descImmController.selected.descrizione}" title="#{bundle.CreateDescImmTitle_descrizione}" />
<p:outputLabel value="#{bundle.CreateDescImmLabel_mq}" for="mq" />
<p:inputText id="mq" value="#{descImmController.selected.mq}" title="#{bundle.CreateDescImmTitle_mq}" />
</p:panelGrid>
<p:commandButton actionListener="#{descImmController.create}" value="#{bundle.Save}" update="display, :composizioneListForm:datalistComp, :growl" oncomplete="handleSubmit(args,'DescImmCreateDialog');"/>
<p:commandButton value="#{bundle.Cancel}" onclick="DescImmCreateDialog.hide()"/>
</h:panelGroup>
</h:form>
</p:dialog>
</ui:composition>
Where is my fault on call update="" in deleteButton and in createButton ????

After rewrite the code from the beginning ( but with the same code ) all goes well. Now It works

Related

How to render same list in multiple datatables in primefaces

I'm using primefaces and I want to populate two datatables with same list.
When I select any one of the books, two panels are shown. The first one shows the details of the book and the author(s). The authors being displayed in the first panel is an editable datatable. I also want to display the same datatable in the second panel. But as you can see it says "No records found". How do I achieve it?
My jsf page is as below:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/templates/Layout.xhtml">
<ui:define name="content">
<f:view>
<h:form id="form">
<p:growl id="msgs" showDetail="true"/>
<p:dataTable value="#{webBooks.entries}" var="book" id="bookList"
styleClass="order-table"
rows="3" paginator="true" editMode="true" editable="true">
<div>
<f:facet name="header">
<p:outputLabel value="Books List"/>
</f:facet>
</div>
<p:columnGroup type="header">
<p:row>
<p:column style="width:10px"/>
<p:column headerText="Id" style="width:30px"/>
<p:column headerText="Book Title" style="width:200px"/>
<p:column headerText="Price" style="width:30px"/>
</p:row>
</p:columnGroup>
<p:column>
<p:commandButton update=":form:bookDetail"
onclick="PF('bookDialog').show(), PF('authorDialog').show()"
title="View Book Detail"
icon="fa fa-info-circle">
<f:setPropertyActionListener value="#{book}" target="#{webBooks.selectedBook}"/>
</p:commandButton>
</p:column>
<p:column>
<p:outputLabel value="#{book.id}"/>
</p:column>
<p:column>
<p:outputLabel value="#{book.title}"/>
</p:column>
<p:column>
<p:outputLabel value="#{book.price}"/>
</p:column>
</p:dataTable>
<p:panelGrid columns="2">
<p:panel id="bookDetail"
header="Book Info"
closable="true"
toggleable="true"
widgetVar="bookDialog" visible="false" style="width:420px;height:250px;">
<p:panelGrid columns="2"
rendered="#{not empty webBooks.selectedBook}">
<h:outputLabel value="Id" />
<p:outputLabel value="#{webBooks.selectedBook.id}"
rendered="#{webBooks.selectedBook.editable}"/>
<p:outputLabel value="#{webBooks.selectedBook.id}"
rendered="#{not webBooks.selectedBook.editable}"/>
<p:outputLabel value="Title"/>
<p:inputText value="#{webBooks.selectedBook.title}"
rendered="#{webBooks.selectedBook.editable}"/>
<p:outputLabel value="#{webBooks.selectedBook.title}"
rendered="#{not webBooks.selectedBook.editable}"/>
<p:outputLabel value="Price"/>
<p:inputText value="#{webBooks.selectedBook.price}"
rendered="#{webBooks.selectedBook.editable}"/>
<p:outputLabel value="#{webBooks.selectedBook.price}"
rendered="#{not webBooks.selectedBook.editable}"/>
<p:outputLabel value="Author(s)" />
<p:dataTable value="#{webBooks.selectedBook.authoredBy}"
var="authoredBy"
id="authorList"
scrollable="true"
scrollHeight="70"
scrollWidth="300"
editable="true">
<p:ajax event="rowEdit" listener="#{webBooks.onAuthorEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{webBooks.onAuthorEditCancel}" update=":form:msgs" />
<p:columnGroup type="header">
<p:row>
<p:column style="width:30px" headerText="Id"/>
<p:column style="width:100px" headerText="Author Name"/>
</p:row>
</p:columnGroup>
<p:column>
<p:outputLabel value="#{authoredBy.id}"/>
</p:column>
<p:column>
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{authoredBy.name}"/></f:facet>
<f:facet name="input"><p:inputText value="#{authoredBy.name}" style="width:100%" label="Author Name"/></f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:panelGrid>
<p:commandButton value="Edit"
action="#{webBooks.edit(webBooks.selectedBook)}"
rendered="#{not webBooks.selectedBook.editable}"
update=":form:bookDetail"/>
<p:commandButton value="Save"
actionListener="#{webBooks.save(webBooks.selectedBook)}"
rendered="#{webBooks.selectedBook.editable}"
update="bookList"
process="#form"
id="save"
oncomplete="PF('bookDialog').close()"/>
<p:commandButton value="Cancel"
actionListener="#{webBooks.cancel(webBooks.selectedBook)}"
rendered="#{webBooks.selectedBook.editable}"
update=":form:bookDetail"/>
<p:commandButton value="Delete"
actionListener="#{webBooks.remove(webBooks.selectedBook)}"
onclick="return confirm('Are you sure?')"
id="remove"
update="bookList"
process="#form"
oncomplete="PF('bookDialog').close()"/>
</p:panel>
<p:panel header="Author Info"
widgetVar="authorDialog"
closable="true"
toggleable="true"
visible="false" style="width:420px;height:250px;">
<p:panelGrid columns="2">
<p:dataTable value="#{webBooks.selectedBook.authoredBy}"
var="authoredBy"
id="authorsList"
scrollable="true"
scrollHeight="150"
scrollWidth="300"
editable="true">
<p:ajax event="rowEdit" listener="#{webBooks.onAuthorEdit}" update=":form:msgs" />
<p:ajax event="rowEditCancel" listener="#{webBooks.onAuthorEditCancel}" update=":form:msgs" />
<p:columnGroup type="header">
<p:row>
<p:column style="width:30px" headerText="Id"/>
<p:column style="width:100px" headerText="Author Name"/>
</p:row>
</p:columnGroup>
<p:column>
<p:outputLabel value="#{authoredBy.id}"/>
</p:column>
<p:column>
<p:cellEditor>
<f:facet name="output"><h:outputText value="#{authoredBy.name}"/></f:facet>
<f:facet name="input"><p:inputText value="#{authoredBy.name}" style="width:100%" label="Author Name"/></f:facet>
</p:cellEditor>
</p:column>
<p:column style="width:32px">
<p:rowEditor />
</p:column>
</p:dataTable>
</p:panelGrid>
</p:panel>
</p:panelGrid>
</h:form>
</f:view>
</ui:define>
You are only updating update=":form:bookDetail" in your "View Book Detail" button. Add an ID to the panel "Author Info" and update that as well:
<p:commandButton update=":form:bookDetail :form:authorDetail"
...>
...
</p:commandButton>
...
<p:panel id="authorDetail"
header="Author Info"
...>
...
</p:panel>
See also:
Can 'update' attribute update two components simultanously?

How can I use datatable selection in dialog widget in PrimeFaces?

I am trying to use datatable selection in dialog widget. But I cannot get selected value in my bean. Datatable selection is working, if I delete dialog widget tag. I am using PrimeFaces 4.0. How can I fix this?
passengerform.xhtml
<p:hotkey bind="esc" handler="dialogWidget.hide();" />
<p:dialog id="dialog" widgetVar="dialogWidget"
header="Coupon List" modal="true" width="400" showEffect="fade"
hideEffect="fade" appendTo="#(body)">
<h:form id="formDialog">
<h:outputLabel value="Lütfen E-ticket Kuponunu Seçiniz." />
<p:dataTable id="singleDT" var="coupon"
value="#{passengerFormService.couponList}"
rowKey="#{coupon.id}" rowIndexVar="rowIndex"
selection="#{passengerFormService.selectedCoupon}"
selectionMode="single">
<p:ajax event="rowSelect"
listener="#{passengerFormService.selectCoupon}"
update=":tab1:tab1_1:eticketform:formDialog">
<f:setPropertyActionListener value="#{coupon}"
target="#{passengerFormService.coupon}" />
</p:ajax>
<f:facet name="header"></f:facet>
<h:inputHidden name="hidden1"
value="#{passengerFormService.passengerForm.id}" />
<p:column style="width:20px" width="20">
<f:facet name="header">
<h:outputText value="#" />
</f:facet>
<h:outputText value="#{rowIndex+1}" />
</p:column>
<p:column headerText="Id">
<h:outputText value="#{coupon.id}" />
</p:column>
<p:column headerText="Departure Location">
<h:outputText value="#{coupon.departureLocation}" />
</p:column>
<f:facet name="footer"></f:facet>
</p:dataTable>
<p:separator />
<h:panelGrid columns="2" cellspacing="5"
columnClasses="alignLeft,alignRight" style="width:100%">
<p:commandButton id="selectButton1" update=""
icon="ui-icon-close" value="İptal"
oncomplete="PF('dialogWidget').hide()" />
<p:commandButton id="cancelSelectedButton1"
update=":tab1:tab1_1:passengerInsertform"
icon="ui-icon-check"
value="Onayla" oncomplete="PF('dialogWidget').hide()" />
</h:panelGrid>
</h:form>
</p:dialog>
PassengerFormService.java
public void selectCoupon(SelectEvent event) {
Log.getLogger().debug("New2 coupon selected...");
Log.getLogger().debug("selected: " +getSelectedCoupon());
}

datatable paginator primefaces not working

I'm trying to include the paginator on my datatable but it's not working, i have the table and the paginator shows but it's not working, always int page 1 !!
this is my code :
![datatable paginator not working ][1]
<h:form id="form">
<p:outputPanel id="users">
<p:dataTable id="usersTable" value="#{personBean.allPersons}" paginator="true" rows="4" var="person" >
<p:column>
<f:facet name="header">
<h:outputText value="Name" />
</f:facet>
<p:commandLink action="#{personBean.editPerson}">
<h:outputText value="#{person.name}" />
<f:setPropertyActionListener target="#{personBean.person}"
value="#{person}" />
</p:commandLink>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Age" />
</f:facet>
<p:commandLink action="#{personBean.editPerson}">
<h:outputText value="#{person.age}" />
<f:setPropertyActionListener target="#{personBean.person}"
value="#{person}" />
</p:commandLink>
</p:column>
</p:dataTable>
</p:outputPanel>
<p:commandButton value="Create New User"
action="#{personBean.newPerson}" />
</h:form>
always i have the same table, i can't move to 2

Why my InputTextArea return null?

My xhtml, If i put my CommandButton into the h:form the Actionlistener is not called:
<ui:composition template="/template.xhtml">
<style>
</style>
<ui:define name="title">
<h:outputText value="#{bundle.ListDashboardTitle}"></h:outputText>
</ui:define>
<ui:define name="body">
<h:form id="formDashboard">
<p:layout id="layoutVar" style="min-height:500px;">
<p:layoutUnit id="gridLeft" position="west" size="250" style="position:absolute;">
<p:fieldset style="padding:0;padding-top:5px">
<f:facet name="legend" id="legendId">
<p:commandButton id="addEvent" type="button" icon="ui-icon-plus" value="" onclick="addMemo.show()" update=":formAddMemo" style="width:30px;height:30px;"/>
</f:facet>
<p:dataGrid id="leftData" var="item" columns="1" value="#{myMemosController.items}" style="border:none;">
<p:panel id="pnl" styleClass="" style="background-color:#{item.priority}}" closable="true">
<!-- <p:ajax event="close" listener=""/>-->
<f:facet name="header">
<h:panelGroup>
<h:outputText value="#{item.name}" styleClass=""/>
<p:commandButton icon="ui-icon-pencil" actionListener="#{myMemosController.prepareEdit}" update=":editForm" onclick="editMemo.show();" style="width:19px;height:19px;"/>
</h:panelGroup>
</f:facet>
<f:facet name="footer">
<h:outputText value="#{item.date} at #{item.time}" styleClass="footerStyle"/>
</f:facet>
<h:panelGrid columns="1" style="width:100%">
<h:outputText value="#{item.comments}" styleClass=""/>
</h:panelGrid>
</p:panel>
<p:draggable for="pnl" helper="clone" handle=".ui-panel-titlebar" stack=".ui-panel" zindex="100"/>
</p:dataGrid>
</p:fieldset>
</p:layoutUnit>
<p:layoutUnit position="center" style="position:absolute;">
<p:outputPanel id="dropArea">
<p:dataTable id="centerGrid" value="#{dashboardController.items}" var="item">
<p:column style="text-align:center;">
<f:facet name="header">
<h:outputText value="Priority"/>
</f:facet>
<h:outputText value="#{item.priorityname}"/>
</p:column>
<p:column style="text-align:center;">
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{item.name}"/>
</p:column>
<p:column style="text-align:center;">
<f:facet name="header">
<h:outputText value="Comment"/>
</f:facet>
<h:outputText value="#{item.comments}"/>
</p:column>
<p:column style="text-align:center;">
<f:facet name="header">
<h:outputText value="Time"/>
</f:facet>
<h:outputText value="#{item.time}"/>
</p:column>
<p:column style="text-align:center;">
<f:facet name="header">
<h:outputText value="Date"/>
</f:facet>
<h:outputText value="#{item.date}"/>
</p:column>
</p:dataTable>
</p:outputPanel>
<p:droppable id="droppablePanel" tolerance="touch" activeStyleClass="ui-state-highlight">
</p:droppable>
</p:layoutUnit>
<p:layoutUnit id="gridRight" position="east" size="250" style="position:absolute;">
<p:dataGrid id="rightGrid" var="item" columns="1" value="#{usersMemosController.items}">
<p:panel id="pnl" styleClass="" style="background-color:#{item.priority}}" closable="true">
<f:facet name="header">
<h:outputText value="#{item.name}" styleClass=""/>
</f:facet>
<f:facet name="footer">
<h:outputText value="#{item.date} at #{item.time}" styleClass="footerStyle"/>
</f:facet>
<h:panelGrid columns="1" style="width:100%">
<h:outputText value="#{item.comments}" styleClass=""/>
</h:panelGrid>
</p:panel>
<p:draggable for="pnl" helper="clone" handle=".ui-panel-titlebar" stack=".ui-panel" zindex="100"/>
</p:dataGrid>
</p:layoutUnit>
</p:layout>
</h:form>
<p:dialog id="dialogEditMemo" header="Edit Memo" widgetVar="editMemo" resizable="false" closable="true" closeOnEscape="true" draggable="false">
<h:form id="editForm">
<h:messages style="color:red;margin:8px;" />
<h:panelGrid columns="1" cellpadding="3">
<p:inputTextarea id="commentEditInput" value="#{myMemosController.currentComment}" rows="6" required="true">
<p:ajax event="keyup" />
<p:ajax event="change" />
</p:inputTextarea>
<p:watermark for="commentEditInput" value="Enter your memo..."/>
<h:panelGrid columns="2" cellpadding="1">
<h:outputLabel for="selectEditShare" value="Share Memo: " style="margin-right:40px;"/>
<p:selectBooleanCheckbox id="selectEditShare" label="selectEditShare"/>
</h:panelGrid>
<p:selectOneMenu id="chooseEditPriority" value="#{myMemosController.currentPriority}">
<f:selectItem itemLabel="Low Priority" itemValue="Low Priority" />
<f:selectItem itemLabel="Medium Priority" itemValue="Medium Priority" />
<f:selectItem itemLabel="High Priority" itemValue="High Priority" />
</p:selectOneMenu>
</h:panelGrid>
</h:form>
<p:panel id="panelEditBtn" style="border:none;">
<p:commandButton icon="ui-icon-close" value="Reset" type="reset"/>
<p:commandButton icon="ui-icon-check" actionListener="#{myMemosController.update}" value="Edit" process="#this" update=":formDashboard:leftData" onsuccess="editMemo.hide();"/>
</p:panel>
</p:dialog>
</ui:define>
</ui:composition>
When i want to display InputTextarea value is equal null:
public String update() {
System.out.println(getCurrentComment());
}
Thanks in advance
The problem is in your managedBean you have not instansiated the object currentComment .
And Please try to avoid nested form in your application.
I have gone with the same issue the issue is that sometime value is not set to the managedBean by ajax. So modify your <p:inputTextArea /> with the below code it works.
<p:inputTextarea id="commentEditInput"
value="#{myMemosController.currentComment}"rows="6" required="true">
<p:ajax event="keyup" />
<p:ajax event="change" />
</p:inputTextarea>
And For your actionListener just try to use process attribute that might work..
<p:commandButton id="submitEditDialog" icon="ui-icon-check"
actionListener="#{myMemosController.update}" value="Edit"
update=":formDashboard:leftData :editForm" onsuccess="editMemo.hide();"
process="#this"
/>

primefaces dialog content is on page at the begining

Below is code of xhtml page,
even i put dialog in a form or not i can see outputtexts below of the page.
I am running into such situation for the first time.
<h:form id="form">
<h:outputLabel value="Welcome #{loginBean.name}"></h:outputLabel>
<p:dataTable id="cars" var="book" value="#{indexView.mediumBooksModel}" paginator="true" rows="10"
selection="#{indexView.selectedBook}" rowKey="">
<f:facet name="header">
RadioButton Based Selection
</f:facet>
<p:column selectionMode="single" style="width:2%" />
<p:column headerText="Title" style="width:25%">
#{book.title}
</p:column>
<p:column headerText="ISBN" style="width:25%">
#{book.isbn}
</p:column>
<p:column headerText="Year" style="width:24%">
#{book.year}
</p:column>
<p:column headerText="Price" style="width:24%">
#{book.price}
</p:column>
<f:facet name="footer">
<p:commandButton id="viewButton" value="View" icon="ui-icon-search"
update=":displaySingle" oncomplete="singleBookDialog.show()"/>
</f:facet>
</p:dataTable>
</h:form>
<p:dialog id="dialog" header="Book Detail" widgetVar="singleBookDialog" resizable="false"
modal="true" >
<h:panelGrid id="displaySingle" columns="2" cellpadding="4">
<f:facet name="header">
<p:graphicImage value="/images/books/#{indexView.selectedBook.image}.jpg"/>
</f:facet>
<h:outputText value="Title:" />
<h:outputText value="#{indexView.selectedBook.title}" style="font-weight:bold"/>
<h:outputText value="Year:" />
<h:outputText value="#{indexView.selectedBook.year}" style="font-weight:bold"/>
<h:outputText value="ISBN:" />
<h:outputText value="#{indexView.selectedBook.isbn}" style="font-weight:bold"/>
<h:outputText value="Price:" />
<h:outputText value="#{indexView.selectedBook.price}" style="font-weight:bold"/>
</h:panelGrid>
</p:dialog>

Resources