0

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");
});
4

1 に答える 1

4

title1これは、とのクライアントIDtitle2がないため、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開発者ツールセットの「要素の検査」機能を使用して行うことができます。

参照：

于 2012-06-22T15:28:13.203 に答える