JSF 2 + Primefaces - Update Not Working - jsf

I'lve already searched, but even implementing the solutions I've found, I was not able to get this working. I select a row in a datatable and click on delete button to delete the selected object, but the object gets deleted but the datatable is not updated. Here's my code:
<h:form id="formPesquisa">
...
<h:panelGroup id="panelToRender" layout="block">
<h:panelGroup id="panelDataTable" rendered="#{not empty bean.dataList}" layout="block">
<div id="dataTableRegion">
<p:panel id="panelBtnsUp" styleClass="cleanPanel">
<ui:include src="/templates/btnDataList.xhtml" />
</p:panel>
<h:panelGroup id="panelTableHolder" layout="block">
<p:dataTable id="dataTableBusca" value="#{bean.dataList}" var="entidade"
rendered="#{not empty bean.dataList}" paginator="true" style="width:100%;"
selection="#{bean.entidadesSelecionadas}" onRowSelectUpdate="panelBtnsUp,panelBtnsDown,dataTableBusca"
onRowUnselectUpdate="panelBtnsUp,panelBtnsDown,dataTableBusca" rowUnselectListener="#{bean.rowUnselectListener}" selectionMode="multiple">
<p:column>
<p:graphicImage url="/icons/checkbox_no.png" rendered="#{!bean.containsSelection(entidade)}" />
<p:graphicImage url="/icons/checkbox_yes.png" rendered="#{bean.containsSelection(entidade)}" />
</p:column>
<ui:insert name="colunasPesquisa" />
</p:dataTable>
</h:panelGroup>
<p:panel id="panelBtnsDown" styleClass="cleanPanel">
<ui:include src="/templates/btnDataList.xhtml" />
</p:panel>
</div>
</h:panelGroup>
</h:panelGroup>
....
</h:form>
And the Delete Button is in the included file:
<div style="margin:5px 0;">
<p:commandButton value="#{msg['commons.excluir']}" image="delete" disabled="#{bean.disableDelete()}" action="#{bean.delete}" update="panelDataTable" />
<p:commandButton value="#{msg['commons.editar']}" image="edit" disabled="#{bean.disableEdit()}" action="#{bean.prepareEdit}" ajax="false" />
</div>
I already tried:
update="dataTableBusca"
update="panelTableHolder"
update="formPesquisa:dataTableBusca"
update="formPesquisa:panelTableHolder"
What am I doing wrong???
Thanks for any help.

The first two approaches will only work if your button and the updated elements are siblings.
For the third and the fourth approach you have to traverse all containing elements in order to get the right id. You panelTableHolder is inside two other h:panelGroup (panelToRender, panelDataTable) and a div (dataTableRegion).
Furthermore to make sure that you start from highest level, prepend a : before the form id.
Try this:
update=":formPesquisa:panelToRender:panelDataTable:dataTableRegion:panelTableHolder"
You could check in the rendered html if this is the correct path for your panelTableHolder.

Related

JSF - Updating repeated element from repeat

I have a code that is little bit odd but it goes something like this:
<h:form id="groupsForm">
<ui:repeat value="#{groupsContainer.groups}" var="group">
<p:outptuText value="#{group.name}" />
<p:card id="group">
<ui:repeat value="#{group.users}" var="user">
<p:outputText value="#{user.name}" />
<p:commandButton
value="Delete"
process="#this"
actionListener="#{groupsController.deleteUserFromGroup(group, user)}"
update="group"
/>
</ui:repeat>
</p:card>
</ui:repeat>
</h:form>
Sadly that command button can't find the group in which it is when rendering the page ending with Java error:
org.primefaces.expression.ComponentNotFoundException: Cannot find component for expression "group" referenced from "groupsForm:j_idt42:0:j_idt73:0:j_idt102".
It seams to me that you can't reference a repeated component from another repeat that is in it. I tried to play with the ids and wrap some components in <h:panelGroup/> but that didn't helped.
Then I realised that I don't need to update the whole <p:card/> and it should be enough to update only the second <ui:repeat/>, so I did this:
<h:form id="groupsForm">
<ui:repeat value="#{groupsContainer.groups}" var="group">
<p:outptuText value="#{group.name}" />
<p:card id="group">
<h:panelGroup id="users">
<ui:repeat value="#{group.users}" var="user">
<p:outputText value="#{user.name}" />
<p:commandButton
value="Delete"
process="#this"
actionListener="#{groupsController.deleteUserFromGroup(group, user)}"
update="users"
/>
</ui:repeat>
</h:panelGroup>
</p:card>
</ui:repeat>
</h:form>
but the result was pretty much the same with only different ids:
Cannot find component for expression "users" referenced from "groupsForm:j_idt42:0:j_idt73:0:j_idt102".
So my question is: Can I somehow update repeated component with repeat from inside of the second repeat?

datasource mapping doesn't work when droppable is in nested dataList

This is the main view which contains the draggable items. In this view I have a ui:include for including a UI fragment that also has the drop area.
mainView.xhtml
<p:dataList id="outerList" var="varOuter" value="#{myVO.getOuterList()}">
<div>
<span>#{varOuter.someVal}</span>
</div>
<p:dataList id="innerList" var="innerVar" value="#{myVO.getInnerList()}">
<div class="crew-list">
<h:form>
<h:panelGroup id="draggableItem" layout="block">
<span>#{innerVar.someVal}</span>
</h:panelGroup>
<p:draggable for="draggableItem" opacity="0.5" scope="ab"
revert="true" helper="clone" appendTo="#(body)" zindex="4" >
</p:draggable>
</h:form>
</div>
</p:dataList>
</p:dataList>
...
<ui:include src="fragment.xhtml">
<ui:param name="param" value="#{paramVal}" />
</ui:include>
fragment.xhtml
<p:dataList id="list" var="pos" value="#{myVO.getPositions()}" rowIndexVar="rowIndex">
<ui:fragment rendered="#{!pos.isFilled()}">
<h:panelGroup layout="block" id="dropArea">
<span>Drop Here</span>
</h:panelGroup>
<p:droppable for="dropArea" hoverStyleClass="active"
scope="ab" datasource=":outerList:innerList">
<p:ajax listener="#{crewChangeVO.onDrop}" update="list" />
<f:attribute name="index" value="#{rowIndex}" />
</p:droppable>
</ui:fragment>
</p:dataList>
Now the problem that I run into is that, I am unable to map the datasource on the droparea correctly. Without datasource the drag-drop works but I don't get the data (dragged object) in my bean method and I need a way to know which object was dragged.
Would appriciate any input on how to achive this functionality.
Update
Using a single(non-nested) dataList as the source with a form outside it works. But the problem is that it doesn't work for a nested list. So, for now I am proceeding with design changes and removing the nested list.

p:command to submit a form in overlaypanel

I am trying to put a p:commandButton inside a overlayPanel, to submit the information of a h:form and redirect to another view. So, I use the property action of the button to perform this operation. I have a managed bean associated with this view but the function used for this purpose is never reached. Can u help me?
Here is the code:
advancedSearch-form.xhtml
<h:form>
<h:panelGrid width="100%">
<h:column>
....
</h:column>
....
<p:commandButton value="Submit" action="#{searchForm.save}">
</p:commandButton>
</h:panelGrid>
In another xhtml:
<h:form>
<div>
...
<div class="menu-search">
<p:commandButton id="advancedSearch" icon="ui-icon-carat-1-s" styleClass="ui-search-button" type="button"/>
<p:overlayPanel id="advancedSearchPanel" styleClass="ui-advanced-search-overlay" for="advancedSearch" hideEffect="fade" my="right top" dynamic="true" dismissable="false">
<ui:include src="/search/advancedSearch-form.xhtml"/>
</p:overlayPanel>
</div>
...
</div>
After looking over the properties of overlay, I solved this question by removing the dynamic property of overlaypanel.

Delete picture in a carousel + update

I'v a Carousel with the possiblity to update pictures (stored in db) and to view them in a bigger size. That works fine. But now, i would like to remove them. And that works almost. Almost means, the picture is deleted but the carousel is not correctly refreshed. Here is my code:
<p:tab title="#{vms_uimsgs['vehicle.tab.images']}">
<h:form id="pictures" enctype="multipart/form-data">
<p:fileUpload fileUploadListener="#{vmsVehicleActionBean.handleFileUpload}" mode="advanced" update="vehiclePictureCarousel" sizeLimit="10000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:carousel id="vehiclePictureCarousel" var="imageId" value="#{vmsVehicleActionBean.imageIds}" itemStyleClass="vehiclePictureItem" effect="fade">
<f:facet name="header" value="#{vms_uimsgs['vehicle.tab.images']}"/>
<p:panelGrid columns="1" style="width:100%" cellpadding="5">
<p:graphicImage value="#{graphicImageStore.streamedImageById}" rendered="#{graphicImageStore.hasImage(imageId)}">
<f:param name="id" id="id" value="#{imageId}" />
</p:graphicImage>
<p:commandLink id="deleteImage" update="vehiclePictureCarousel" oncomplete="#{vmsVehicleActionBean.deleteImage()}" title="Delete Picture">
<h:outputText styleClass="ui-icon ui-icon-close" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{imageId}" target="#{vmsVehicleActionBean.selectedImageId}" />
</p:commandLink>
</p:panelGrid>
</p:carousel>
</h:form>
</p:tab>
Or asked differently, why is my carousel correctly refreshed when i add a picture with my file uploader and not when i remove one with a commandlink inside the carousel?
Of course, when a reload the whole page, everything is correct. But I don't want that.
The problem come from oncomplete="#{vmsVehicleActionBean.deleteImage()}", oncomplete is an attribute to call javascript method when ajax have completed, so you should use:
facelet:
actionListener="#{vmsVehicleActionBean.deleteImage(imageId)}"
bean:
public void deleteImage(String imageId){
//delete here
}

how to refresh referenced part of page with prime faces' p:commandLink?

Environment: Tomcat 6 ,jsf 2.0,prime faces 2.2.1 ,chrome explorer
I want to click the "ViewDetail" link in the left expanded tree and show the product's detail info. But the code below didn't work.
Then I add the attribute ajax="false" to the link, it seems work. But the "p:treeTable" which lies on left part of the page is
also refreshed and collapsed. So how can I do for this: click the link on the left expanded tree node, show the info on the right part
of the page,and keep the left expanded tree node still expanded.
<h:form id="BizTypeTreeTableForm" >
<p:layout fullPage="true">
<p:layoutUnit id="left" position="left" scrollable="true" width="350" resizable="true" closable="false" collapsible="true" minWidth="250" >
<p:treeTable id="BizTypeTreeTable" value="# {treeTableController.root}" var="treeTable">
<p:column>
<f:facet name="header">ProductName</f:facet>
<h:outputText value="#{treeTable.TYPENAME.value }" />
</p:column>
<p:column style="width:5%">
<f:facet name="header">Action</f:facet>
<p:commandLink value="ViewDetail" update="content" action="#{treeTableController.showDetail}">
</p:commandLink>
</p:column>
</p:treeTable>
</p:layoutUnit>
<p:layoutUnit id="center" rendered="true" position="center" style="text-align:left;" scrollable="true" >
<h:outputText value="Please click the left tree node" rendered="# {allTabManager.productObject.TypeNo.value eq null}"/>
<div id="content" class="ui-widget">
<div class="post">
<ui:insert name="content_tab" >...</ui:insert>
</div>
</div>
</p:layoutUnit>
</p:layout>
</h:form>
The update must point to a real JSF component in the tree, not to a plain HTML element.
Replace
<div id="content" class="ui-widget">
by
<h:panelGroup layout="block" id="content" class="ui-widget">
A panelgroup with layout="block" will render a <div> instead of a <span>.
I think your reference to the id is not correct since the div and the p:layout are not the same level.
But you can either try to get the absolute id by using update=":content" or update the whole p:layoutUnit:
<p:commandLink value="ViewDetail"
update="center"
action="#{treeTableController.showDetail}">

Resources