使用jQuery同步Primefaces JSF2组件的值(inputText)

时间:2012-06-22 15:17:41

标签: jquery jsf primefaces

我想使用jQuery来同步JSF2组件的值。 我们正在使用模板。由于我不确定这可能是以下脚本无效的原因,我将向您展示代码设计:

的template.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>

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

my.js

$('#main_form\\:syncBtn').click(function() {
    $('#title2').val($('#title1').val());
});

jQuery脚本/函数未附加到元素

我知道我可以使用回调(onblur,onclick等),但我想避免这种情况,因为我使用了更通用的解决方案,因为我有很多输入字段。

修改: 我尝试了BalusC的答案(这当然是正确的),但必须有另一个错误。因为它不起作用。我插入了一个js警报,但它没有被发送。

$('[id="main_form:syncBtn"]').click(function() {
    alert("Test");
});

1 个答案:

答案 0 :(得分:4)

那是因为他们的客户ID不是title1title2,所以jQuery无法找到它们。他们的ID为main_form:title1main_form:title2。相应地修复你的JS代码。

$('#main_form\\:syncBtn').click(function() {
    $('#main_form\\:title2').val($('#main_form\\:title1').val());
});

对于没有记住JSF如何生成HTML的初学者,在编写jQuery代码时应该忽略JSF源代码,而是查看JSF生成的HTML代码。您可以通过右键单击查看源或使用&#34; Inspect Element&#34;在Web浏览器中执行此操作。 webbrowser的Web开发人员工具集的功能。

另见: