Question

我有一个JSF页面（已在标题中注册jQuery）包含indicator，reason和h:commandButton用于提交h:form。 indicator有两个值Y和N。

我尝试构建的逻辑是页面加载和indicator = Y（在jQuery下面是indicator.data("prev") == 'Y'），如果用户从Y切换到N但是没有输入reason中的任何字词，即使用户点击h:commandButton，表单也应 NOT 提交。

简而言之，在提交之前，它应该检查指标的状态当前和之前的值关系是从Y转到N（我在jQuery脚本部分设置了这个逻辑部分），还需要检查原因是不是空的。 我想实现这样的检查操作可能需要重新组织代码结构。

下面是我当前的代码，它缺少这个逻辑，从不禁止提交并导致支持bean的冲突，。由于我是jQuery和JSF的新手，有人可以告诉我如何阻止此提交吗？谢谢。

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" 
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">

<h:head>
    <title>myPage</title>
    <h:outputScript name="jquery.js" target="head"/>
</h:head>

<f:event type="preRenderView" listener="#{myPage.getmyPage}" />

<h:body>
    <f:view>
        <h:form name ="myPage" id ="myPage">        
            <table>
            <tr>
                <td align="left">
                    <h:selectOneMenu id="indicator" value="#{myPage.indicator}">
                        <f:selectItem itemValue="Y" itemLabel="YES" />
                        <f:selectItem itemValue="N" itemLabel="NO" />                           
                    </h:selectOneMenu>
                </td>
                <td>
                    <h:inputTextarea id="reason" value="#{myPage.reason}">
                    </h:inputTextarea>
                </td>                   
                <td>
                    <h:commandButton id="submit" value="Submit" 
                        onclick="if (! confirm('Do you want to update?')) return false" action="#{myPage.update}">
                    </h:commandButton>
                </td>
            </tr>
            </table>
        </h:form>
    </f:view>


    // TODO: I want to add the logic to prevent h:commandButton submit(e.g disable the button) when reason is empty 
    // and indicator value turn from 'Y' to 'N', the jQuery section reflect the case when toggle from 'Y' to 'N', 
    // reason editable, as it need to consider two elements(indicator value/ reason value) at the same time, 
    // how should the code look like ?

    <script type="text/javascript">
        $(window).load(function() {        
            var indicator = $(document.getElementById("myPage:indicator"));
            // set the indicator pre data
            indicator.data("prev", indicator.val());

            // Handle initial status of indicator, when page load, if it is 'Y' open reason field
            // if it is 'N' disable reason field, 
            if(indicator.data("prev") == 'Y') {
                $(document.getElementById("myPage:reason")).prop('disabled', false);
            } else {
                $(document.getElementById("myPage:reason")).prop('disabled', true);
            }

            // Handle change status of indicator, 
            indicator.change(function(data){
                var jqThis = $(this);
                var after_change = jqThis.val();
                var before_change = jqThis.data("prev");
                if(before_change == 'Y' &amp;&amp; after_change == 'N'){
                    $(document.getElementById("myPage:reason")).prop('disabled', false);                        
                }
            });
        });
    </script>});
</h:body>

Answer 1

基本上你可以实现一些逻辑来禁用你的命令按钮取决于某些条件。例如：

<h:commandButton id="submit" value="Submit" disabled=#{myPage.isSubmitButtonDisabled()} onclick="if (! confirm('Do you want to update?')) return false" />

然后在支持bean中，你应该实现你想要实现的逻辑：

public boolean isSubmitButtonDisabled() { return indicator.equals("N") && reason.isEmpty(); }

最后，为了处理指标选择的更改，您应该将onchange="submit()"添加到<h:selectOneMenu>组件。按钮启用/禁用的逻辑可以通过以类似方式对原因文本区域中的键入文本作出反应来进一步扩展，例如通过addig onkeyup="submit()"。当然，这需要使用render属性来防止pafe刷新。这当然是某种方式，但它可以为您提供满足您的解决方案

使用jQuery（或JSF方式）来阻止h：commandButton提交

1 个答案: