在primefaces中单击ajax = false的命令按钮时如何在对话框中显示消息

Question

我使用 inputText、commandButton 和 uploadFile 组件。在 commandButton 中，我在两个字段中都使用了 ajax=false 并设置了 required=true。当单击保存为空值时，对话框中不会显示错误消息并且对话框正在关闭。但在控制台中，警告消息显示为“消息已呈现但未显示”。

下面是我的代码：

<p:dialog widgetVar="addDialogWidgetVar" id="addDialogWidgetVarId"  dynamic="true" >

            <table  style="width: 100%;">
                    <tr>
                        <td>
                            <p:messages for="errorMsgId" id="errorMsgId" autoUpdate="true" showDetail="false" showSummary="true" closable="true"/>
                        </td>
                    </tr>
                </table>

            <h:form id="formId" enctype="multipart/form-data">



                <table>
                    <tr>
                        <td>
                            <label style="margin-top: 5%"><h:outputText value="Name:"/><h:outputText value="*" style="color:red"/></label>
                        </td>
                        <td width="10%"/>
                        <td>
                            <p:inputText value="#{manageBean.attachment.fileName}" id="fileNameId" maxlength="60" style="width:70"
                                        required="#{not empty param[save.clientId]}" requiredMessage="Please enter Attachment name"></p:inputText>
                        </td>
                    </tr>
                    <tr height="10"></tr>
                    <tr>
                        <td>
                            <label style="margin-top: 5%"><h:outputText value="Upload Attachment:"/><h:outputText value="*" style="color:red"/></label>
                        </td>
                        <td width="10%"/>
                        <td>
                            <p:fileUpload label="Select a file" mode="simple" value="#{manageBean.attachment.file}"
                                        allowTypes="/(\.|\/)(pdf|doc|docx|xls|xlsx|gif|jpg|jpeg|png|PNG|GIF|JPG|JPEG)$/"
                                        invalidFileMessage="Allow only (pdf|doc|docx|xls|xlsx|gif|jpg|jpeg|png|PNG|GIF|JPG|JPEG) file."
                                        multiple="false" required="#{not empty param[save.clientId]}" requiredMessage="Please select a file" >
                            </p:fileUpload>

                        </td>
                    </tr>
                    </table>
                    <br />
                    <table style="margin-left: 30%;">                           
                    <tr align="center">

                        <td>
                            <p:commandButton value="Close" actionListener="#{manageBean.cancelAttachment}" oncomplete="addDialogWidgetVar.hide()" />
                        </td>

                        <td> 
                            <p:commandButton id="submitbtnid" value="Save" ajax="false" binding="#{save}"
                                        actionListener="#{manageBean.saveAttachment}" update=":errorMsgId"/>
                        </td>
                    </tr>
                </table>

            </h:form>

        </p:dialog>

当值为空时，错误信息应显示在对话框本身。

Answer 1

这是您使用 ajax=false 时的预期行为，因为在提交时整个页面都会刷新，这就是对话框关闭的原因。

另外，在您的p:messages 组件中，您不应该有指向errorMsgId 的for 属性。在for 中，您应该输入您不想显示消息的输入字段的 id。比如你输入formId:fileNameId，不输入文件名就会报错。但是如果你没有for，它会显示所有的消息。

而且你不需要update=":errorMsgId"，因为你已经放了autoUpdate="true"。

现在，要完成您需要的操作，并在不关闭对话框的情况下使用 ajax=false 显示消息，有以下解决方法：

JSF（在定义保存按钮的位置）：*稍后重新定义保存按钮

<p:commandButton id="submitbtnid" **style="display:none"** ajax="false" binding="#{save}" actionListener="#{manageBean.saveAttachment}" />
<p:commandButton value="Save" oncomplete="checkIfValid(xhr, status, args)" />

和JavaScript函数：

function checkIfValid(xhr, status, args)
  {
      if (!args.validationFailed)
      {
          $("#formId\\:submitbtnid").click();
      }
  }

所以，这是一个可见的按钮，它使用 ajax 并调用 JS 方法来检查验证是否失败。只有当所有的验证条件都通过时，它才会点击实际提交表单的隐形按钮。

更新

对于 fileUpload 输入应该有一个额外的检查。这样，您可以从 fileUpload 组件中删除 allowTypes 所需的属性，并为其添加一个 id - 所有验证都将在 JavaScript 函数中。

这是你的文件上传组件：

<p:fileUpload label="Select a file" mode="simple" value="#{manageBean.attachment.file}" multiple="false"></p:fileUpload>

您还应该在表单中添加 hiddenInput（以及 bean 中的 messageHidden 字段）：

<h:inputHidden id="errorMsg" value="#{manageBean.messageHidden}"/>

现在，这是执行文件输入验证的 JavaScript 函数：

function checkFileInput() {
                if ($("#formId\\:fileInput")[0].files.length == 0) {
                    $("#formId\\:errorMsg").val("Please select a file");
                    return;
                }
                var validExtensions = ['pdf','doc','docx','xls','xlsx','gif','png','jpg','jpeg'];
                var maxFileSize = 5000;

                var ext = $('#formId\\:fileInput').val().split('.').pop().toLowerCase();
                if($.inArray(ext, validExtensions) == -1) {
                    $("#formId\\:errorMsg").val("Allow only (pdf|doc|docx|xls|xlsx|gif|jpg|jpeg|png|PNG|GIF|JPG|JPEG) file.");
                    return;
                }

                if ($("#formId\\:fileInput")[0].files[0].size > maxFileSize) {
                    $("#formId\\:errorMsg").val("File is to big");
                    return;
                }
                $("#formId\\:errorMsg").val("");
            }

它首先检查文件是否被选中，然后检查其扩展名，然后是允许的文件最大大小。如果其中某些内容无效，它会为隐藏的输入字段设置新值。

现在，在您的 bean 中，您应该检查文件验证是否正常：

public void validateFile() {
        if(!messageHidden.trim().equals("")) {
            FacesContext.getCurrentInstance().validationFailed();

            FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR, messageHidden, messageHidden);
            FacesContext.getCurrentInstance().addMessage(null, message);
        }
    }

如果没有，验证失败将被设置到上下文中，并且来自 inputHidden 的消息将被添加。

最后，你应该将保存按钮更改为先用JS检查文件输入，然后用bean方法验证，然后检查验证是否失败：

<p:commandButton value="Save" onclick="checkFileInput()" actionListener="#{testBean.validateFile}"
              oncomplete="checkIfValid(xhr, status, args)" />