失败的验证应防止关闭模式对话框

问题描述 投票:0回答:1

我正在使用Bootsfaces显示模式对话框。模态对话框中有一个字段(实际上是b:inputTextarea)和一个使用Ajax提交数据的命令按钮。我想确保用户在提交之前已经在文本字段中输入了一些内容。如果该字段为空,则不应关闭模式并且不应进行提交;如果该字段为非空,则应关闭对话框,并且提交应采用Ajax样式。

由于具有Bootsfaces 1.4.2的issue,我无法使用b:command进行Ajax部件。我必须对h:commandButtonf:ajax使用标准方式。

我正在尝试解决这样的问题:

<b:form>
    <!--  section that gets updated by ajax-request -->
    <b:panel id="updateSection">
        <h:outputText value="#{testBean.value1}" />
        <b:button value="open dialog" onclick="$('.pseudoClass').modal()" />
    </b:panel>
    <!-- modal dialog -->
    <b:modal title="model" styleClass="pseudoClass" closable="false" closeOnEscape="true">
        <b:panel id="modalOutput"><h:inputText value="#{testBean.value1}" /></b:panel>
        <f:facet name="footer">
            <!-- cancel button -->
            <b:button largeScreen="half" value="cancel" dismiss="modal" onclick="return false;" />
            <!-- submit button ajax-style -->
            <h:commandButton value="submit" action="#{testBean.save()}" onclick="validateModalDialog();">
                <f:ajax render="updateSection" execute="@this modalOutput" onevent="closeModalDialog" />
            </h:commandButton>
            <!-- scripts to close & validate modal dialog -->
            <h:outputScript>
                    function closeModalDialog(data) {
                        var status = data.status;
                        if (status === 'complete') { $('.pseudoClass').modal('hide'); }
                    }
                    function validateModalDialog() {
                        alert('i get called before closing dialog');
                        return false;
                    }    
            </h:outputScript>
        </f:facet>
    </b:modal>
</b:form>

脚本脚本validateModalDialog在模式对话框关闭之前被调用,但是无论函数的返回值是(真还是假),对话框都将关闭。

我对JavaScript的了解非常有限。这就是我选择使用JSF和Bootsfaces的原因之一。但是我很确定有一种方法可以进行验证并防止对话框关闭。

使用标准组件h:commandButtonf:ajax时,我如何模拟Bootsfaces功能(模式对话框中文本字段的客户端验证?)>

我正在使用Bootsfaces显示模式对话框。模态对话框中有一个字段(实际上是b:inputTextarea)和一个使用Ajax提交数据的命令按钮。我想做...

ajax jsf bootsfaces
1个回答
0
投票

确实看起来像

© www.soinside.com 2019 - 2024. All rights reserved.