リッチ：ui：composition内のjQuery

Question

rich：facesコンポーネントを使用しようとしています。facesletコンポジション内のjQuery .. しかし、jquery呼び出しを生成できません。

<ui:composition xmlns="http://www.w3.org/1999/xhtml" 

<ui:define name="body"> 
<h:form id="f"><h:commandLink value="Go" id="ex"/> 
      <rich:jQuery selector="ex" query="alert('aw')"></rich:jQuery> 

---

適用される1回限りのクエリとして私は数1モードに入るように、これをリライトするつもりですかもう一つの問題... .. すぐにまたは文書準備イベントで。 申し訳ありませんが、私は非常に混乱しています...番号1モードのもう1つの例を教えてください。 これは私に教えてくれることを願っています:)

Answer 1

私はあなたが提供される例からやろうとしているかわからないが、おそらく次のように役立ちます：

online documentationから：

豊富：jQueryのは、にスタイルと動作を適用することができますDOMオブジェクト

私が知る限り、クエリ属性には要素に対して呼び出すことができるjQuery関数が含まれています。あなたは次の操作を行うことができ、あなたのonclickの警告を持っている：

<h:commandLink value="AW1" id="x1"/> 
<rich:jQuery selector="#x1" query="click(function(){alert('test')});" /> 

ドキュメントからの多く：

豊富：として

1. ：jQueryのは、主に2つのモードで使用することができます即時または文書準備完了イベントに1回限りのクエリを適用する
2. JavaScriptコードから呼び出すことができます。

モードは、以下の のオプションを持っている「タイミング」属性で選択されます。

1. 即時 - すぐにクエリを適用します。
2. onload - ドキュメントがロードされたときにクエリを適用します。
3. onJScall - 呼び出されたクエリの適用 "name"属性で定義されたJavaScript関数。

「タイミング」属性 の値が「onJScall」である場合、「name」属性の定義は必須です。 「タイミング」値 が「即時」または「オンロード」と等しいときに「name」属性が定義されている場合、クエリは この値に従って適用されますが、まだ ファンクション名で呼び出す機会があります。

「selector」属性は、オブジェクトまたはオブジェクトのリストを定義します。 クエリは、 "query"属性で定義されています。

このコンポーネントを使用するには、かなりの数の異なる方法があります。ワンタイムクエリがすぐにまたは文書readyイベントに適用されるように

最初のモードです。オンラインドキュメントの例があります。

あなたはJS関数はイベントから呼び出すことがしたい場所を第二のモードは、ドキュメントから取った例である：query属性で定義されているjQueryの機能をアニメーション表示し、意志することができたよう

<h:graphicImage width="50" value="/images/warning.png" onmouseover="enlargePic(this, {pwidth:'60px'})" onmouseout="releasePic(this)" /> 
<rich:jQuery name="enlargePic" timing="onJScall" query="animate({width:param.pwidth})" /> 
<rich:jQuery name="releasePic" timing="onJScall" query="animate({width:'50px'})"/> 

イメージ上にマウスを置くと、イメージコンポーネントに適用されます。

誰かがリンクをクリックしたときにJS関数が呼び出されるようにするには、rich：jqueryコンポーネントを使用する必要はなく、JavaScriptコードでもjQueryを使用します。 JQueryにはRichFacesが付属しています。あなたはRFを3.3.3使用している場合は、ノー競合モードでのjQueryを使用する必要があります：http://docs.jquery.com/Using_jQuery_with_Other_Libraries

が最後にこのコンポーネントのライブデモで見て：

http://livedemo.exadel.com/richfaces-demo/richfaces/jQuery.jsf;jsessionid=BD9D90829B8C4A9E230203856497FC9C?c=jQuery&tab=usage

UPDATE

答えの1つで説明した例に基づいて、私が下で行ったことを確認してください。

<h:commandLink value="AW" id="x" onclick="testaw(this);return false;"/> 
<rich:jQuery name="testaw" timing="onJScall" query="stop().fadeOut('slow')"/> 

これは、元の回答に記載されている2番目のモード（JavaScriptコードから呼び出すことのできるJavaScript関数）になるため、セレクタとイベント属性を削除したことに気づくでしょう。 。

このモードでjQueryコンポーネントを使用するときは、必須の2つの属性 'name'と 'timing'を追加しました。

また、リンクにonclickイベントを追加しました（このコンポーネントがフォームを送信しようとしたときにfalseを返すようにしました。もし起これば、jqueryエフェクトは表示されません）。

UPDATE 2

以下の要求としては、ページのロードに適用される1回限りのクエリとして使用してあなたの例に基づいて実施例である：

<h:commandLink value="AW2" id="x2"/> 
<rich:jQuery selector="#x2" timing="onload" query="stop().fadeOut('slow')" /> 

別の例は次のようになります。

<h:commandLink value="AW3" id="x3"/> 
<rich:jQuery selector="#x3" query="click(function(){jQuery(this).stop().fadeOut('slow')})" /> 

上記の問題は、フォームが送信されますです。私はそれが仕事だろうと考え、これを試してみましたが、それはしません：answer..Deeplyは感謝...私はあなたの提案の研究を促進し、それを実装します説明

<h:commandLink value="AW3" id="x3"/> 
<rich:jQuery selector="#x3" query="click(function(e){jQuery(this).stop().fadeOut('slow');e.preventDefault()});" />