显示和隐藏函数在 JSF 中不起作用

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

<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>

jsf表单，默认情况下，在其子女ID中添加一个前缀，以使其看起来像这样：" form-id：child-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')

相关内容

最新更新

热门标签：