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

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

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

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

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

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

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

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

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