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)
Related
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;
}
So i have designed a simple form having selectOneListbox / selectManyMenu elements which I am using to generate a piece of text based upon the user selections.
It's working fine. Now what I want is when the user clicks 'clear' button, the selections should be undone and the page should come back to the initial state(no selections).
How can I achieve this ?
xhtml
<h:form>
<h:panelGrid columns="6" style="margin-bottom:10px;" cellpadding="5" columnClasses="label, value">
<p:panel>
<h6 style="width:10.4em;background-color:#ACBECE;">Comment Type</h6>
<!-- comment type -->
<p:selectOneListbox id="basic1" value="#{decisionTreeBean.option1}" style=" font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.commentType}" var="X" itemLabel="#{X}" itemValue="#{X}" />
</p:selectOneListbox>
</p:panel>
<p:panel>
<h6 style="width:10.4em;background-color:#ACBECE;">MTCN</h6>
<p:selectManyMenu id="advanced1" value="#{decisionTreeBean.option2}" showCheckbox="true" style="font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.mtcns}" var="X" itemLabel="#{X}" itemValue="#{X}" />
</p:selectManyMenu>
</p:panel>
</h:panelGrid>
<!-- Text Area -->
<p:inputTextarea id="decisionNotes" readonly="#{facesContext.renderResponse}" value="#{decisionTreeBean.decisionNotes}" styleClass="dispostionInputTextArea" autoResize="true">
</p:inputTextarea>
<br/>
<p:commandButton id="generateBtn" value="Generate Text" action="#{decisionTreeBean.generateText}" update=":#{p:component('decisionNotes')}">
</p:commandButton>
<p:commandButton id="clearBtn" value="Clear" action="#{decisionTreeBean.clearText}" update=":#{p:component('decisionNotes')}">
</p:commandButton>
<p:ajaxStatus onstart="PF('statusDialog').show()"
onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
closable="false" resizable="false" showHeader="false">
<p:graphicImage value="/images/ajax-loader.gif" />
</p:dialog>
</h:form>
In my bean, I have a clear method which clears the content of the textarea. I want this button to undo the selections as well as part of the ajax call.
public void clearText() {
this.decisionNotes=" ";
}
(for brevity I have included just 2 columns here in xhtml. There are in total 5 separate selection columns with same functionality)
I would simply reset the values of the Menu/Box in the bean method too:
public void clearText() {
this.decisionNotes=" ";
this.option1 = null;
//and so on...
}
Then you just need to update the components in the update attribute of your button. But I'd update the whole form instead of each component if you want to refresh nearly each component in the form. So just use update="#form":
Note: The default process value of p:commandButton is #form. So your clear button will process the whole form on every click altough it doesn't need to. I'd set it to process="#this", so it will just perform it's action.
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 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?
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