togatttiのエンジニアメモ

過度な期待はしないでください。旧麹町で働くエンジニアのメモ帳です。

RailsでAjax対応のdestroyとupdateメソッドを作成してみた①

Rails de Ajax

Railsの仕様が何となく掴めてきたため、Ajax処理を加えて、
よりリッチなUIに近づけることにした。

今作成中のアプリケーションのコードを公開しながら、まとめていく。

必要なものはjQuery
後、gemでjquery-railsは入れておく必要がある。

前提

  • resouceでRESTfulなルーティングを設定。
  • 今回はItemテーブルを作成し、データのやりとりはそこで行っている。
  • ところどころ出てくる@itemとか@itemsはそれに関連するもの...

destroy

おそらく、ドキュメントとかを参照すると、
僕みたいな初心者はこのようなコードがデフォルトになるはず。

以上をベースに書く。

次にAjaxに対応したdestroy処理の流れはこんな感じ。

  • viewで項目のidがセットされたリンクをクリック。
  • そのidがコントローラへ渡されて、idにひもづく項目をデータベースから削除。
  • idをjson形式で元のビューへ渡す。
  • json形式のデータを元にjQueryでfadeOutの処理。

コントローラを見ていく。

  • controller

上記の流れで説明したから、特にない。

強いて言えば、特に遷移しないので、
レンダリングするビューを設定が必要ないくらい。

  • view①

data-method = "delete"を設定することで本来ならGETでデータが渡されるものを、
DELETEメソッドで処理してくれる。おそらくresourceでルーティングを設定しないと
うまく行かないはず。

remote="true"の設定で非同期処理、つまりページ遷移を行わないようにしてくれる。

  • view②

リンクに設定したdata-method="delete"に反応して処理してくれる。

jQuery内のdataの部分にコントローラから渡されたjsonのデータが格納される。

update機能は次回 。。