I have this code:
<p:overlayPanel id="advancedSearchPanel" styleClass="ui-advanced-search-overlay" for="advancedSearch" hideEffect="fade" my="right top" dismissable="false">
<h:form>
<h:panelGrid>
....
<p:commandButton id="btnOpenTree" value="Lista classificadores" onclick="dlg1.show();" />
...
</h:panelGrid>
<p:dialog widgetVar="dlg1">
<p:tree id="treeClassifier" value="#{searchForm.rootClassifier}" var="node" selectionMode="checkbox" selection="#{searchForm.selectedClassifiers}" style="height: 200px;width: 70%;overflow: auto; float: right;">
<p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
<h:outputText value="#{node.description}"/>
</p:treeNode>
</p:tree>
</p:dialog>
</h:form>
</p:overlaypanel>
I try to call the dialog when clicking on the button btnOpenTree, but when i click on this component the overlaypanel is closed and the dialog never appears. I try to put the dialog outside the form body but nothing happens. Any idea why i cannot display de dialog?
Related
I want to implement a sort of post-it function that users can use to make notes. I implemented this by opening p:textEditor in a dialog with "Save" and "Cancel" buttons at the bottom. This mostly works fine, the only problem is that I can't delete text in the textEditor using the backspace-key. Deleting using the del-key works fine.
Here is my code:
The commandButton that opens the dialog containing the textEditor:
<p:commandButton value="openPostit" widgetVar="openPostit"
onsuccess="PF('frmPostit').show();"
/>
The dialog:
<h:form id="frmPostit">
<p:dialog id="dlgPostit" widgetVar="dlPostit"
dynamic="false" modal="false"
fitViewport="false" resizable="true"
closable="true"
onHide="$('#frmPostit\\:quit').click();">
<p:hotkey bind="esc" handler="PF('dlgPostit').hide();" />
<p:outputPanel>
<p:textEditor id="textPostit" widgetVar="textPostit"
value="#{backingbean.text}"
style="vertical-align: top; height: 450px">
</p:textEditor>
<div style="position: absolute; bottom: 10px" >
<p:commandButton value="Save"
actionListener="#{backingbean.saveText()}"
accesskey="s"
process="#form"
icon="fa fa-check-square-o"
oncomplete="PF('dlgPostit').hide();}"
/>
<p:commandButton value="Cancel" id="quit"
icon="fa fa-close"
process="#this" resetValues="true"
immediate="true"
accesskey="a"
oncomplete="PF('dlgPostit').hide();" />
</div>
</p:outputPanel>
</p:dialog>
</h:form>
Any idea why the backspace-key won't delete the text in the textEditor?
EDIT: Additional information I found that may be interesting: I can delete linebreaks using the backspace-key (but not text)
First - I'm new to PrimeFaces and I'm trying to display a warning dialog on top of another already spawned dialog box.
View code looks like (simplified):
<p:dialog id="userDialog" header="User Account" widgetVar="userDialogView" modal="true" resizable="true" closable="fasle" showHeader="true" height="400" width="880px">
<h:form id="dataDialogForm">
...
</h:form>
</p:dialog>
<p:dialog id="warnDialog" header="Warning!" widgetVar="warnDialog" modal="true" appendTo="#(body)" height="300px" width="600px" resizable="false">
<h:outputText value="You are trying to delete. Do you want to proceed? Yes/No" />
</p:dialog>
and controller for warnDialog to spawn it
RequestContext.getCurrentInstance().execute("showDialog('warnDialog')");
warnDialog is getting spawned correctly but displayed under userDialog dialog instead on top of it.
App is using PrimeFaces v6.0
org.primefaces.webapp.PostConstructApplicationEventListener.processEvent Running on PrimeFaces 6.0
Edit:
Tested confirmDialog code (simplified) was like:
<p:dialog id="userDialog" header="User Account" widgetVar="userDialogView" modal="true" resizable="true" closable="fasle" showHeader="true" height="400" width="880px">
<h:form id="dataDialogForm">
...
<p:confirmDialog widgetVar="warnDialog" header="Confirmation" severity="warn" modal="true" resizable="false" position="top,left">
<f:facet name="message">
You are trying to delete. Do you want to proceed?
</f:facet>
<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="pi pi-check" />
<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="pi pi-times" />
</p:confirmDialog>
</h:form>
</p:dialog>
That one wasn't producing blocking overlay over userDialog neither wasn't positioning to the top left of the viewport rather than to the element which triggered confirmDialog.
I have solved my problem by overriding PrimeFaces CSS, which for some reason wasn't handling properly overlaying dialog boxes (compared to vanilla jQuery UI or Bootstrap) in versions 5.x and 6.x.
My solution looks like:
<p:dialog id="userDialog" header="User Account" widgetVar="userDialogView" modal="true" resizable="true" closable="fasle" showHeader="true" height="400" width="880px">
<h:form id="dataDialogForm">
...
</h:form>
</p:dialog>
<p:dialog id="warnDialog" header="Warning!" widgetVar="warnDialog" modal="true" height="300px" width="600px" resizable="false" styleClass="dialogWarn-fix">
<h:outputText value="You are trying to delete. Do you want to proceed? Yes/No" />
</p:dialog>
and CSS for it:
.dialogWarn-fix {
z-index: 9999 !important;
}
I have primefaces tree with button and outputtext in treenode. Ajax row select event calls rendering of button. The button has primefaces tired menu which has to appear when button is clicked. The problem is that the button click calls the row select event and the button is rerendered and the menu dissapeared.
<p:tree id="tree1" value="#{treeDNDView.root1}" var="node" selectionMode="single"
selection="#{treeDNDView.selectedNode1}">
<p:ajax event="select" update=" mainform:tree1"/>
<p:treeNode>
<h:panelGrid columns="3" columnClasses="width-5pct,verticalLine,width-95pct">
<p:outputPanel>
<p:commandButton id="dynaButton" value="Show" rendered="#{treeDNDView.selectedNode1.data eq node}" type="button"/>
<p:tieredMenu id="treeNodePanel" overlay="true" trigger="dynaButton" my="left top" at="left bottom">
<p:menuitem value="Save" action="#{menuView.save}"/>
</p:tieredMenu>
</p:outputPanel>
<p:spacer width="5px"/>
<p:outputPanel>
<h:outputText value="#{node}" escape="false"/>
</p:outputPanel>
</h:panelGrid>
</p:treeNode>
</p:tree>
How to separate button click and row select events in this case? How rewrite code to make functionaliry succesfull working?
The problem will be solved by adding the .stopPropagation() to on click event.
<p:outputPanel>
<div onclick="(function(e) { e.preventDefault(); e.stopPropagation(); })(event)">
<p:commandButton id="dynaButton" value="Show" rendered="#{treeDNDView.selectedNode1.data eq node}" type="button"/>
<p:tieredMenu id="treeNodePanel" overlay="true" trigger="dynaButton" my="left top" at="left bottom">
<p:menuitem value="Save" action="#{menuView.save}"/>
</p:tieredMenu>
</div>
</p:outputPanel>
I have a PrimeFaces dialog, that has two command buttons that executes some code in the backing bean. I want to block the dialog within the action.
I managed to do it using blockUI, but when the blockUI is present, and I open the dialog, it appears at the bottom of the page.
If I remove the blockUI component, the dialog opens at the center of the page, as I want. But I want it to be centered and with the blockUI.
<p:dialog header="Attention" id="dialog" position="center"
widgetVar="dialog" modal="true" closable="false"
dynamic="true" closeOnEscape="false">
<div class="internal-margin-top">
<h:outputText value="Location" styleClass="ui-outputtext" />
<p:inputText value="#{activityBean.location}"
id="inputLocation" maxlength="15">
</p:inputText>
</div>
<div class="internal-margin-bottom">
<p:commandButton id="closureYes" value="Yes"
styleClass="btn-green"
onstart="PF('block').show();"
oncomplete="PF('dialog').hide(); PF('block').hide();"
action="#{activityBean.processItem()}" process="#all">
</p:commandButton>
<p:commandButton id="closureNo" value="No"
styleClass="btn-red"
onstart="PF('block').show();"
oncomplete="PF('dialog').hide(); PF('block').hide();"
action="#{activityBean.processActivity()}" process="#all" />
</div>
</p:dialog>
<p:blockUI block="scrapDialog" widgetVar="block">
<p:graphicImage library="images" name="loading_bar.gif" />
</p:blockUI>
Thanks in advance.
Example with a centered modal dialog:
<p:dialog header="Header" position="center" widgetVar="wv_dialog" modal="true" closable="false" dynamic="true" closeOnEscape="false">
<h:form id="dialogform">
<p:panelGrid columns="1">
<p:inputText value="test"/>
<p:inputText value="test"/>
<p:inputText value="test"/>
<p:inputText value="test"/>
</p:panelGrid>
<p:commandButton id="closebutton"
value="Close"
oncomplete="PF('wv_dialog').hide();"
action="#{testBean.actionTest()}"
process="#form"/>
<p:blockUI block="dialogform" trigger="closebutton"/>
</h:form>
</p:dialog>
I want to open a dialog box when selectbutton is pressed and that dialog box should show more detail related to the selected entry. my code is like this.
<p:commandButton id="selectButton" update=":form:display" oncomplete="moreviewDialog.show();" icon="ui-icon-search" title="View" style="width: 30px; height: 30px">
<f:setPropertyActionListener value="#{pMData}" target="#{managedBean.selectedRecord}" />
</p:commandButton>
<p:dialog header="History Data" widgetVar="moreviewDialog" resizable="false" id="moreviewDlg" showEffect="fade" hideEffect="explode" modal="true">
<h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">
<h:outputText value="CellId:" />
<h:outputText value="#{managedBean.selectedRecord.cellid}" style="font-weight:bold"/>
</h:panelGrid>
</p:dialog>
and managedBean is like this.
private PMData selectedRecord;
public void setSelectedRecord(PMData selectedRecord){
this.selectedRecord=selectedRecord;
}
public PMData getSelectedRecord(){
return selectedRecord;
}
But dialogbox does not show any value.
You forgot to provide an action in the commandButton