0

jQueryを使用してp：inputText（commentInput）コンポーネントのメソッドをオーバーライドonblur()したいと思います。しかし、私はこのコンポーネントの固定HTMLIDを取得するのに苦労しています。私はこれまでに試しました：onfocus()

jQuery(document).ready(function() {
     $(document.getElementById("[#{p:component('commentInput')}]")).onblur(function() {
        $(this).css({'background-color':'#DFD8D1'});
     });
});

または：

jQuery(document).ready(function() {
     $("[id='#{p:component('commentInput')}']").onblur(function() {
        $(this).css({'background-color':'#DFD8D1'});
         });
});

どちらも同じ結果になります：Uncaught TypeError: Object [object Object] has no method 'onblur'。

Xhtmlコードは次のようになります。

<h:form id="dtForm">
<p:outputPanel id="dataTablePanel">
    <p:dataTable id="dataTable">
        <p:column id="column">
            <p:panel>
                <p:inputText id="commentInput">
                </p:inputText>
            </p:panel>
        </p:column>
    </p:dataTable>
</p:outputPanel>
</h:form>

inputTextコンポーネントを使用しているときに、もう1つ問題があります。

<p:inputText id="commentInput" onkeypress="if (event.keyCode == 13) {onchange(); return false;}" required="#{not empty statusBean.newComment}">
    <f:ajax event="change" listener="#{statusBean.test}" />
</p:inputText>

予期しない方法でイベントを発生させます。カーソルがinputTextにあると想定し、sthと入力します。そして、ページ内の別の場所をクリックすると、コンポーネントは、予期されていないときにajaxイベントを発生させます。このコンポーネントは、Facebookやsthのようなステータスへのコメントを取得するのには適していないと思います。

4

4 に答える 4

3

ここには2つの問題があります。1つ目は、Anthony Gristが彼の回答で述べたように、ぼかしの定義はblur()notによって行われるということonblur()です。JSFのIDには:、ID区切り文字として記号が含まれているため、これらの記号をエスケープする必要があります:。Primefacesにはこのための関数が組み込まれており#、jQueryでこれを使用し始めるときに記号も追加されます。

jQuery(PrimeFaces.escapeClientId("#{p:component('commentInput')}")).blur(function () {
  // your code here...
});

一方、複雑にする理由にp:inputTextは、onblur属性があります。これを使用すると、実行するjavascriptコールバックを定義できます。これは、標準のHTML属性として使用されます。

<p:inputText onblur="myFunction()"/>
于 2013-02-18T19:53:39.800 に答える
1

blurイベントハンドラーをバインドするためのjQuery関数は.blur()、ではなく、単なる.onblur()です。さらに、最初の例では、jQuery関数の呼び出しとネイティブJavaScriptの呼び出しを混在させていましたdocument.getElementById()。

以下が機能するはずです。

$("##{p:component('commentInput')}")).blur(function() {
    $(this).css({'background-color':'#DFD8D1'});
});

1つ目#はjQueryセレクターの一部であり、2つ目は（私が推測する）JSFコードの一部であり、その要素の正しいIDを取得します。サーバー側で解析の問題が発生しないことを保証することはできませんが（JSFの経験はありません）、動作することを期待しています。

于 2013-02-18T16:56:17.537 に答える
1

のwidgetVar属性を使用し、次の<p:inputText>IDを使用してコンポーネントを呼び出します。

<p:inputText id="commentInput" widgetVar="txtCommentInput" ... >

...

jQuery(document).ready(function() {
     txtCommentInput.blur(function() {
        $(this).css({'background-color':'#DFD8D1'});
     });
});

idとwidgetVar属性を同じ値に設定しないでください：http：//forum.primefaces.org/viewtopic.php？f = 3＆ t = 18830＃p59600

于 2013-02-18T16:57:13.383 に答える
0

After hours I found the correct way, I think all other suggestions are useful for regular cases but mine was special because of the DataTable component, it was blemishing the other solutions so I found a more greedy solution to this:

$(window).bind("load", function() {
    var rowSize = '#{bean.numOfRows}';
    for (var i=0;i &lt; rowSize;i++)
    {
        var rowIndex=i;
        var str = 'dataTableForm' + ':dataTable:' +  rowIndex + ':commentInput';
        var element = $(document.getElementById(str));
        element.blur(function () {
           $(this).css({'box-shadow': '0 0 5px #EB2F28'});
           $(this).css({'background-color':'#DFD8D1'});
        });
     }
});

The first line of the function determines execution after the page load. Then I am iterating same process for all inputText components in the dataTable. var str has the value of fixed ID of each inputText components, rest of it; just CSS.

But my case even worse than this. I was doing an ajax update to determine css values and that was overrides javascript function values even it's executed page load. Execution order was like:

--Page Load
----Function Executes
------Ajax Call

To be able to execute function at the final. I changed function header to this: function afterLoad() and called it in the ajax updater button via this: <p:commandLink oncomplete="afterLoad()"/> AND BOOM IT WORKS!!!!

于 2013-02-18T22:39:58.613 に答える