2.1.38. XHRリクエスト送信イベントアクション¶

2.1.38.1. コードサンプル¶

以下のソースコードは、商品コードを入力すると その商品名をXHRリクエストで検索して表示する例である。

<event:listen
  title     = "商品コード入力欄からフォーカスアウトする。"
  event     = "input.productCode blur">
  <event:send_request
    title     = "入力欄に値が設定されていた場合は、それに合致するコードを検索するAjaxリクエストを送信し、検索結果テーブルを取得する。"
    name      = "product_ajaxRequest"
    uri       = "./product/list"
    target    = "table"
    condition = "input.productCode:is-not-blank">
  </event:send_request>
</event:listen>

<event:listen
  title = "Ajaxリクエスト成功"
  event = "ajaxSuccess">
  <event:write_to
    title       = "入力した商品コードに合致するレコードがDB上に存在すれば商品名を表示する"
    target      = "span.productName"
    condition   = ":has(tr td)"
    format      = "商品名: {td.productName}">
  </event:write_to>
</event:listen>

2.1.38.2. 仕様¶

このアクションを実行するイベントは ページ内イベント定義 (もしくは サブウィンドウ内イベント定義 ) を用いて定義する必要がある。

このアクションが実行されると、まず、イベントの発生元要素が condition 属性の セレクタにマッチするかをチェックし、マッチしなかった場合はなにもしない。

マッチした場合、このタグを包含する form 要素に対してサブミット処理を実行する。 このサブミット処理は <n:submitLink> タグによる処理と同等である。

また、 <n:param> 等のタグについても、本タグの内側に記述することで <n:submitLink> と同様に利用することができる。

属性値一覧 [◎ 必須属性 ○ 任意属性 × 無効(指定しても効果なし)]

2.1.38.3. 内部構造・改修時の留意点¶

本ウィジェットは以下のファイルによって実装されている。

部品一覧