显示和隐藏功能在 JSF 中不起作用

Posted

技术标签:

【中文标题】显示和隐藏功能在 JSF 中不起作用【英文标题】：Show and Hide function doen't work in JSF 【发布时间】：2017-09-13 12:34:38 【问题描述】：

我正在尝试使用 JQuery 在 JSF 中隐藏和显示我的文本区域。但它不起作用。条件不错，但功能不行。 怎么了？我不是最新的 JS，但我开始探索 JSF 并在这里以非常奇怪的方式使用 JS。 在这里，您可以在下面看到我的代码。 谢谢

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:b="http://bootsfaces.net/ui"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<h:head>
    <title>Add new field</title>


</h:head>
<h:body>
    <script
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">

    </script>

    <h:form>
        <b:commandButton look="link" action="response?faces-redirect=true"
            value="Response" />
        <b:commandButton look="link" action="fields?faces-redirect=true"
            value="Fields" />
    </h:form>
    <h:form style="margin: 0 auto">
        <h3>Adding Form Components</h3>
        <h:panelGrid columns="1">
            <h:outputLabel id="label" for="label">Label:</h:outputLabel>
            <div>
                <b:inputText binding="#infoManageBean.labelInput"
                    placeholder="Name, Country, etc." required="true" id="labelText"
                    value="#infoManageBean.field.label">
                </b:inputText>
                <p:message for="labelText" />
                <h:outputText value="#addFieldValidationBean.label" />
                <br /> <br />
            </div>
            <h:outputLabel for="type">Type:</h:outputLabel>

            <b:selectOneMenu onchange="handleChange(this.value)" required="true"
                value="#infoManageBean.field.type">

                <f:selectItems value="#fieldManageBean.getFieldTypes()"
                    var="value" itemLabel="#value" itemValue="#value" />
            </b:selectOneMenu>
            <br />
            <br />


            <h:inputTextarea id="itemArea" cols="30" rows="10" />


            <h:outputLabel for="color">Required:</h:outputLabel>
            <b:selectBooleanCheckbox value="#infoManageBean.field.required">
            </b:selectBooleanCheckbox>


            <h:outputLabel for="color">Is active:</h:outputLabel>
            <b:selectBooleanCheckbox value="#infoManageBean.field.isActive" />
            <input type="hidden" name="method" value=" ADD " />
            <b:commandButton look="primary" binding="#infoManageBean.button"
                id="addFieldBtn" validateClient="true"
                action="#infoManageBean.insertOrUpdateField()"></b:commandButton>
        </h:panelGrid>
    </h:form>
    <script type="text/javascript">
        function handleChange(selection) 
            var COMBO_BOX = 'COMBO_BOX';
            if (selection == COMBO_BOX) 
                console.log('visible');
                $('#itemArea').show();
             else 
                console.log('hidden');
                $('#itemArea').hide();
            
        
    </script>
</h:body>

</html>

【问题讨论】：

【参考方案1】：

默认情况下，JSF 表单会为其子 id 添加一个前缀，如下所示：“form-id:child-id”，因此 jquery 无法使用选择器“#child-id”找到元素。

在表单中使用 prependId="false"：

<h:form style="margin: 0 auto" prependId="false">

或者在表单中定义id：

<h:form style="margin: 0 auto" id="formId">

并使用不同的选择器：

$('#formId\\:itemArea')

【讨论】：

太棒了。 id 前缀听起来很疯狂，但是当你重用组件和片段时你会发现它很有用，因为它有助于避免 id 崩溃

以上是关于显示和隐藏功能在 JSF 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

CommandLink 导航在 JSF 中不起作用

JSTL c:forEach 在 JSF h:dataTable 中不起作用

使用 inappbrowser 隐藏和显示方法在 phonegap 应用程序中不起作用

Bean Validation @NotNull、@NotBlank 和 @NotEmpty 在 JSF+Tomcat 中不起作用

升级到 JSF 2.3 后，@Inject 在 @FacesConverter 中不起作用

@Named + @RequestScoped 在 JSF 2.0 和 JBoss 7.1.1 中不起作用