We recently migrated to PrimeFaces 11 and changed our code to open and close the dialog as per https://primefaces.github.io/primefaces/11_0_0/#/core/dialogframework.
The opening of dialog which has Okay and Cancel buttons is working fine but when clicking on the Okay or Cancel button inside the dialog it's not closing the the dialog and there are no errors in the application as well as the server log.
The sample code is as follows:
Template Dialog.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
<!-- HEAD -->
<h:head>
<h:outputScript library="js" name="growl_updater.js" />
<h:outputScript library="js" name="spear.js" />
<title><h:outputText value="#{dialogTitle}" /></title>
</h:head>
<!-- /HEAD -->
<h:body class="dialog-body">
<div class="dialog-wrapper">
<s:tooltip />
<!-- CONTENT include -->
<p:outputPanel id="dialog_content">
<ui:insert name="dialog_content">
<ui:include src="content.xhtml" />
</ui:insert>
</p:outputPanel>
<!-- /CONTENT include -->
<h:form id="dialog_conversation_form" rendered="#{not empty killCid and not empty conversationModel}">
<p:remoteCommand name="handleClose" actionListener="#{conversationModel.endConversation}" async="false" />
</h:form>
<!-- Widgets -->
<p:blockUI widgetVar="content_blocker" block="dialog_content">
<ui:include src="/templates/blockui/loading.xhtml" />
</p:blockUI>
<ui:insert name="exception_handler">
<ui:include src="exception-handler.xhtml" />
</ui:insert>
<ui:insert name="messages">
<p:growl id="dialog_warn_messages" for="dialog_warn_messages" widgetVar="dialog_warn_messages_widget" globalOnly="true" sticky="true" severity="warn" redisplay="false" />
<p:growl id="dialog_error_messages" for="dialog_error_messages" widgetVar="dialog_error_messages_widget" globalOnly="true" sticky="true" severity="error,fatal" >
<p:autoUpdate />
</p:growl>
<p:growl id="dialog_info_messages" for="dialog_info_messages" widgetVar="dialog_info_messages_widget" globalOnly="true" sticky="false" severity="info" >
<p:autoUpdate />
</p:growl>
<p:growl id="warn_messages" widgetVar="warn_messages_widget" globalOnly="true" sticky="true" severity="warn" redisplay="false" />
<p:growl id="error_messages" widgetVar="error_messages_widget" globalOnly="true" sticky="true" severity="error,fatal" >
<p:autoUpdate />
</p:growl>
<p:growl id="info_messages" widgetVar="info_messages_widget" globalOnly="true" sticky="false" severity="info" >
<p:autoUpdate />
</p:growl>
</ui:insert>
</div>
</h:body>
</html>
TestDialog.xhtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">
<ui:composition template="/templates/dialog/dialog.xhtml">
<ui:param name="dialogTitle" value="#{testMsg}" />
<ui:define name="dialog_content">
<h:form id="test_form">
<p:panel>
<p:panelGrid id="test_group" columns="2">
<h:panelGroup>
<p:focus context="test_group" />
<p:outputLabel for="test_value" value="#{testMsg.testValue}" />
</h:panelGroup>
</p:panelGrid>
<p:toolbar>
<p:toolbarGroup>
<p:commandButton value="#{testMsg.okayBtn}" actionListener="#{testActions.acceptAndClose()}">
</p:commandButton>
<p:commandButton value="#{testMsg.cancelBtn}" actionListener="#{testActions.cancel()}"
partialSubmit="true" process="@this">
</p:commandButton>
</p:toolbarGroup>
</p:toolbar>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>
TestAction.java
@Named
@RequestScoped
public class TestAction {
public static final Map<String, Object> POPUP_OPTIONS;
public static final String URL = "/popup/TestDialog.xhtml";
static {
Map<String, Object> map = new HashMap<String, Object>();
map.put("modal", Boolean.TRUE);
map.put("draggable", Boolean.FALSE);
map.put("resizable", Boolean.FALSE);
POPUP_OPTIONS = map;
}
private BigDecimal value;
public void acceptAndClose() {
PrimeFaces.current().dialog().closeDynamic(value);
}
public void cancel() {
PrimeFaces.current().dialog().closeDynamic(null);
}
}
The main.xhtml page has button called verify which has action to open the Dialog,
<p:commandButton id="value_btn" value="#{buttonMsg.valueBtn}"
action="#{mainAction.openValueAction}" process="@form"
disabled="#{mainAction.testValueButtonDisabled}" onstart="PF('content_blocker').show()"
oncomplete="PF('content_blocker').hide()" update="@form">
<f:param name="cid" value="#{mainModel.conversationId}" />
<p:ajax event="dialogReturn" listener="#{mainAction.valueListener}" update="@form" />
</p:commandButton>
MainAction.java
@Named
@RequestScoped
@ExceptionsReported
public class MainAction {
public void openValueAction() {
Map<String, List<String>> params = new HashMap<String, List<String>>();
params.put("cid", Arrays.asList(new String[] { model.getConversationId().toString() }));
PrimeFaces.current().dialog().openDynamic(TestAction.URL, TestAction.POPUP_OPTIONS, params);
}
public void valueListener(SelectEvent event) {
// get value from Okay or Cancel from Dialog
}
}
The same code is working with an older version of primefaces using RequestContext.getCurrentInstance().openDialog and RequestContext.getCurrentInstance().closeDialog.
I tried various solutions and have gone through https://github.com/primefaces/primefaces/issues but was not able to find the issue.
found the issue, we have custom .js file in remote system which overrides the opening and closing of the dialog functions which leads to this issue.
We updated the this custom .js file according to primefaces 11 and then opening and closing of the dialog is working again.