我想使用 jQuery 来同步 JSF2 组件的值。我们正在使用模板。由于我不确定这是否可能是以下脚本无法正常工作的原因,因此我将向您展示代码设计:
模板.xhtml
<h:head>
<script src="#{request.contextPath}/js/my.js" type="text/javascript"></script>
</h:head>
<h:body>
<h:form id="main_form">
<ui:insert name="content"/>
</h:form>
</h:body>
我的视图.xhtml
<ui:composition ... template="templates.xhtml">
<ui:define name="content">
<p:inputText id="title1" value="#{myBean.title1}" />
<p:inputText id="title2" value="#{myBean.title2}" />
<p:commandLink id="syncBtn" styleClass="ui-icon ui-icon-arrowthick-1-e" />
</ui:define>
我的.js
$('#main_form\:syncBtn').click(function() {
$('#title2').val($('#title1').val());
});
jQuery 脚本/函数未附加到元素
我知道我可以使用回调(onblur,onclick等),但我想避免这种情况,因为我有很多这样的输入字段,所以我使用更通用的解决方案。
编辑:我尝试了BalusC答案(当然是正确的),但一定有另一个错误。因为它没有用。我插入了一个js警报,但它没有被支付。
$('[id="main_form:syncBtn"]').click(function() {
alert("Test");
});
那是因为它们没有title1
和title2
的客户端ID,所以jQuery找不到它们。相反,他们的ID为main_form:title1
和main_form:title2
。相应地修复您的 JS 代码。
$('#main_form\:syncBtn').click(function() {
$('#main_form\:title2').val($('#main_form\:title1').val());
});
对于没有记住JSF如何生成HTML的初学者,在编写jQuery代码时应该忽略JSF源代码,而是查看JSF生成的HTML代码。您可以通过右键单击并查看源代码或使用 Web 浏览器的 Web 开发人员工具集的"检查元素"功能在 Web 浏览器中执行此操作。
另请参阅:
- 如何使用jQuery选择JSF组件?