JSF PrimeFaces overlayPanel submit value - jsf

I would like to submit value form jsf page to bean from overlayPanel with checkbox like this:
To show overlay panel and ajax submission I use this code, and see it's OK in debugger:
<p:commandButton id="joinBtn" value="Basic" type="button" disabled="#{dataPropertyCurrent.notJoinable}"/>
<p:overlayPanel id="joinPanel" for="joinBtn" appendToBody="true" dynamic="false">
<f:facet name="header">Details</f:facet>
<p:dataList value="#{treeBean.getDataPropsCouldBeJoinedWith(dataPropertyCurrent)}" type="definition" var="dataJoinVal">
<h:panelGrid columns="2" cellpadding="10">
<h:column>
<p:selectBooleanCheckbox value="#{dataJoinVal.checked}" id="cbID">
<p:ajax event="change" update="cbID" partialSubmit="true"/>
</p:selectBooleanCheckbox>
</h:column>
<h:column>
<h:outputText value="#{dataJoinVal.caption}" />
</h:column>
</h:panelGrid>
</p:dataList>
<!--<p:commandButton value="Apply" id="btnApplyJoin" type="button" process="#parent" />-->
<h:outputLabel value="ID: #{dataPropertyCurrent.joinDataPropertyId}" />
</p:overlayPanel>
But after it when the overlayPanel is hidden and form submit button being pressed with this code:
<p:commandButton value="Apply join" update="joinAccordionPanel,dsAccordionPanelMain" actionListener="#{treeBean.applyJoinOptions}" />
it sets "false" to bean boolean value again.
So how to submit overlayPanel value to bean properly?
PrimeFaces version: 3.5

I've found explanation here: http://forum.primefaces.org/viewtopic.php?f=3&t=30550#p97737:
"If you are using appendToBody, it's strongly recommended to have a form inside the overlayPanel component that wraps all of the input fields and buttons. This is what you have done in your last solution. However, this means that you cannot place the overlayPanel inside another form in the xhtml page because of the limitation on nesting forms. The best solution is typically to avoid appendToBody wherever it's not absolutely necessary."
Edit
I've added <h:form> inside overlayPanel, and now it works fine:
<p:overlayPanel id="joinPanel" for="joinBtn" appendToBody="true" dynamic="true" >
<h:form id="formTmp">
<f:facet name="header">Details</f:facet>
<p:dataList value="#{treeBean.getDataPropsCouldBeJoinedWith(dataPropertyCurrent)}" type="definition" var="dataJoinVal">
<h:panelGrid columns="2" cellpadding="10">
<h:column>
<p:selectBooleanCheckbox value="#{dataJoinVal.checked}" id="cbID">
<p:ajax event="change" update="cbID" partialSubmit="true"/>
</p:selectBooleanCheckbox>
</h:column>
<h:column>
<h:outputText value="#{dataJoinVal.caption}" />
</h:column>
</h:panelGrid>
</p:dataList>
</h:form>
</p:overlayPanel>

Related

a4j:commandButton doesn't render the element

I've got a JSF page with <rich:tabPanel> which contains 4 tabs.
On the 4th tab I'm trying to use <a4j:commandButton> to execute the action and render resulTable.
Here is the shorten example
<rich:tab header="Journal">
<h:form id="filterForm">
<a4j:jsFunction name="submitByEnter"
action="#{smsLogList.refresh}" render="smsTable" />
<s:div id="divSearch">
<rich:collapsiblePanel header="#{messages['search']}"
switchType="client">
<h:panelGrid column="1">
<s:decorate template="/layout/edit.xhtml">
<ui:define name="label">Package number</ui:define>
<h:inputText id="packNum" style="width:200px"
value="#{smsLogList.packNum}">
<a4j:ajax event="keyup" listener="#{smsLogList.refresh}"
ignoreDupResponses="true" requestDelay="1500"
render="smsTable" />
</h:inputText>
</s:decorate>
<!---some other search elements-->
<s:div styleClass="actionButtons">
<a4j:commandButton id="search" value="#{messages['search']}"
render="smsTable" action="#{smsLogList.go}" />
<a4j:commandButton id="reset" value="#{messages['clear']}"
onclick="document.getElementById('filterForm').reset();"
action="#{smsLogList.clear}" render="divSearch,smsTable" />
</s:div>
</h:panelGrid>
</rich:collapsiblePanel>
</s:div>
<!--- results table-->
<h:panelGrid id="smsTable">
<s:div>
<rich:dataTable value="#{smsLogList.resultList}" var="sms"
id="table" rendered="#{not empty smsLogList.resultList}">
<rich:column>
<f:facet name="header">Type</f:facet>
<h:outputText value="#{sms.smsType}" />
</rich:column>
<!---- some other columns-->
</rich:dataTable>
<rich:dataScroller for="table" />
</s:div>
</h:panelGrid>
</h:form>
</rich:tab>
So, when I'm clicking on the <a4j:commandButton> - nothing happens, but if I'm switching to the other tab and back - the result is as necessary.
I tried to change a4j to <h:commandButton>, but after it's pressed the page switches to the first tab.
Is any solution how to work this out?
The solution is quite simple.
I used <h:form> inside other <h:form>. It will not work anyway. When I remove internal - the jsf works smooth and as it should.

update primefaces or jsf view after ajax call on submit button

I am trying to update a primefaces form (wizard-first step) after an ajax command button request with no success. The command button that makes the actual ajax call is on a dialog. I would like after submitting the request to force my view to refresh.
The command button deletes a record from a datatable. It works fine, record is deleted but when dialog is hidden the datatable keeps displaying the deleted record. I would like to force it somehow to refresh. Any ideas? Could I do it from my backing bean reviewManagerBean.deleteProtocol() method?
Here is the code (my BackBean is viewScoped):
<h:form id="reviewManagerForm">
...
<pe:masterDetail id="masterDetail" level="#{reviewManagerBean.currentLevel}" showBreadcrumb="false" selectLevelListener="#{reviewManagerBean.levelListener}" >
<f:facet name="header" >
<h:panelGroup layout="block" style="margin-top: 10px;" >
<h:panelGroup styleClass="levelTitle ui-state-default ui-corner-all wizard-breadcrumbs#{reviewManagerBean.currentLevel eq 1 ? 'ui-state-hover' : ''}">
<h:outputText value="1: Protocol picker"/>
</h:panelGroup>
...
<p:messages id="mainMessagesPanel" showDetail="true" closable="true" />
</h:panelGroup>
</f:facet>
<pe:masterDetailLevel level="1">
<p:panel id="panel1" header="List of available protocols">
<p:dataTable id="protocolsDataTable" var="cRProtocol" rowKey="#{cRProtocol.revProtId}" value="#{reviewManagerBean.cRReviewProtocolList}"
widgetVar="protocolsTable"
...
selection="#{reviewManagerBean.selectedReviewProtocol}"
selectionMode="single" >
...
<p:ajax event="rowSelect" listener="#{reviewManagerBean.setSelectedRow}" />
<p:ajax event="rowUnselect" listener="#{reviewManagerBean.unsetSelectedRow}"/>
...
<p:column sortBy="#{cRProtocol.revProtTitle}" headerText="Title" style="width:200px;text-align:center;">
<h:outputText value="#{cRProtocol.revProtTitle}" />
</p:column>
...
<p:column>
<p:commandButton value="Delete" onclick="dlg5.show()"
update=":reviewManagerForm:deleteSingleProtocol"
disabled="#{reviewManagerBean.checkifProtocolIsOpen(cRProtocol)}"
ajax="true" process=":reviewManagerForm:deleteSingleProtocol" />
</p:column>
</p:dataTable>
</p:panel>
...
<p:dialog id="dialog-deleteprotocol" header="Delete Image Type" widgetVar="dlg5" dynamic="true" modal="true" resizable="false">
<p:panelGrid id="deleteSingleProtocol">
<p:row>
<p:column>
<h:outputText value="Id:" style="font-weight:bold; padding-right:10px" />
</p:column>
<p:column>
<h:outputText value="#{reviewManagerBean.selectedReviewProtocol.revProtId}" />
</p:column>
</p:row>
...
<p:column>
<p:commandButton id='protocolDelete'
value='Delete'
action='#{reviewManagerBean.deleteProtocol()}'
ajax="true"
onclick="dlg5.hide()" icon="ui-icon-disk"
update=":reviewManagerForm:protocolsDataTable"
process=":reviewManagerForm:deleteSingleProtocol" />
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
Your datatable should be re-rendered properly, you would have gotten an exception otherwise (something like component with id :reviewManagerForm:protocolsDataTable could not be found).
This means that #{reviewManagerBean.cRReviewProtocolList} will get called again. You need to remove the item from that list. This is appropriately done from #{reviewManagerBean.deleteProtocol}.
When #{reviewManagerBean.cRReviewProtocolList} is called after the removal, your datatable will get updated.

Primefaces Dialog not working with Chrome

I have a p:dialog. My intention is to create a list using p:datagrid and when user clicks an item this dialog will open and show its details. Please consider the example of p:datagrid in the showcase. However, currently it works fine in IE but not in Chrome. If I define "modal=true" then the browser turns black but the dialog doesn't show up.
<p:commandButton update=":form:sharePanel" value="Share" style="font-size: 10px" oncomplete="PF('dlg').show()" rendered="false">
<f:setPropertyActionListener target="#{shareController.current}" value="#{status}" />
</p:commandButton>
<p:dialog widgetVar="dlg" resizable="false" id="sharePanel" styleClass="no-border" modal="true">
<h:outputText value="#{shareController.current.url.url}" />
<h:panelGrid columns="3">
<p:dataGrid value="#{shareController.current.url.NLinkList}" var="nshare" columns="1" rendered="#{shareController.current.url.NLinkList.size() > 0}">
<h:panelGroup styleClass="tag noun">
<h:outputText value="#{nshare.noun}" />
</h:panelGroup>
</p:dataGrid>
<p:dataGrid value="#{shareController.current.url.VLinkList}" var="vshare" columns="1" rendered="#{shareController.current.url.VLinkList.size() > 0}">
<h:panelGroup styleClass="tag verb">
<h:outputText value="#{vshare.verb}" />
</h:panelGroup>
</p:dataGrid>
<p:dataGrid value="#{shareController.current.url.PLinkList}" var="pshare" columns="1" rendered="#{shareController.current.url.PLinkList.size() > 0}">
<h:panelGroup styleClass="tag prep">
<h:outputText value="#{pshare.prep}" />
</h:panelGroup>
</p:dataGrid>
</h:panelGrid>
</p:dialog>
What is wrong here?
If you are using Primefaces versions before 4.0 use dlg.show() instead of PF('dlg').show().
And try appending the dialog in body using attribute appendToBody="true", because if the Facelet is more complex and if you are using Layouts the dialog won't fire ind some browsers only model will appear.
<p:dialog appendToBody="true" >

How to set selected item in bean in <p:dataList>

I am using p:dataList because I am developing a PrimeFaces mobile view displaying a list of items. When clicking on any item, another pm:view of the same view should be displayed. But the bean should be notified of the selected item.
Unfortunately I couldn't find a way to update the bean successfully: <p:ajax> inside dataTable throws this exception:
<p:ajax> Unable to attach <p:ajax> to non-ClientBehaviorHolder parent
Using <f:setPropertyActionListener> inside the iterative element fails too because I get:
<f:setPropertyActionListener> Parent is not of type ActionSource
This is my code:
<pm:view id="instrumentsView" >
<pm:content >
<h:form id="instrumentsList" >
<p:dataList var="instrument" value="#{instrumentBean.subscribedInstruments}" >
<h:outputLink value="#newView" >#{instrument.longName}</h:outputLink>
<f:setPropertyActionListener value="#{instrument}" target="#{instrumentBean.selectedInstrument}" />
</p:dataList>
</h:form>
</pm:content>
</pm:view>
Clearly, I am using dataList and outputLink because as far as I understand, they are the components optimized for the use in PrimeFaces mobile lists. But I am available to find other options if necessary.
I found out in the showcase (example titled News) the correct way of handling the problem:
<p:dataList var="instrument" value="#{instrumentBean.subscribedInstruments}" >
<p:column >
<p:commandLink value="#{instrument.longName}" action="pm:newView" update=":compId">
<f:setPropertyActionListener value="#{instrument}" target="#{instrumentBean.selectedInstrument}" />
</p:commandLink>
</p:column>
</p:dataList>
There is a topic explaining this in the primefaces documentation.
Selecting Data (page 124)
indexed_primefaces_users_guide_3_5.pdf
http://www.primefaces.org/documentation.html
Here is the content
<h:form id="carForm">
<p:dataGrid var="car" value="#{carBean.cars}" columns="3" rows="12">
<p:panel header="#{car.model}">
<p:commandLink update=":carForm:display" oncomplete="dlg.show()">
<f:setPropertyActionListener value="#{car}"
target="#{carBean.selectedCar}"
<h:outputText value="#{car.model}" />
</p:commandLink>
</p:panel>
</p:dataGrid>
<p:dialog modal="true" widgetVar="dlg">
<h:panelGrid id="display" columns="2">
<f:facet name="header">
<p:graphicImage value="/images/cars/#{car.manufacturer}.jpg" />
</f:facet>
<h:outputText value="Model:" />
<h:outputText value="#{carBean.selectedCar.year}" />
</h:panelGrid>
</p:dialog>
</h:form>

prime faces command link ajax not working

I am trying to use Ajax with a command link to update a dialog. Te form doesn't have any id, I am not able to run this page also, it says component with "dialog" not found/doesn't exist
<h:form>
<p:tabView id="tabView">
<p:tab id="tab1" title="Tab 1">
<h:panelGrid columns="1" cellpadding="10">
<h:dataTable value="#{testBean.dataList}" var="data">
<h:column>
<h:outputText value="#{data}" />
</h:column>
<h:column>
<p:commandLink action="#{testBean.loadCommentHistory(data)}"
update="dialog" oncomplete="dlg.show()">
<h:graphicImage url="resources/theme1/images/comments.gif"
styleClass="basicImageStyle" />
</p:commandLink>
</h:column>
</h:dataTable>
<p:dialog id="dialog" header="Dynamic Dialog" widgetVar="dlg">
<h:outputText value="#{testBean.commentHistory}" />
</p:dialog>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
The p:dataTable itself is a container. The p:commandLink is searching within the p:dataTable for an element with an id "dialog".
Solution: add an id to the form and refer to the dialog as ":formid:dialog".
Edit:
The p:tabView or the p:tab is also a container so check the id of the dialog in your browser and use that one. ;-) It should be noted to avoid id's as jdt_id4.

Resources