5

テーブルがあり、各行にはjs関数を呼び出すように構成された「onclick」があります-この部分は機能します。何らかの形で定義できるメソッドに ajax リクエストを発行する関数が欲しいです。戻ったら、テーブルの下の div をレンダリングする必要があります。これは可能ですか？コードでJS関数を試しました：

<h:outputScript library="javax.faces" name="jsf.js" />
...
function clickAndRender() {
  jsf.ajax.request(this, event, {render: 'div-to-render'})
}

しかし、それはもちろんうまくいきません。「source」パラメーター (上記のコードでは「this」を使用) の値がどうあるべきかわかりません。また、最後のパラメーターで何を実行する必要があるかもわかりません。また、呼び出される URL と「アクション」メソッドを定義する方法もわかりません。

解決策は、クリックによって送信されるページの別の場所で、目に見えないフォームを使用している可能性もあります。誰でも助けることができますか？

4

3 に答える 3

12

JSF 2.3 に従って、これを使用できます<h:commandScript>。仕様の問題 613も参照してください。

<h:form>
    <h:commandScript name="foo" action="#{bean.action}" render="div-to-render" />
</h:form>

function clickAndRender() {
    foo();
}

Mojarra 2.3.0-m06以降で利用可能です。

この回答は、質問が投稿されてから 3 年後に上記のように更新されました。<h:commandScript>以下は、存在しなかったときにさかのぼる元の回答です。

「source」パラメーターの値がどうあるべきかわかりません（上記のコードでは「this」を使用しています）

UICommandこれは、呼び出したいコンポーネントのクライアント ID である必要があります。たとえば<h:commandLink>、<h:commandButton>標準の JSF API によって提供される などです。このようにして、JSF はリクエスト値の適用段階で、コンポーネント ツリー内の目的のコンポーネントを見つけ、そこに登録されているすべてのアクション (リスナー) をキューに入れることができます。

また、最後のパラメーターで何を実行する必要があるのか​​ もわかりません。

フォームの送信中に処理するコンポーネントのクライアント ID をスペースで区切って指定する必要があります。で通常使用するものとまったく同じです<f:ajax execute>。

また、呼び出されるURLを定義する方法もわかりません

コンポーネントがネストされて<form>いる によって生成されたから派生した現在のページのみ。ただし、 で指定する必要はありません。は、コンポーネントのクライアント ID に基づいてすでにそれを決定します。<h:form>UICommandjsf.ajax.request()jsf.jsUICommand

そして「アクション」メソッド。

通常の方法で、対象コンポーネントのactionoractionListener属性を指定するだけです。UICommand

全体として、具体的な問題はUICommand、ビューにコンポーネントがない可能性が高いため、使用できませんjsf.ajax.request()。1 つの方法は、CSS によって非表示になっているコマンド コンポーネントを含むフォームを作成することですdisplay:none。

<h:form id="foo" style="display:none">
    <h:commandLink id="bar" action="#{bean.method}" />
</h:form>

次に、パラメーターfoo:barとして使用できsourceます。

jsf.ajax.request('foo:bar', null, {'javax.faces.behavior.event': 'action', 'execute': '@form', 'render': 'div-to-render'});

<f:ajax execute="@form" render="div-to-render">上記は、コマンド コンポーネントと実質的に同じことを行います。または、このパスに移動して、document.getElementById("foo:bar").click()代わりに を使用することもできjsf.ajax.request()ます。

または、カスタムUICommandコンポーネントを作成して、JavaScript ユーザーにとって少し簡単にすることもできます。JSF ユーティリティ ライブラリOmniFacesには、そのようなコンポーネントである<o:commandScript>. ショーケース ページとソース コードも参照してください。JSF コンポーネント ライブラリのPrimeFacesにも、同様のフレーバーのコンポーネントがあり<p:remoteCommand>ます。ショーケース ページも参照してください。RichFacesには<a4j:jsFunction>、同じことを行う があります。ショーケース ページも参照してください。

于 2013-03-22T13:04:29.927 に答える
0

わかりましたので、BalusC によって提案されたすべての方法を使用して、必要なものを実装することができました。私がフォローアップを書いている理由は、私が最初に質問に含めなかった多くの問題があり、十分なコメントスペースがないためです;d

  1. 私のフォームは間違った場所にありました - 「テーブル」内に配置されました:

    <table>
  <ui:repeat>...</ui:repeat>
  <form>...</form>
</table>

    非 Ajax では機能しますが、id は Ajax リクエストでは機能しません。テーブルのすぐ下に移動すると、リクエストが送信されました。

  2. レンダリングしたいパネルが最初に render='false' になっていたため、そもそも HTML マークアップが出力されませんでした。Ajax 呼び出しが返されたとき、レンダリングしたい ID を持つ要素を見つけることができず、(メソッドによっては) エラー ダイアログが表示されるか、まったく表示されませんでした。解決策は、常にレンダリングされる問題の id を持つラッパー div を使用し、その div 内でのみ条件付きレンダリングを使用することでした。したがって、代わりに：

    <h:outputText id="to-render" rendered="${bean.clicked != null}">
  ...
</h:outputText>

    私はこれを行う必要がありました：

    <h:panelGroup layout="block" id="to-render">
  <h:outputText rendered="${bean.clicked != null}">
    ...
  </h:outputText>
</h:panelGroup>

すべての助けをありがとう。私自身のエラーが全体に影響を与えているため、BalusC による投稿は本当に正しいので、正しいものとして残します。

于 2013-03-25T09:46:54.223 に答える
0

ネイティブ JSF だけを使用すると、その方法がわかりません。ただし、PrimeFace のRemoteCommandを確認する必要があります。それはまさにあなたが今必要としているものです。次のようになります。

<p:remoteCommand name="onRowClick" actionListener="myBean.onRowClick" update="div-to-render" />

<h:someComponent onclick="onRowClick" />
于 2013-03-22T06:20:07.247 に答える