保持 <p:dialog>验证失败时打开 [英] Keep <p:dialog> open when validation has failed

问题描述

我有一个 CRUD 页面，它显示来自 Primefaces 数据表中的查询(域对象列表)的数据.

I have a CRUD page which shows data from a query (a List of domain objects) in a Primefaces datatable.

<p:dataTable 
                id="negozi" 
                var="n" 
                value="#{nController.theListFromQuery}" 
                rowKey="#{n.id}"
                selection="#{nController.selected}" 
                selectionMode="single">

                <p:column headerText="Field1">
                    <h:outputText value="#{n.f1}" />
                </p:column>
                <p:column headerText="Field2">
                    <h:outputText value="#{n.f2}" />
                </p:column>
<p:column style="width:4%">
                    <p:commandButton 
                        actionListener="#{nController.prepareEdit(n)}"
                        update=":editDialogId" 
                        oncomplete="editDialog.show()" 
                        value="Edit" />
                </p:column>
...

点击编辑按钮会显示一个对话框:

By clicking on the edit button a dialog will be shown:

    <p:dialog 
                header="Edit N" 
                widgetVar="editDialog" 
                id="editDialogId">

                    <h:form id="formDialog">

                        <h:panelGrid id="editDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">

                            <p:outputLabel for="field1" value="F1:" />
                            <p:inputText id="field1" value="#{nController.selected.f1}" />
                            <p:outputLabel for="field2" value="F2:" />
                            <p:inputText id="field2" value="#{nController.selected.f2}" />
<p:commandButton 
                        value="Confirm" 
                        actionListener="#{nController.doEdit}" 
                        update=":form" 
                        oncomplete="editDialog.hide()"
                        rendered="#{nController.selected.id!=null}" />                  
...

它有效.现在我想让 F1 成为必填字段.

It works. Now I want to make F1 a required field.

我在 inputText 字段中添加了required"属性，会发生什么?

I add the "required" attribute to the inputText field and what happens?

当我尝试在没有必填字段的情况下确认表单时，实体未被编辑(没错)但对话框已关闭(这是不对的！)

When I try to confirm the form without the required field, the entity is not edited (that's right) but the dialog is closed (that's NOT right!)

当我重新打开对话框时，我可以看到必填(和无效)字段上的红色突出显示.

When I reopen the dialog I can see the red highlight on the required (and invalid) field.

我想要的是在表单无效时防止对话框关闭.

我必须写一些 JS 还是 JSF 会帮助我?

Do I have to write some JS or will JSF help me?

推荐答案

PrimeFaces ajax 响应将一个 args 对象放入具有 validationFailed 属性的作用域中.你可以好好利用它.

The PrimeFaces ajax response puts an args object in the scope which has a validationFailed property. You could just make use of it.

oncomplete="if (args && !args.validationFailed) PF('editDialog').hide()"

(args 预检查是必要的，以免在请求过程中抛出异常时导致 JS 错误)

(the args precheck is necessary to not cause a JS error when an exception is thrown during request)

您可以将其重构为可重用的 JS 函数，如下所示.

You could refactor it to a reusable JS function as follows.

oncomplete="hideDialogOnSuccess(args, 'editDialog')"

function hideDialogOnSuccess(args, dialogWidgetVar) {
    if (args && !args.validationFailed) {
        PF(dialogWidgetVar).hide();
    }
}

这篇关于保持 <p:dialog>验证失败时打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！