I have a overlay panel for a selection of values for an input text.
If the overlay panel is appended to body it is displayed correctly and lays over the dialog. But in this case the ajax listner inside the overlay panel is only fired once. The second time (and all other times) the backing bean method is not executed from the listener.
When I change appendToBody to false, the ajax listener inside the overlay panel fires every time, but the overlay panel is not display over the border of the dialog. Is there a solution for this? Tried to play with z-index without success.
Edit:
With the following overlay panel code it works:
<!-- if overlay is appended to body, it works only once -->
<p:overlayPanel widgetVar="#{widgetVar}" appendToBody="false" styleClass="clSelectionPanel" dynamic="true">
<p:tree value="#{clContentController.getClRoot()}" var="element"
selectionMode="single" draggable="false" droppable="false" dynamic="true">
<p:ajax event="select" onstart="PF('#{widgetVar}').hide();" oncomplete="hitlistTableResized();"
listener="#{clContentController.ok(element)}" immediate="true" update="#(.#{updateClass})" />
<p:treeNode ...
</p:tree>
</p:overlayPanel>
On input text with buttons to add value and clear value:
<p:inputText value="#{curProperty.value}" readonly="true"
required="#{curExtendedEntryField.required}" styleClass="editMaskChoiceInput">
</p:inputText>
<p:commandButton immediate="true"
actionListener="#{clController.setSelectedObject(curProperty)}"
oncomplete="PF('clSelectionPanelEditVar').loadContents('#{component.clientId}');"
title="Add Value" process="#this" />
<p:commandButton immediate="true"
actionListener="#{editPropertyBL.clearCSelection(curProperty)}"
title="Clear Value" update="#(.editMaskChoiceInput)" />
The trick in my case was to inclusion the overlay panel. I have done this in the input text field iteration before, but now I define it under the form:
<h:form id="editPropertyFormId">
<ui:include src="/sections/dialog/editPropertyDialog.xhtml" />
<ui:include src="/sections/dialog/clSelectOverlay.xhtml">
<ui:param name="widgetVar" value="clSelectionPanelEditVar" />
<ui:param name="updateClass" value="editMaskChoiceInput" />
</ui:include>
Regards
Oliver
The code below works for me. Include your code and the JSF/Primefaces version you are using.
<p:dialog closable="true"
visible="true">
<h:form>
<p:inputText id="inputtext">
</p:inputText>
<p:overlayPanel for="inputtext">
<p:commandButton value="Click to test">
<p:ajax oncomplete="alert('test');"/>
</p:commandButton>
Overlay content
</p:overlayPanel>
</h:form>
</p:dialog>`
Related
Lets assume i have next graphic image tag inside a form
<p:lightBox styleClass="imagebox " id="imageLightBox" rendered="true">
<h:outputLink value="http://..../center/#{myBean.centerId}/picture" title="Bla bla bla">
<h:graphicImage value="http://..../center/#{myBean.centerId}/picture" />
</h:outputLink>
</p:lightBox>
and i have next primefaces command button
<p:commandButton icon="fa fa-save" value="Save" title="Save" actionListener="#{myBean.saveCenterImage()}" update="#form" >
So how can i re-render graphicImage when i click on commandButton.
I think you need to use p:graphicImage instead of h:graphicImage and set the attribute cache=false so that the browser will not cache the image.
I have a p:dialog containing a p:dataTable; when a row gets selected I want to enable a p:commandButton and when clicked a textarea should be updated - but the textarea component appears af it was validated (red outlining) and the value is always null.
The textarea:
<c:set property="resolution" value="#{cc.attrs.resolution}" target="#{cc.attrs.bean}" />
...
<h:outputLabel for="resolution" value="#{text['task.action.resolution']}" />
<p:inputTextarea id="resolution"
rows="10"
value="#{cc.attrs.bean.resolution}"
required="true" requiredMessage="#{text['task.action.required.resolution']}"
/>
The dialog:
<p:dialog id="userNotesDialog"
widgetVar="userNotesDialogVar"
header="#{text['task.action.user_notes']}"
... >
<p:dataTable id="userNotesTable"
value="#{cc.attrs.bean.userNotesOptions}"
rendered="#{!cc.attrs.bean.userNotesOptions.isEmpty()}"
var="userNote"
selection="#{cc.attrs.bean.selectedUserNote}"
selectionMode="single" rowKey="#{userNote.id}">
<p:ajax event="rowSelect"
listener="#{cc.attrs.bean.onUserNoteSelect}"
update=":#{cc.clientId}:actionForm:chooseUserNote"
/>
<p:column>
Some content here
</p:column>
</p:dataTable>
<p:commandButton id="chooseUserNote"
disabled="#{cc.attrs.bean.selectedUserNote == null}"
value="#{text['task.action.user_notes.select']}"
action="#{cc.attrs.bean.setResolutionWithUserNote}"
oncomplete="PF('userNotesDialogVar').hide()"
update=":#{cc.clientId}:actionForm:parentPanel :#{cc.clientId}:actionForm:resolution">
<f:setPropertyActionListener target="#{cc.attrs.bean.resolution}" value="#{cc.attrs.bean.selectedUserNote.noteText}" />
</p:commandButton>
</p:dialog>
Note: the whole code is enclosed by a form (actionForm).
When the dialog is closed, the resolution component is supposed to filled with the selected value, but it appears to be null - am I missing something?
It turned out to be a forgotten c:set that was reposting the initial value to the textarea component. The problem was solved when c:set was removed.
Hello I am trying to implement some primefaces commandbuttons in a p:datatable. My need is almost identical to this post:
f:setPropertyActionListener not invoked
Basically I need to have a column of buttons in a , click on one button will pass the object of the current row to the bean, and a dialog will pop out, showing some information of the chosen object.
The following is the relevant code:
<f:view>
<body>
<h:form id="theForm">
<p:dataTable id="testFailures" value="#{testDetails.report.failures}" var="failure"
styleClass="baseTable">
<p:column id="requestColumn">
<f:facet name="header">
<h:outputText value="Request" id="requestHeaderText" />
</f:facet>
<p:commandButton value="Detail" update="requestDialog"
oncomplete="PF('dlg1').show();" type="button">
<f:setPropertyActionListener
target="#{testDetails.selectedFailure}" value="#{failure}" />
</p:commandButton>
<h:message for="requestDialog" />
<p:dialog id="requestDialog" header="Request Dialog"
widgetVar="dlg1" dynamic="true">
<h:outputText value="#{selectedFailure.request}" />
</p:dialog>
</p:column>
</p:dataTable>
</h:form>
<h:message for="theForm" />
<h:message for="responseDialog" />
<p:dialog id="responseDialog" header="Request Dialog"
widgetVar="dlg2" dynamic="true">
<h:form>
<h:outputText value="#{selectedFailure.request}" />
</h:form>
</p:dialog>
</body>
</f:view>
I tried to put the dialog in different positions (see my "dlg1" and "dlg2"). But neither works. No dialog showing. does not show anything either. And I don't see any error message in the browser's console window. (I think there is a exclamation warning).
I have tried debug mode, and set method for the property "selectedFailure" is not called.
Try to remove type="button" from your commandButton and it should work. Also dialogs should not be placed inside dataTables so the position of "dlg2" is more correct.
I've got a dialog with selectOneMenu.
User chooses the decision, presses 'ok' and dialog content changes according to decision (rendering content1.xhtml or content2.xhtml).
The problem is that initial combo is very small, whereas content1.xhtml contains a wide table.
When user chooses 'decision1' and presses 'ok', the dialog extends to the right border of the screen.
It is no longer centered, and the user can't move it (when he tries, it streches instead of moving).
<p:dialog id="mainDialogId" widgetVar="mainDialog" modal="true" appendToBody="true" >
<p:messages autoUpdate="true" />
<h:form id="mainForm">
<p:panel rendered="#{bean.mode eq 'mode0'}">
<p:selectOneMenu id="mainCombo" value="#{bean.decision}" style="width: 100%;">
<f:selectItem itemLabel="" itemValue="" noSelectionOption="true" />
<f:selectItem id="decision1" itemValue="decision1" itemLabel="decision1" />
<f:selectItem id="decision2" itemValue="decision2" itemLabel="decision2" />
</p:selectOneMenu>
<h:panelGroup style="display:block; text-align:right">
<p:commandButton id="ok" value="ok"
actionListener="#{bean.handleDecision()}"
update=":#{p:component('mainForm')}, :#{p:component('form1')}, :#{p:component('form2')}" >
</p:commandButton>
<p:commandButton id="cancel" value="cancel" oncomplete="mainDialog.hide();" immediate="true" />
</h:panelGroup>
</p:panel>
</h:form>
<h:form id="form1" >
<p:panel id="panel1" rendered="#{bean.mode eq 'mode1'}" >
<ui:include src="/WEB-INF/contents/content1.xhtml" />
</p:panel>
</h:form>
<h:form id="form2">
<p:panel id="panel2" rendered="#{bean.mode eq 'mode2'}" >
<ui:include src="/WEB-INF/contents/content2.xhtml" />
</p:panel>
</h:form>
</p:dialog>
Here's a button that displays the dialog:
<p:commandButton value="Go" action="#{bean.prepare()}" update=":#{p:component('mainDialogId')}" oncomplete="mainDialog.show()" />
When I change:
update=":#{p:component('mainForm')}, :#{p:component('form1')}, :#{p:component('form2')}"
to:
update=":#{p:component('mainDialogId')}"
after pressing 'ok' the dialog disappears.
Setting fixed dialog width (width="600") helps, but it's not a solution (it looks bad in both cases).
I want the dialog to recenter itself after it is resized.
Please help.
Primefaces 3.5
When I change to:
update=":#{p:component('mainDialogId')}"
That's the right solution. Stick to it. You need to update the <p:dialog> itself in order to get it to fit.
after pressing 'ok' the dialog disappears.
Prevent that from happening by checking in dialog's visible attribute if 'ok' button was pressed:
<p:dialog ... visible="#{not empty param[ok.clientId]}">
...
<p:commandButton binding="#{ok}" ... />
...
</p:dialog>
I do not know if this is possible using just primefaces and JSF but I have a panel, which is collapsed on View Entry. I can open the Panel which has a checkbox that triggers an update of the Panel.
The problem is that when the panel is updated by Ajax, the Panel is collapsed again. But I want to retain the current open status of the Panel. It should no close on update. Is this possible?
I use PF 3.2 and JSF2.1
<p:fieldset style="width:200px;height:300px;overflow:auto;">
<h:outputLabel value="Available Applications"
style="font-weight: bold;font-size: 14px;" />
<br />
<br />
<h:panelGroup>
<ui:repeat var="category"
value="#{epsEditController.subscriptionCategoryVOs}">
<p:panel header="#{category.applicationCategory.name}"
id="panell" toggleable="true" closable="false" toggleSpeed="500"
collapsed="true"
widgetVar="panel_#{category.applicationCategory.name}">
<h:panelGrid columns="2" border="0">
<h:outputLabel value="Select all"
style="font-weight: bold;float:left;" />
<p:selectBooleanCheckbox value="#{category.allSelected}">
<p:ajax event="change"
listener="#{epsEditController.selectionChanged(category)}"
update="panell" />
</p:selectBooleanCheckbox>
</h:panelGrid>
<ui:repeat var="subcat"
value="#{category.applicationSubcategoryVOs}">
<p:selectBooleanCheckbox value="#{subcat.selected}"
title="#{subcat.applicationSubcategory.name}"
itemLabel="#{subcat.applicationSubcategory.name}" />
</ui:repeat>
</p:panel>
</ui:repeat>
</h:panelGroup>
</p:fieldset>
The reason the panel was collapsed after each update is caused by using a static collapsed="true" on the panel. This can be fixed in one of two ways
Just updating the content of the panel and not the panel
Keeping track of the state of collapsed state of the panel via ajax and use that state as the value of the collapsedattribute
Updating the content
By putting the form within the panel and only updating that form you effectively update the content instead of the panel. This makes sure that only the form is refreshed and the panel state is kept intact.
<p:panel header="#{category.applicationCategory.name}" id="panell"
toggleable="true" closable="false" toggleSpeed="500"
collapsed="true"
widgetVar="panel_#{category.applicationCategory.name}">
<h:form id="epsAppForm">
<h:panelGrid columns="2" border="0">
<h:outputLabel value="Select all"
style="font-weight: bold;float:left;" />
<p:selectBooleanCheckbox value="#{category.allSelected}">
<p:ajax event="change"
listener="#{epsEditController.selectionChanged(category)}"
update="#form" />
</p:selectBooleanCheckbox>
</h:panelGrid>
........
</h:form>
</p:panel>
Using EL instead of a fixed value
You can put EL in the collapsed attribute instead of the fixed collapsed="true". Something like
collapsed="#{myBean.toggleStates[category.applicationCategory]}"
You can then keep track of the state of the pannel via ajax calls
<p:ajax event="toggle" listener="#{myBean.toggleState(category.applicationCategory)" />
...'myBean' code:
Map<ApplicationCategory, boolean> toggleStates = new HashMap<>();
... prepopulate toggleStates on #init or something
public void toggleState(ApplicationCategory myCategory) {
toggleStates.put(myCategory, !(toggleStates.get(myCategory));
}