Primefaces two dataTable update and add data from one to another - ajax

I have two dataTables in my JSF page they are placed in a dialog that pops up on some action, these dataTables has data from a list in my managed bean, what I am trying to do is when I double click on a row in my first data I want to add it to the second one and I have achieved that but it only occurs when I close the dialog and open it again, I have tried to use ajax update to update my second dataTable on the action but the issue is still occurring and my other issue that I want to HIDE the data from the first dataTable when I move it to the second one without removing it from the list or (at least dont allow the user to move the same item twice) any suggestions please? Here is my dialog and data tables:
<p:dialog modal="true" width="50%" height="50%" widgetVar="test"
id="dialog">
<p:dataTable id="tblAllQuestions" value="#{mbInstructor.fullList}"
var="asEmp" selectionMode="single"
selection="#{mbInstructor.currentExamQuestion}" rowKey="#{asEmp.id}"
rowIndexVar="rowIndex">
<p:ajax event="rowDblselect"
update="#parent:tblAllQuestions2"
process="#this" listener="#{mbInstructor.submitForm()}" />
<p:column headerText="#" width="20">
#{rowIndex+1}
</p:column>
<p:column headerText="#{msg2.get('employee')}" width="200">
#{asEmp.questionTxt}
</p:column>
</p:dataTable>
<p:dataTable id="tblAllQuestions2"
value="#{mbInstructor.formsQuestion}" var="as" selectionMode="single"
selection="#{mbInstructor.currentExamQuestion}" rowKey="#{as.id}"
rowIndexVar="rowIndex">
<p:ajax event="rowDblselect"
update="#parent:pnlfourmData"
process="#this" />
<p:column headerText="#" width="20">
#{rowIndex+1}
</p:column>
<p:column headerText="#{msg2.get('employee')}" width="200">
#{as.question.questionTxt}
</p:column>
</p:dataTable>
<h:outputText value="[no selection made]"
rendered="#{empty mbInstructor.model.target}" />
<p:commandButton id="formSubmit" value="Submit"
actionListener="#{mbInstructor.submitForm()}" style="margin-top:5px" />
</p:dialog>
I have tried to update the whole dialog as well but it disappear when i do the action, so I added the following to my ajax to show it again
oncomplete="PF('test').show()"
but the dialog does not show up when it finish.

Related

Primefaces p:overlayPanel is empty when update attribute is used in child tag

I want to show a list of key-value pairs in a datatable, where each pair is one row, inside an overlay panel. When a key-value pair is clicked, i want to update a <p:inputText>-Element, which is OUTSIDE the overlaypanel with the key-value of the selected row and simultaniously close the overlaypanel.
I just migrated from PF 4.0 to PF 6.1 and now im facing the issue, that whenever i use an update-attirbute inside the overlay panel, it appears to be empty and no content is shown.
here is an code example:
<p:inputText
id="inputPvId"
styleClass="form_input"
readonly="true"
value="#{bean.selectedValue.get(0)}" />
<p:commandButton
icon="ui-icon-link"
id="selectValue"
value="#{msg_properties.chooseValue}" />
<p:overlayPanel
for="selectValue"
id="overlayValueSelector"
widgetVar="overlayValueSelector
dynamic="true"
styleClass="form_input_widest">
<p:dataTable
var="car"
value="#{dtBasicView.cars}">
<p:column
headerText="Id">
<h:outputText
value="#{car.id}" />
</p:column>
<p:column
headerText="Year">
<h:outputText
value="#{car.year}" />
</p:column>
<p:ajax
event="rowSelect"
update=":form:inputPvId,:form:myTable"
onsuccess="PF('overlayPV').hide()" />
</p:dataTable>
Previously it worked that way. All I changed is the way the Widget gets called from "overlayPV".hide()" to "PF('overlayPV').hide()" as the official Migration Guide suggested. If out cancel out the update=":form:inputPvId,:form:myTable" line in the ajax call, the content is shown properly.
Am I doing somethign wrong? My research showed, that other people also had trouble with the overlaypanel and the ajax update. However, i found no suitable solution for my problem.
I tried using the "onRowClick"-Attribute of the datable along with the widgetHide call like this:
<p:dataTable
onRowClick="PF('overlayPV').hide()" />
and it worked fine, however i could not figure out how to update the <p:inputText>-Element with the choosen value. I had to refresh the page to show the new value. I would be happy if someone suggested a solution for this. Thanks in advance.
I finally resolved the issue.
My initial problem was, that whenever an element inside the <p:overlayPanel> included the "update" attribute, the overlayPanel did not render any content and appeared empty.
i solved my issue with the <p:remoteCommand>-Tag, which I placed OUTSIDE of the overlayPanel as my example Code below shows:
<p:inputText
id="inputPvId"
styleClass="form_input"
readonly="true"
value="#{bean.selectedValue.get(0)}" />
<p:commandButton
icon="ui-icon-link"
id="selectValue"
value="#{msg_properties.chooseValue}" />
<p:overlayPanel
for="selectValue"
id="overlayValueSelector"
widgetVar="overlayValueSelector
dynamic="true"
styleClass="form_input_widest">
<p:dataTable
var="myTable"
value="#{dtBasicView.cars}"
onRowClick="remoteCommand()">
<p:column
headerText="Id">
<h:outputText
value="#{car.id}" />
</p:column>
<p:column
headerText="Year">
<h:outputText
value="#{car.year}" />
</p:column>
</p:dataTable>
</p:overlayPanel>
<p:remoteCommand
name="remoteCommand"
update="inputPvId, myTable"
onsuccess="PF('overlayPV').hide()"/>
Note the onRowClick-Attribute of my dataTable which call the remoteCommand outside of te overlayPanel. The remoteCommand than updates all my Elements that need to be updated and also closes the overlayPanel.

How to call method on ticking the SelectAll checkbox in p:dataTable through ajax

I need your help in calling a method from a backing bean once I ticked the SelectAll checkbox at the top of a dataTable. I am able to call the method ShowTotal
once I ticked or unticked the checkbox of each individual item, however when I tick the SelectAll checkbox from the top, no listener is called. Here is my code:
<p:dataTable id="PendingRequests" var="hr" selection="#{hrdirector.selectedRequests}"
value="#{hrdirector.listPendingRequests}" rowKey="#{hr.requestNo}"
filteredValue="#{hrdirector.filteredRequests}" widgetVar="dataTableWidgetVar">
<p:ajax event="rowSelectCheckbox" listener="#{hrdirector.ShowTotal}" process="#this"
update=":form:PendingRequests:sum"/>
<p:ajax event="rowUnselectCheckbox" listener="#{hrdirector.ShowTotal}" process="#this"
update=":form:PendingRequests:sum"/>
<p:column selectionMode="multiple" style="width:16px;text-align:center"></p:column>
<p:column headerText="Request No.">
<h:outputText value="#{hr.requestNo}"/>
</p:column>
<p:column headerText="Request Amount">
<h:outputText value="#{hr.requestAmount}"/>
</p:column>
</p:dataTable>
<h:outputText id="Sum" value="#{hr.Sum}"/>
I tried to add the below code in the column which it has the selection, but it gave me an error:
<p:column selectionMode="multiple" style="width:16px;text-align:center">
<p:ajax listener="#{hrdirector.ShowTotal}" />
</p:column>
Page 172 of the fabulous PrimeFaces documentation has the answer for you. What you need is called the toggleSelect event.

primefaces checkbox datatable will not check boxes on ajax event

I am trying to get a primefaces checkbox datatable to select multiple rows and pass those values to the bean. I have an ajax event for rowSelect and that works fine, but the ajax for rowSelectCheckbox never fires and it is as if my checkboxes are 'unclickable'. When selecting a row the rowSelect ajax event fires and highlights the entire row and checks the checkbox. However, I am unable to check any other checkboxes off so it is obvious only the rowSelect ajax works and not the rowSelectCheckbox. Here is code:
<p:dataTable id="content-table"
var="obj"
value="#{releaseNotes.contentList}"
rows="5"
paginator="true"
style="width:100%"
selectionMode="multiple"
selection="#{releaseNotes.selectedContent}"
rowKey="#{obj.hashCode()}"
paginatorPosition="bottom"
rendered="#{releaseNotes.showContentTable}">
<p:ajax event="rowSelect" listener="#{releaseNotes.selectListenerCode}" update=":grids :buttons" immediate="true"/>
<p:ajax event="rowSelectCheckbox" listener="#{releaseNotes.checkBoxListener}" update=":grids :buttons" immediate="true" />
<f:facet name="header">Content</f:facet>
<p:column selectionMode="multiple" style="width:16px;text-align:center"/>
<c:forEach items="#{releaseNotes.columnNames}" var="columnName">
<p:column headerText="#{columnName.toLowerCase().replace('_', ' ')}"
filterBy="#{obj.get(columnName)}" filterMatchMode="contains">
<h:outputText value="#{obj.get(columnName)}"/>
</p:column>
</c:forEach>
</p:dataTable>
Thanks in advance, my first post so I apologize if I missed some etiquette for the code formatting or anything like that, just let me know I will not take offense....

Highlight row when single selection with a command component

Based on the primefaces documentation:
Single Selection with a Command Component
This method is implemented with a command component such as commandLink or
commandButton. Selected row can be set to a server side instance by passing as a parameter if you
are using EL 2.2 or using f:setPropertyActionListener.
<p:dataTable var="car" value="#{carBean.cars}">
<p:column>
<p:commandButton value="Select">
<f:setPropertyActionListener value="#{car}"
target="#{carBean.selectedCar}" />
</p:commandButton>
</p:column>
...columns
</p:dataTable>
I need the row get highlighted when I press the button without selecting the row directly
This is my code:
<p:dataTable
rowKey="${xxx.y1}-${xxx.y2}"
selection="${managedBean.selectedRow}"
selectionMode="single"
value="#{managedBean.listOfBeans}" var="xxx">
<p:column>
<p:commandButton action="${managedBean.saveSomethingInDB}"
update="vvvComponent">
<f:setPropertyActionListener value="#{currentRow}"
target="#{managedBean.selectedRow}" />
</p:commandButton>
</p:column>
</p:dataTable>
I solved it in this way:
<p:dataTable
rowKey="${xxx.y1}-${xxx.y2}"
selection="${managedBean.selectedRow}"
selectionMode="single"
value="#{managedBean.listOfBeans}" var="xxx">
<p:column>
<p:commandButton action="${managedBean.saveSomethingInDB}" onclick="highlightRow(jQuery(this));"
update="vvvComponent">
<f:setPropertyActionListener value="#{currentRow}"
target="#{managedBean.selectedRow}" />
</p:commandButton>
</p:column>
</p:dataTable>
function highlightRow(commandButton) {
$('.ui-state-highlight').removeClass('ui-state-highlight');
commandButton.closest('table').closest('tr').addClass('ui-state-highlight');
}
Your code works for me.
thanks to the propertyActionListener, the row is highlighted when I press the button
<f:setPropertyActionListener value="#{currentRow}"
target="#{managedBean.selectedRow}" />
i know its too late but this works
<p:commandButton action="${managedBean.saveSomethingInDB}" onclick="$('.ui-state-highlight').removeClass('ui-state-highlight');PF('tableWidgetVar').selectRow($(this).parents('tr:first').addClass('ui-state-highlight'));" >
<f:setPropertyActionListener value="#{currentRow}"
target="#{managedBean.selectedRow}" />
</p:commandButton>
and this way u dont need to selection or select mode on datatable

Datatable not refreshing with ajax

I have two calendar controls and one command button. basically i want to give a range of date to pick the data from the database and then when i press the command button the datatable is displayed in the dialog box, the problem is java bean class is working it is loading the exact data which i want, but the datatable is not refreshing with command button click
my code is given;
<h:form id="form" >
<p:calendar value="#{calendarBean.dateFrom}" id="calFrom" pattern="yyyy-mm-dd">
<p:ajax event="dateSelect" listener="#{calendarBean.handleDateSelectFrom}" />
</p:calendar>
<p:calendar value="#{calendarBean.dateTo}" id="calTo" pattern="yyyy-mm-dd">
<p:ajax event="dateSelect" listener="#{calendarBean.handleDateSelectTo}" />
</p:calendar>
<p:commandButton value="Submit" action="#{calendarBean.submit()}" update="fTable" onclick="aDlg.show()">
<f:ajax render=":form:fTable" execute="#form"></f:ajax>
</p:commandButton>
<p:dialog id="aDialog" header="Filter List" widgetVar="aDlg"
modal="true" showEffect="explode"
hideEffect="explode" >
<p:panel id="pnl">
<p:dataTable id="fTable" value="#{calenderBean.list}" var="row" >
<p:column headerText="ID">
<h:outputText value="#{row.ID}"/>
</p:column>
<p:column headerText="Name">
<h:outputText value="#{row.Name}"/>
</p:column>
<p:column headerText="Time">
<h:outputText value="#{row.Time}"/>
</p:column>
<p:column headerText="User">
<h:outputText value="#{row.userName}"/>
</p:column>
</p:dataTable>
</p:panel>
</p:dialog>
</h:form>
kindly guide me regarding this issue
First thing to do, is remove the f:ajax, it's not working good with Primefaces. Also the update attribute should do everything.
This said, I have the very same code as yours which is working good.
If removing f:ajax is not working, try to check your managed bean scope (May be it's of request scope and data is re-initialized with every request)
Try Updating the dialog instead.
update="fTable"

Resources