I have p:editor inside my dialog. when i minimize and restore the dialog again, the data in editor is gone and editor is disabled. Below is the xhtml code
<p:dialog closeOnEscape="true" responsive="true" widgetVar="dlg" id="dlg1" resizable="false" draggable="true" closable="true" dynamic="true" modal="false" width="97%" minimizable="true" appendTo="#(body)" header="Dialog" onShow="PF('dlg').initPosition()">
<pe:ckEditor toolbar="#{config['ckEditor.toolBar']}" id="body" widgetVar="editor" readonly="false" width="100%" maxlength="50000" value="#{myBean.textVal}" />
</p:dialog>
i have tried both primefaces editor and primefaces ckEditor but facing same issue on both.
currently using:
primefaces-6.1
primefaces-extensions-6.1.1
jsf-2.2
Edit: i have downloaded primefaces showcase and having the same issue on showcase too. Below is the code snippet.
<p:dialog minimizable="true" modal="false" id="newDlg" widgetVar="dlgNew">
<p:editor value="test"/>
</p:dialog>
Screenshot1: Dialog when initial load.
initial load
Screenshot2: Disabled dialog after minimizing and restoring on firefox
Dialog on firefox
Screenshot3: Disabled dialog after minimizing and restoring on chrome
Dialog on chrome
apparently, it's a primefaces defect. you can check it
here. Hopefully it will be fixed soon.
Related
I have a dynamic Dialog with a CommandButton or an OutputLabel inside, using a value that takes time to generate. To avoid loosing time when loading the page, I used the dynamic param of the dialog. Unfortunately, my function is still called and the necessary time to display the page is very long.
<p:dialog dynamic="true">
<h:outputText value="#{myBean.myFunction()}"/>
</p:dialog>
Any idea what the issue could be?
Using PF Version 11.0.7
Add appendTo="#(body)" to p:dialog, that should help.
<p:dialog appendTo="#(body)" dynamic="true">
<h:outputText value="#{myBean.myFunction()}"/>
</p:dialog>
visit: https://primefaces.github.io/primefaces/12_0_0/#/core/dialogframework
First of all, this issue is on Edge only, everything works just fine on Chrome and Firefox.
I'm working with JSF 1.2 and RichFaces 3.3.3.Final (with community fix for IE9+).
I have a rich:modalPanel which is opened by a a4j:commandButton. On the modal panel there is a h:commandButton which hides the modal panel and exports a pdf generated with jasperReports. My issue is that after exporting a file for the first time, the modal panel doesn't show up anymore. I have to reload the page and then it works again. There's nothing new in console when I press a4j:commandButton to open the modal panel, the last log is "HTML1300: Navigation occured." which comes from pressing h:commandButton.
Open modal panel (contents.jspx) - sets printBean.showModalPanel to true:
<a4j:commandButton
image="/img/print.gif"
styleClass="clsCursorPointer"
action="#{ printBean.onExportReport}"
ajaxSingle="true"
reRender="printConfirmationPanel" />
Modal panel (forms.jspx):
<h:panelGroup id="printConfirmationPanel" >
<rich:modalPanel id="printConfirmationMP"
autosized="true"
showWhenRendered="true"
rendered="#{ printBean.showModalPanel}" >
<h:form>
<h:panelGrid columns="2" style="margin: auto">
<h:commandButton id="confirmButton" <--- Export button
value="#{ msgs['printButton']}"
actionListener="#{ printBean.onExportButton}" >
<f:attribute name="format" value="PDF"/>
(more attributes)
</h:commandButton>
<rich:componentControl
attachTo="confirmButton"
for="printConfirmationMP"
operation="hide"
event="onclick" />
</h:panelGrid>
</h:form>
</rich:modalPanel>
</h:panelGroup>
Problem is solved by updating Edge to version 81.0.416.53.
Someone who have used Primefaces 4.0-SNAPSHOT may have noticed the following warning.
The appendToBody attribute of the ConfirmDialog will be deprecated in
future versions. Please use appendTo="#(body)" now
Along with Primefaces 4.0 RC1, I have this piece of code.
<h:body>
<h:form prependId="true" id="form">
<p:confirmDialog id="confirmDialog"
widgetVar="confirmDeleteMultiple"
message="Message"
showEffect="true"
hideEffect="true"
header="Header"
severity="alert"
closeOnEscape="true"
appendTo="#(body)" <-----------------
closable="true">
<p:commandButton id="btnYes"
value="Yes"
process="#this"
oncomplete="confirmDeleteMultiple.hide()"/>
<p:commandButton id="btnNo"
value="No"
onclick="confirmDeleteMultiple.hide()"
type="button" />
</p:confirmDialog>
<p:commandButton oncomplete="confirmDeleteMultiple.show()"
update=":form:confirmDialog"
actionListener="#{testManagedBean.insert}"
ajax="true" type="submit" value="Submit"/>
</h:form>
</h:body>
When the only command button on the page is clicked, the dialog appears with the two buttons given.
On pressing any of these buttons, the dialog disappears but leaving the background opacity. The background opacity loses only when the page is reloaded.
Why does this happen with this new version? Any suggestion? In earlier versions, this was just fine.
It is associated with showEffet and hideEffect attributes of confirm dialog - from PrimeFaces Forum.
There is a misuse of effect attributes, "true" is not a valid value,
should be bounce, fade ... 4.x is more strict about wrong attribute
values
I am using Primefaces 3.4.2 with JSF 2.0
I have the following in a dialog popup in JSF page.
<p:dialog header="Create New Request" style="font-weight:bold"
widgetVar="newDialog" resizable="false" id="newDlg"
showEffect="fade" hideEffect="fade" appendToBody="true"
modal="true" position="center top" width="850" height="450">
<p:panelGrid columns="2">
<h:outputLabel value="Employee" for="employee" />
<p:selectOneMenu id="employee" value="#{mymb.employee}"
converter="#{employeeConverter}">
<f:selectItems value="#{mymb.employeeItems}" var="emp"
itemLabel="#{emp.employeeName}" itemValue="#{emp.employeeNumber}"/>
<p:ajax listener="#{mymb.loadDepartments}" process="#this"/>
</p:selectOneMenu>
</p:panelGrid>
<p:separator />
</p:dialog>
If I use appendToBody="true", then selectOneMenu Converter class doesn't gets invoked, but if I make it appendToBody="false", then Converter class gets invoked.
What could be the reason for this? appendToBody="false" makes my popup dialog unusable, not able to navigate using mouse.
How can I resolve this issue?
Remove the appendToBody and put an <h:form/> inside your dialog(along with it's content).
The purpose of appendToBody="false" is to ensure your dialog is rendered within the body (and hence within the main <h:form/>) of the HTML output.
Without appendToBody="false" , the dialog might end up being appended to the end of the markup in <body/> and as a result, nothing inside it will get executed.
Adding <h:form/> to your dialog ensures that even if it winds up outside the <body/> it will still be able to submit to the server
I am trying to call a dialog box (p:dialog) from another dialog box. In my page, on clicking on a link one dialog box opens, this dialog box has two sections, one for login and another for sign up. Currently the structure of my page looks like this.
<h:form>
<h:outputLink value="javascript:void(0)" onclick="dlg.show()" title="Login" />
</h:form>
<p:dialog id="dialog" header="Login" widgetVar="dlg" appendToBody="true" modal="true" width="750">
<h:form id="loginForm">
...
</h:form>
<h:form id="signupForm">
...
<p:commandButton id="submitButton" value="SignUp"
onstart="statusDialog.show();"
action="# {signupBean.doSignup}"
update="growl"
oncomplete="statusDialog.hide();dlg.hide();welcome.show();"/>
</h:form>
</p:dialog>
<p:dialog header="Welcome" id="welcome" resizable="false" widgetVar="welcome" width="700" closable="false" modal ="true">
</p:dialog>
The problem I am facing is that whenever I hit submit and there are validation errors on page, the error messages are displayed and the new dialog box is shown. The new dialog box is supposed to be shown only on successfully completion of the form without any validation errors.
Where am I going wrong?
The validation result is in the oncomplete attribute of PrimeFaces components available by the JavaScript args.validationFailed variable which returns a boolean. Just make use of it.
oncomplete="if (!args.validationFailed) { statusDialog.hide(); dlg.hide(); welcome.show(); }"/>