フォーム部分更新サンプル

送信ボタンを押すと、画面遷移せずに<form>部分だけが更新されます。

サンプルでは、formのaction属性に"sample/jsp/*.jsp"を指定しています。

受け取ったJSONデータをバインド

form内のdata-h5-bindを指定した要素に、受け取ったオブジェクトをバインドします。

名前を入力して送信ボタンをクリックしてください

受け取ったHTMLに差し替え

formを受け取ったHTMLに差し替えます。formは削除されます。

名前を入力して送信ボタンをクリックしてください

受け取ったHTMLに差し替え(プレースホルダあり)

受け取ったHTMLにh5-data-migrationでセレクタを指定している要素がある場合、そのセレクタにマッチするform内の要素でh5-data-migration指定要素を差し替えます。

名前を入力して送信ボタンをクリックしてください

←戻る 進む→
(ここはh5-data-migrationで指定されている要素です)

受け取ったHTMLをform内の指定された要素にバインド

h5-bind-targetの指定された要素に受け取ったHTMLをバインドします。属性値にappend,prepend,updateを指定できます。

h5-refresh-group指定

h5-refresh-groupにグループ名を指定し、フォームを送信するときに同一グループのフォームも同時に送信します。

名前を入力して送信ボタンをクリックしてください

名前を入力して送信ボタンをクリックしてください

h5-block-group指定

h5-block-groupにグループ名を指定し、フォームを送信するときに同一グループの要素にインジケータを出します。

block-group指定要素(form)

名前を入力して送信ボタンをクリックしてください

block-group指定要素(form)

名前を入力して送信ボタンをクリックしてください

block-group指定要素(div)

h5-block-group="screen"

"screen"を指定した場合は画面全体にインジケータを出します。

名前を入力して送信ボタンをクリックしてください

h5-block-group="none"

"none"を指定した場合はインジケータを出しません。

名前を入力して送信ボタンをクリックしてください

target指定

formのtarget属性に指定した名前(name属性)を持つフォームを更新の対象にします。

名前を入力して送信ボタンをクリックしてください

(下のフォームをtargetに指定しています)

名前を入力して送信ボタンをクリックしてください

(上のフォームをtargetに指定しています)

送信エラー

エラーの場合はfailHandlerを実行します。デフォルトではログと通知バーを表示します。

名前を入力して送信ボタンをクリックしてください