保持< 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.

我将"required"属性添加到inputText字段中，会发生什么情况?

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屋！