I try to show a pop-up calendar in a overlaypanel, but when I click in the associated input box the calendar is displayed behind the overlaypanel and i cannot see the header of the calendar. Here is my code:
<p:overlayPanel id="advancedSearchPanel" styleClass="ui-advanced-search-overlay" dismissable="false" for="advancedSearch" hideEffect="fade" my="right top" dynamic="true">
<h:form>
<h:panelGrid>
<!--<p:inputText
value="#{searchForm.processSubject}"></p:inputText>-->
<p:outputLabel value="Pesquisa:" for="type"/>
<h:selectOneMenu id="type" value="#{searchForm.type}">
<f:selectItems value="#{searchForm.listProcessTypes}"/>
</h:selectOneMenu>
<p:inputText value="#{searchForm.processNumber}"></p:inputText>
<p:calendar id="datetime" pattern="MM/dd/yyyy HH:mm:ss" />
<p:commandButton value="Submit" action="#{searchForm.save}"></p:commandButton>
</h:panelGrid>
</h:form>
</p:overlayPanel>
Any Idea?
I solved the problem by setting
dismissable = "false"
Use p:overlay's appendToBody="true".
Related
I would create a check input information about specified in:
http://www.primefaces.org/showcase/ui/message/messages.xhtml
I create a dataTable with a lot required field (inputText with attribute required="true") and a p:message into datatable section.
Problem is when I click on button to save data: I don't see alert message in my page but starting execution of associated bean.
Why?
My code in .xhtml is this:
<h:form>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<p:dataTable var="myAtt"
value="#{myBean.attributes}"
rowIndexVar="myAttIndex">
<h:inputHidden value="#{myAtt.value}" rendered="#{myAtt.description == 'XXX'}" />
<p:column rendered="#{myAtt.description == 'XXX'}">
<h:outputText value="*" rendered="#{myAtt.required}" />
</p:column>
<p:column rendered="#{ myAtt.description == 'YYY'">
<p:fragment rendered="#{myAtt.description == 'ZZZ'">
<p:fragment rendered="#{myAtt.value == 'value1'}">
<p:inputText size="#{myAtt.maxLength}"
value="#{myAtt.value}"
rendered="#{myAtt.const == 't1'}"
required="true"
id="idText">
<p:ajax process="#this" event="change" update="#form"/>
</p:inputText>
<p:message for="idText"/>
</p:fragment>
</p:fragment>
</p:column>
</p:dataTable>
<br />
<p:commandButton value="Create" action="#{myBean.commit()}" process="#this" update=":MYPAGE"/>
Thanks.
You forgot to indicate an id for the h:form : <h:form id="myForm">
And in the update of the p:commandButton you have to indicate the id of the form : update=":MYPAGE :myForm"
EDIT
According to the PrimeFaces users guide 3.5, the attribute action will be called when the user clicks on the button.
<p:overlayPanel appendToBody="true"
id="panel_l#{level.name.hashCode()}
f{filterTypeConfiguration.filterType.name.hashCode()}"
for="conrolForm_l#{level.name.hashCode()}f
#{filterTypeConfiguration.filterType.name.hashCode()}:
button_l#{level.name.hashCode()}f
#{filterTypeConfiguration.filterType.name.hashCode()}"
dynamic="true" >
...
and in overlayPanel I have:
<p:inputText value="#{filterTypeConfiguration.textToSearch}">
<p:ajax id="ajaxFilterSearch" event="keyup" update="overlayForm_l
#{level.name.hashCode()} f#{filterTypeConfiguration.filterType.name.hashCode()}
:select_l#{level.name.hashCode()}
f#{filterTypeConfiguration.filterType.name.hashCode()}"
</p:inputText>
I need clean data in inputText when overlayPanel is opening or closing.
I didn't use p:overlayPanel yet but I am able to trigger p:dialog diaglodReturn event like, I think it should be similar like this
<p:ajax event="dialogReturn" update="#form" listener="#{backing.refreshPage}" />
Or
Example from primefaces showcase, How about add action attribute for button?
<p:commandButton id="imageBtn" value="Basic" type="button" action="#{backing.refresh}" />
<p:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
<p:graphicImage name="/demo/images/nature/nature1.jpg" width="300" />
</p:overlayPanel>
I have a datatable, and at the last column I will have an edit action, it will trigger the dialog box. However, I found the value in the dialog box is not updated. Can anybody to help on this?
My code as below. In fact the bean.currentItem.name and bean.currentItem.age should base on my selection from the table. I check the bean.currentItem is not null and is refer to my selection from preEdit method, but the value never show up in p:dialog.
<p:dataTable ....>
<p:column...
<p:column...
<p:column>
<f:facet name="header">
<h:outputLabel value="Update" />
</f:facet>
<p:remoteCommand name="preEdit" action="#{bean.preEdit}"
process="#this" update="#this #form:dlg">
<f:setPropertyActionListener target="#{bean.currentItem}"
value="#{thisItem}" />
</p:remoteCommand>
<p:commandLink styleClass="no-decor"
oncomplete="preEdit();PF('dlg').show();" value="Edit"/>
</p:column>
</p:dataTable>
<p:dialog header="#{lbl.tt_cat_upd}" widgetVar="dlg" id="dlg"
resizable="false" >
<h:outputLabel value="#{bean.currentItem.name}" />
<h:outputLabel value="#{bean.currentItem.age}" />
</p:dialog>
How about removing your p:remoteCommand and let your p:commandLink do all the work for you?
Assuming you have a h:form surrounding both your dataTable and your dialog
<p:commandLink action="#{bean.preEdit}" process="#this" update="dlg" styleClass="no-decor" oncomplete="PF('dlg').show()" value="Edit">
<f:setPropertyActionListener target="#{bean.currentItem}"
value="#{thisItem}" />
</p:commandLink>
If your dataTable is not in the same form with your dialog, you might replace update="dlg" by update=":formIdContainingDialog:dlg"
Im trying to update text field from dialog box .The text field is in the parent component. But its not happening . If i give the id of text field in the update of command button . I encountered the error :
javax.faces.FacesException: Cannot find component with identifier "customerCode" referenced from "tabView:lkpSltRec"
Since it is not able to find the component id . I have used the alternative . I have taken the hidden field .After command button is clicked , the hidden field gets updated and through simple javascript function im updating the text field of parent component .The javascript function is called from oncomplete of command button in the dialog box. Since ,as per project requirement i have to achieve it through primefaces only not through javascript . Plz, suggest me the approach in primefaces . Below is the code snippet:
Here ecap:lookup is the the customize component.
Selected Customer <p:inputText id="customerCode"
value="#{sixthTabBBean.customerName}" label="Selected Adddress"></p:inputText>
Selected Customer City <p:inputText id="selectedCity" value="#{sixthTabBBean.customerCity}" ></p:inputText>
<ecap:lookup lookupId="LOV0072" inputId="customerCode" clickStatus="city"
defaultDDValueIndex="0" title="CustomerCode"></ecap:lookup>
New LOV <ecap:lookup lookupId="LOV0092" inputId="customerCode" clickStatus="none"
defaultDDValueIndex="0" title="CustomerCode"></ecap:lookup>
City<p:inputText id="custCity" value="#{sixthTabBBean.customerCity}"
disabled="true" label="City"></p:inputText>
Selected Customer <p:inputText id="customerCode1"
value="#{sixthTabBBean.customerName}" label="Selected Adddress" ></p:inputText>
Selected Customer City <p:inputText id="selectedCity1" value="#{sixthTabBBean.customerCity}" ></p:inputText>
Selected Customer State <p:inputText id="selectedSate1" value="#{sixthTabBBean.customerState}" ></p:inputText>
<ecap:lookup lookupId="LOV0098" inputId="customerCode" clickStatus="state"
defaultDDValueIndex="0" title="CustomerCode"></ecap:lookup>
<p:dialog id="lkpDialog" widgetVar="lpDialogVar" header="Lookup"
modal="true" width="1000" height="600"
rendered="#{lookupSearch.popupRender}" >
<h:form rendered="#{lookupSearch.popupRender}" prependId="false">
<h:panelGrid cellpadding="10" id="diaFrmId">
<p:dataTable id="newfdt" var="flxSearch"
value="#{lookupSearch.lkpSearchCriteriaList}">
<p:column id="newwhc">
<f:facet name="header">
<h:outputLabel value="Search Fields"></h:outputLabel>
</f:facet>
<p:selectOneMenu styleClass="fdd180" id="newwdd"
value="#{flxSearch.searchCriterion.whereClause}">
<f:selectItems value="#{flxSearch.whrClausDropdown}" />
</p:selectOneMenu>
</p:column>
<p:column id="newcoc">
<f:facet name="header">
<h:outputLabel value="Conditions"></h:outputLabel>
</f:facet>
<p:selectOneMenu id="newco" styleClass="fdd95"
value="#{flxSearch.searchCriterion.operator}">
<f:selectItems id="newcriOperatorItms"
value="#{flxSearch.operatorDropdown}" />
</p:selectOneMenu>
</p:column>
<p:column id="newcic">
<f:facet name="header">
<h:outputLabel value="Value"></h:outputLabel>
</f:facet>
<p:inputText id="newcriInpNm"
rendered="#{!flxSearch.inputDate and !flxSearch.boolValue and !flxSearch.required}"
styleClass="285 ftb" deferChangeEvent="true"
value="#{flxSearch.searchCriterion.value}"
maxlength="#{flxSearch.maxLength}"
disabled="#{flxSearch.disableInput}" partialSubmit="true"
labelValue="#{flxSearch.searchCriterion.label}"
required="#{flxSearch.required}">
</p:inputText>
<p:inputText id="newcriInpM"
rendered="#{!flxSearch.inputDate and !flxSearch.boolValue and flxSearch.required }"
value="#{flxSearch.searchCriterion.value}"
maxlength="#{flxSearch.maxLength}"
disabled="#{flxSearch.disableInput}"
labelValue="#{flxSearch.searchCriterion.label}"
required="#{flxSearch.required}">
</p:inputText>
<p:selectOneMenu styleClass="fdd" id="newbldd"
value="#{flxSearch.searchCriterion.value}"
disabled="#{flxSearch.disableInput}"
rendered="#{flxSearch.boolValue }">
<f:selectItems value="#{flxSearch.booleanDropdown}" />
</p:selectOneMenu>
<p:calendar id="newcriDtNm" size="9"
rendered="#{flxSearch.inputDate and !flxSearch.boolValue and !flxSearch.required }"
disabled="#{flxSearch.disableInput}" showOn="button"
value="#{flxSearch.searchCriterion.value}"
labelValue="#{flxSearch.searchCriterion.label}">
</p:calendar>
<p:calendar id="newcriDtM" size="9"
rendered="#{flxSearch.inputDate and !flxSearch.boolValue and flxSearch.required }"
disabled="#{flxSearch.disableInput}"
value="#{flxSearch.searchCriterion.value}"
enableChangeDetector="false" partialSubmit="true"
labelValue="#{flxSearch.searchCriterion.label}"
required="#{flxSearch.required}" showOn="button">
</p:calendar>
</p:column>
</p:dataTable>
<!-- hidden text used to update values in the parent component -->
<p:inputText type="hidden" id="hiddencustomerCode"
value="#{sixthTabBBean.customerName}" ></p:inputText>
<p:inputText type="hidden" id="hiddencustCity"
value="#{sixthTabBBean.customerCity}" ></p:inputText>
<p:inputText type="hidden" id="hiddencustState"
value="#{sixthTabBBean.customerState}" ></p:inputText>
<p:fieldset legend="Combined By">
<h:panelGrid columns="2" cellpadding="10">
<p:selectOneRadio id="newSlctDrk"
valueChangeListener="#{lookupSearch.getSelectedLogOpr}"
value="#{lookupSearch.selLogOpr}"
title="Combine all search criteria with AND or OR">
<f:selectItems id="newSlctDrkItms"
value="#{lookupSearch.logicalOperators}" />
</p:selectOneRadio>
</h:panelGrid>
</p:fieldset>
<h:panelGrid columns="3">
<p:commandButton value="Find" id="lkpfndDg" update="resultFldSet"
actionListener="#{lookupSearch.search}">
</p:commandButton>
<p:commandButton value="Clear" id="lkpClearDg"
actionListener="#{lookupSearch.clear}" />
</h:panelGrid>
<p:fieldset legend="Result" id="resultFldSet">
<p:dataTable binding="#{lookupSearch.lkpResultDataTable}"
value="#{lookupSearch.searchResultsForPage}"></p:dataTable>
</p:fieldset>
<p:commandButton value="Select" id="lkpSltRec" update="customerCode"
oncomplete="lpDialogVar.hide();insertSelectedValue();"
actionListener="#{lookupSearch.selectValue}" />
</h:panelGrid>
</h:form>
</p:dialog>
</h:panelGrid>
Here ecap:lookup is the customize component.
Finally, i have got the solution . The exception i have encountered is because of the form tag . The ajax event fired from the dialog is not able to find the component outside the form .In this case use:
:#{p:component('componentId')}
Here it will search the id not only within the form but outside of it.
I am working on webflow 2.3.1, primefaces 3.4.2 project.
As you see, i tried to update selectOneMenu according to parent city as shown at example from primefaces showcase. However i used p:remoteCommand to call webflow action.
At remoteCommand , if i set process="#this, subSelectOneMenu", action did not call . But if i did not set "process",it called action but it also give error for captcha which is empty.
How can i use remoteCommand to call action partially?
<h:form id="signUpUserInfo">
<p:panelGrid id="grid" columns="2">
<p:selectOneMenu id="citySelectOneMenu" value="#{userBean.address.cityId}" label="#{label.address_city}" onchange="selectionChanged()">
<f:selectItem itemValue="" itemLabel="" />
<f:selectItems value="#{flowScope.cityList}" />
</p:selectOneMenu >
<p:selectOneMenu id="subSelectOneMenu"
value="#{userBean.address.subId}" label="#{label.address_sub}">
<f:selectItem itemValue="" itemLabel="" />
<f:selectItems value="#{flowScope.subList}" />
</p:selectOneMenu>
<p:captcha id="captcha" label="Captcha" language="en" theme="white" required="true" secure="true" />
<f:facet name="footer">
<p:commandButton id="save" value="#{label.save_button}" ajax="false"
action="signUpStandartMember" update="signUpUserInfo" />
</f:facet>
</p:panelGrid>
<p:remoteCommand id="selectionChanged" name="selectionChanged" action="cityChangedAction" update="subSelectOneMenu" process="#this, subSelectOneMenu" />
</h:form>