我正在尝试使用 JQuery 在 JSF 中隐藏和显示我的文本区域。但这不起作用。条件不错，但功能不行。 怎么了？我不是 JS 的新手，但我开始探索 JSF，并以非常奇怪的方式使用 JS。 您可以在下面看到我的代码。 感谢x
<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”，因此 jquery 无法使用选择器“#child-id”找到该元素。
在表单中使用 prependId="false":
<h:form style="margin: 0 auto" prependId="false">
或者以以下形式定义 id:
<h:form style="margin: 0 auto" id="formId">
并使用不同的选择器:
$('#formId\\:itemArea')
关于javascript - 显示和隐藏功能在 JSF 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43459151/