如果表格未完全填写，Primefaces 打开确认对话框

Question

您好，我正在尝试解决这个问题。希望你能帮助我。

我有一个带有可选问题（文本字段、复选框、单选按钮）的问题表单。我正在尝试打开一个确认对话框（“有一些问题没有回答，您确定要继续吗？是/否”），只要有未填写的问题。我可以打开对话框要求确认。但我无法验证是否必须显示对话框或必须跳过它。

           <h:form>
               <div class="col-xs-12 ctg-home-button center">
                    <p:commandButton
                        id="cancel-button"
                        actionListener="#{answerSurveyView.restart}"
                        immediate="true"
                        styleClass="btn btn-default"
                        title="#{propertiesBean.getProperty('answer.cancel')}"
                        value="#{propertiesBean.getProperty('answer.cancel')}"
                        />
                    <h:outputText value="&#160;" />
                    <p:commandButton
                        id="answer-button"
                        action="#{answerSurveyView.saveAnswers}"
                        styleClass="btn btn-default"
                        title="#{propertiesBean.getProperty('answer.send')}"
                        update="answer-form"
                        value="#{propertiesBean.getProperty('answer.send')}"
                        >
                        <p:confirm header="Confirmation" message="#{propertiesBean.getProperty('answer.survey-confirmation')}" icon="ui-icon-alert" />
                    </p:commandButton>
                </div>
                <p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
                    <p:commandButton value="#{propertiesBean.getProperty('answer.send')}" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
                    <p:commandButton value="#{propertiesBean.getProperty('answer.close')}" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                </p:confirmDialog>
           </h:form>

Answer 1

使用confirmDialog 的rendered 属性来指示是否要渲染它。为rendered 属性设置一个从您的视图返回的值，指示是否有未回答的问题。

每次用户提出问题时，通过使用ajax on 事件重新加载您的confirmDialog，在您的视图上调用一个方法来重新计算unansweredQuestions 属性；和update 属性与您的confirmDialog id 作为值，因此您可以将rendered 设置为false，一旦最后一个问题被回答。 例如，如果您使用下拉菜单提供答案选项，则页面代码可能如下所示：

   <div class="col-xs-12 ctg-home-button center">
       <p:commandButton ....
       .....
   </div>

   <p:selectOneMenu value="#{answerSurveyView.firstQuestionAnswer}">
       <p:ajax listener="#{dropdownView.onAnswerSelect}" update="myConfirm" />
       <f:selectItem itemLabel="Select option" itemValue="" noSelectionOption="true" />
       <f:selectItems value="#{answerSurveyView.firstQuestionAnswerOptions}" />
   </p:selectOneMenu>

   <p:confirmDialog id='myConfirm' rendered="#{answerSurveyView.unansweredQuestions}" global="true" showEffect="fade" hideEffect="fade">
       <p:commandButton value="#{propertiesBean.getProperty('answer.send')}" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
       <p:commandButton value="#{propertiesBean.getProperty('answer.close')}" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
   </p:confirmDialog>

还有你认为的代码：

// declare  unansweredQuestions attribute and set it to false
private boolean unansweredQuestions = false;

// unansweredQuestions getter
public boolean getUnansweredQuestions() {
    return unansweredQuestions;
}

// call this method every time a question is answered
// to update the unansweredQuestions value
public void onAnswerSelect() {
    unansweredQuestions = foo(); //method returns true if there are questions left and false if not.
}