overlaypanel primefaces doesnt work fine inside dialog inside tabview - primefaces

I use the dynamic overlayPanel of primefaces inside one p:tab inside one p:dialog like this :
<p:dialog id="dialog" modal="true" header="Nouveau Article"
widgetVar="dlg">
<h:form prependId="false" enctype="multipart/form-data">
<p:tabView id="monpanel">
<p:tab id="tab1" title="Informations">
....
</p:tab>
<p:tab id="tab2" title="Prix">
....
</p:tab>
<p:tab id="tab3" title="Stock et fournisseurs">
<h:outputLabel value="" /><h:outputLabel value="" /><h:outputLabel value="" />
<p:commandButton id="carBtn" value="Selectionner Fournisseurs" type="button" />
<p:overlayPanel appendToBody="true" my="left top" id="carPanel" for="carBtn" hideEffect="fade"
dynamic="true">
<p:dataTable id="table" var="car" rowKey="#{car.fournisseurId}"
value="#{articlesMB.listfournisseurs}" selection="#{articlesMB.selectedFournisseurs}"
rows="10" paginator="true" >
<p:column selectionMode="multiple" style="width:20px" />
<p:column headerText="Id">
<h:outputText value="#{car.fournisseurId}" />
</p:column>
<p:column headerText="Nom">
<h:outputText value="#{car.personne.nom}" />
</p:column>
</p:dataTable>
</p:overlayPanel>
</p:tab>
</p:tabView>
<p:commandButton id="article-ajouter"
update=":messages monpanel :articlesdata"
action="#{articlesMB.ajouter}" value="add" />
</h:form>
</p:dialog>
in the first time it works fine, but when I click on the add button and the validation failed (for any cause) and I click on dynamic button of overlaypanel, it appears but when I check or uncheck one of rows of datatable it disappear, I don't know the cause
do you have any idea how to resolve this problem

You cammandButton should use 'process' attribute, you specify component to submit info(not specify overlay).
For ex:
<p:inputText id="txttest" required="true" value="" />
<p:commandButton process="txttest" id="article-ajouter"
update=":messages monpanel :articlesdata"
action="#{articlesMB.ajouter}" value="add" />

The reason your overlay panel only works once is because you update the panel that holds the command button that overlayPanel is attached to.
It is a bug in overlayPanel emerged after PF 5. You can fix this without resorting process attribute, I think solutions like this reduces the readability of the code.
If you define a widgetVar to overlayPanel, say 'carPanelWDG', and call PF('carPanelWDG').loadContents() function in the onComplete event of the command button everything just works. And even if there is no comment explaining the reason why you did such a thing, anyone can interpret this easily.

Related

Primefaces close modal without hide dialog

I working with primefaces 6.2 on JavaEE 8 .
I have a basic dialog with a commandbutton created a modal over that .(Sory for bad english !)
I want to close modal without closing basic dialog .
How can fix this problem ?
<p:dialog header="Basic Dialog" id="user-management" widgetVar="user-management" width="700px" height="300px" resizable="false">
<p:toolbar>
<f:facet name="left">
<p:commandButton type="button" title="Add" icon="ui-icon-plus" onclick="PF('userDialog').show();"/>
</f:facet>
</p:toolbar>
<p:spacer/>
<p:dataTable value="#{userGroupBean.userSet}" var="user">
// Show user information
</p:dataTable>
</p:dialog>
<p:dialog header="User"
widgetVar="userDialog"
closeOnEscape="true"
resizable="true"
modal="true"
showEffect="fade"
hideEffect="fade"
height="auto"
width="auto">
<h:panelGrid columns="2">
// Some inputs ...
</h:panelGrid>
<p:spacer/>
<div class="dialog-footer">
<p:commandButton value="Save"
oncomplete="PF('userDialog').hide();"
process="#form"
update="user-management"
action="#{userGroupBean.save}"/>
</div>
</p:dialog>
The basic dialog is not 'closed' it is updated via update="user-management" and hence the html that is returned from the server is put in the html dom in with the dialog in the default state: closed. You have several options:
Don't update the dialog but update it's contents (my prefered solution) by adding e.g. a panel inside it and update that
Set a flag in a beanand use visible="#{mybean.dialogIsVisibleFlag}"
in the oncomplete of the ajax call do a PF('user-management').show()

Primefaces - Dialog fields are empty but not all of them

my problem is really strange ( to me at least ).
I have a dialog written in Primefaces.
From the beginning I had the problem that the fields have not been shown, I had to mark them so that I could read the content.
Then I wrote a css styleclass: color black in order to have it shown. This really worked ( for IE and Chrome ). Afterwards, I had to enlarge the columns from 2 to 4 because the dialog became unreadable. Now, the same thing happens again, I cannot read all the fields, here is a screenshot. Maybe, someone knows what I am missing here? Thank you very much.
Here is the code:
<h:form id="form">
<p:dialog header="Transaction Detail" widgetVar="transactionDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
<p:outputPanel id="transactionDetail" style="text-align:left;">
<p:panelGrid columns="4" rendered="#{not empty transactionBacking.selectedTransaction}" columnClasses="label,value">
<h:outputText styleClass="outputText" value="Transaction Id" />
<h:outputText value="#{transactionBacking.selectedTransaction.tableTransactionId}"/>
<h:outputText styleClass="outputText" value="Customer - customerId" />
<h:outputText value="#{transactionBacking.selectedTransaction.customer.customerId}"/>
</p:panelGrid>
</p:outputPanel>
</p:dialog>
</h:form>
</ui:define>
I did a workaround. I wrote
style="color: black"
instead of
styleclass="outputText"
I think there are some problems with our CSSĀ“ but I have to investigate that much more.

p:dialog box not showing updated values

I am into development of an application using primefaces.
My issues is I have P:layout of which is having north, south and center layout, the center layout has dynamic include of the xhtml page the pageRoot value of a backing bean contain the xhtml page name. The layout is enclosed in the "h:form"
<p:layoutUnit position="center">
<p:panel id="centreContent" style="border: none; margin-top: -15px; margin-left: -20px;">
<ui:include src="#{menu.pageRoot}"/>
</p:panel>
</p:layoutUnit>
At Some point the pageRoot property includes a page having a dataList to show multiple link of commandlink like below
<p:panel id="topPnlCourseData" header="Course Data" toggleable="false" style="font-size: 12px; height: 250px;">
<p:dataList id="topPnlCourseDataList" value="#{studentStudyMaterial.mainCourseList}"
var="courseList" type="unordered" itemType="none" paginator="true" rows="10" styleClass="paginated">
<p:commandLink id="topPnlCourseDataListCmdLink" process="#this topPnlCourseDataList"
update="topPnlCourseDataListDialogPnl" oncomplete="PF('topPnlCourseDataListDialogPnl').show()"
title="View Detail">
<f:setPropertyActionListener id="topPnlCourseDataListCmdLinkListener" value="#{courseList}"
target="#{studentStudyMaterial.mainCourse}" />
<h:outputText value="#{courseList.mainCourseAbbriviation}"/>
</p:commandLink>
<h:outputText value="#{courseList.mainCourseAbbriviationDetail}" style="display:inline-block"/>
<p:dialog id="topPnlCourseDataListDialogPnl" header="Course Info" widgetVar="topPnlCourseDataListDialogPnl"
modal="true" showEffect="blind" hideEffect="explode" resizable="false" dynamic="true">
<p:panelGrid columns="2" rendered="#{not empty studentStudyMaterial.mainCourse}" columnClasses="label,value">
<h:outputText value="Id:"/>
<h:outputText value="#{studentStudyMaterial.mainCourse.mainCourseAbbriviation}" />
<h:outputText value="Year" />
<h:outputText value="#{studentStudyMaterial.mainCourse.mainCourseAbbriviationDetail}" />
<h:outputText value="Color:" />
<h:outputText value="#{studentStudyMaterial.mainCourseDetail.mainCourseLevelAbbriviationDetail}"/>
</p:panelGrid>
</p:dialog>
</p:dataList>
</p:panel>
Now the f:setPropertyActionListener is setting the selected values in backing bean and I am setting another property during that call in the Backing Bean itself as well within that setter on behalf of the selected property, i.e. main course and detailed course is subset of main course of type List. The main course values is set and details course values is also set in backing bean. On clicking the link rendered on xhtml page, the dialog box rendered but the values in subset of the selected link do not appear though the maincourse values appear.
Any idea/suggestion what I am doing wrong?
Add p:outputPanel before panelgrid in dialog and updated value p:outPanel its show when dialog rendered

Call a Method when the User clicks in Dropdown in p:autocomplete

I'm working with Primefaces 5.1 and would like a help in component
How I can update the FacesMessages in my page when the user performed one click in the icon from the dropdown in autocomplete( this when the autocomplete is empty)
I've tried many ways but I can not do FacesMessage be updated, that event or how I should conduct is action?
<p:autoComplete id="stepDescriptionDropDownId"
dropdown="true"
value="#{Step.stepSearch.selectedStep}"
converter="basedEntityConverter"
var="stepSearch"
itemValue="#{stepSearch}"
itemLabel="#{stepSearch.description}"
completeMethod="#{Step.doCompleteStepSearchDescription}"
panelStyleClass="autoCompletePanelBorderNone"
immediate="true"
size="30">
<p:column>
<h:outputText value="#{stepSearch.id.stepCode}" />
</p:column>
<p:column>
<h:outputText value="#{stepSearch.description}" />
</p:column>
<p:ajax event="itemSelect" process="#form" update="inputTextStepCodeId, :facesMessagesId" listener="#{Step.doValidateSteps}" />
</p:autoComplete>
In short, how can I call a method when the User clicks on the icon?

Primefaces DataScroller Loader facet not working

I have a primefaces datascroller containing list of accordionPanels in it. I am using 'loader' facet for lazy loading. On clicking more the next chunk of data is listed. The problem is, if I click a commandButton inside the accordion tab, the 'loader' facet stops working. This is my code:
<p:dataScroller layout="block"
value="#{bean.mainList}" var="manvo" chunkSize="3" lazy="true">
<f:facet name="loader">
<p:commandButton type="button" value="More" process="#this" />
</f:facet>
<p:accordionPanel activeIndex="1" dynamic="true" scrollHeight="auto">
<p:tab title="#{manvo.releaseName} >> #{manvo.tcName}">
<p:commandButton value="TestIt" actionListener="#{bean.testSubmit()}" update="#form"/>
</p:tab>
</p:accordionPanel>