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

时间:2015-03-23 12:33:40

标签: jsf primefaces

我使用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>

当值为空时,错误消息应显示在对话框中。

1 个答案:

答案 0 :(得分:0)

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

此外,在您的p:messages组件中,您不应该指向for的{​​{1}}属性。在errorMsgId中,您应该输入您想要显示消息的输入字段的ID。例如,如果您放置for,则在您输入文件名时会显示错误。但是,如果您没有formId:fileNameId,则会显示所有消息。

您不需要for,因为您已经放置了update=":errorMsgId"

现在,为了完成您的需要,并使用autoUpdate="true"显示消息而不关闭对话框,有以下解决方法:

JSF(在定义保存按钮的位置): *稍后重新定义保存按钮

ajax=false

和JavaScript功能:

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

因此,这里是可见按钮,它使用ajax并调用JS方法来检查验证是否失败。并且只有在所有验证条件通过后,它才会单击实际提交表单的隐藏按钮。

<强>更新

对于fileUpload输入,应该进行额外检查。通过这种方式,您可以从fileUpload组件中删除allowTypes所需的属性,并将其添加为id - 所有验证都将在JavaScript函数中。

这是你的fileUpload组件:

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

您还应该在表单中添加hiddenInput(以及bean中的messageHidden字段):

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

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

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

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

现在,在你的bean中,你应该检查文件验证是否正常:

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("");
            }

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

最后,你应该更改Save按钮,先用JS检查文件输入,然后用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);
        }
    }