0

我想使用 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");
});
4

1 回答 1

4

那是因为它们没有 and 的客户端 ID title1，title2所以 jQuery 找不到它们。他们有一个 IDmain_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 代码。您可以在网络浏览器中通过右键单击并查看源代码或使用网络浏览器的网络开发人员工具集的“检查元素”功能来执行此操作。

也可以看看：

于 2012-06-22T15:28:13.203 回答