Skip to content

フォーム送信をAjaxで実行&画面更新までできるApplicationController(その3)「要素の追加、更新」

by : 2017/05/30

引き続きApplicationControllerを使ったAjax処理の省力化について紹介します。今回は要素の追加(前後)と更新についてです。

サーバからのレスポンスに対して、その結果をHTML内に追加したい時と、元のHTMLを書き換えたい場合があります。ApplicationControllerでは h5-bind-target を使って指定できます。

HTMLは次のようになります。appendが後ろに追加、prependが前に追加そしてupdateがHTMLの内容を更新するという指定になります。

JavaScript側は次のように特に変わりません。

これを実行すると次のようになります。

それぞれ表示結果が異なるのが分かるかと思います。

実際のデモはこちらにて確認できます。サーバ送信部分はモックですが、サーバを立てた場合と同じです。

リスト要素への追加であれば前後、どちらの可能性もあります。結果をメッセージとして表示するのであればupdateを指定するのが良いでしょう。目的に応じて使い分けてください。

From → hifive, HTML5

現在コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。