131216_04：アジャイル開発本

11.2 イテレーション F2：Ajaxベースのカートの作成

Ajaxによって、サーバベースのアプリケーションとのやり取りをブラウザ上で実行するコードが書けるようになる。

アプリケーションにAjaxを組み込む秘訣は、小さな手順を積み重ねていくこと。

まずカタログページに変更を加えてサーバアプリケーションにAjaxリクエストを送信するようにする。アプリケーションにも変更を加え、このリクエストによって更新されたカート表示を含むHTMLの断片をレスポンスとして返すようにする。

インデックスページでは、button_to( )を使ってcreateアクションへのリンクを作成している。これを、Ajaxリクエストを送信するように変更。それには、呼び出しにremote: trueパラメータを追加するだけ。

app/views/store/index.html.erbを編集(line24)

<%= button_to 'カートに入れる', line_items_path(product_id: product), remote: true %>

これでAjaxリクエストをアプリケーションに送信するためのブラウザ側の準備は整った。次はアプリケーションがレスポンスを返すようにする。更新されたカートを表示するHTMLの断片を作成し、そのHTMLをブラウザのDOM(Document Object Model)に組み込ませることにする。DOMとは、表示されているドキュメントの構造とコンテンツに関する、ブラウザの内部表現。DOMを操作すると、ユーザの目の前で表示が変化する。まず、createアクションの中でインデックスを表示するようにリダイレクトしていたのを、JavaScriptのリクエストの場合には止めるようにする。そのために、respond_to( )に.js形式で応答するように呼び出しを追加する。

app/controllers/line_items_controller.rbを追加(line60)

        format.js

app/views/line_itemsにcreate.js.erbを書く

$('#cart').html("<%=j render @cart %>");

これでAjaxアプリケーションが出来上がる。