railsでエイジャックス

Rails

Rails 4.0.0.beta1
$().jquery # => "1.9.1"


膨大なアイテムの中から、絞り込みをかけてからひとつづつアイテムを追加したり削除したりしようとすると、
controllerが太ると思ったのでしぶしぶajaxを使った時のメモ。
ここでは、非同期リクエストを投げて、通信成功した時に発火するところまでをざっくり書く。

ajaxする時に編集する必要があるファイル

テンプレート

link_toとかのremoteオプションをtrueにする。
そうすることで非同期リクエストが投げられる。

controller

レスポンスをjsonにするように指定する。

js

通信成功した時の動きを書く。

テンプレート

<%= link_to "追加する", add_admin_path(book), remote: true, :class => "ajax_link" %>

テンプレートに関しては、remoteオプションをtrueにするだけでよい。

controller

class Admin::booksController < Admin::BaseController
  def show
    book = Book.new(params[:id])
    render json: book
  end
end

レスポンスにjsonを指定すればなぜかjsで指定したコールバックが発火する。

js

application.js
$(function(){
  $('a.ajax_link').on('ajax:complete', function(data, ajax, xhr){
    response = $.parseJSON(ajax.responseText)
    console.log(response.book)
  }); 
});

complete

は通信が終わった時に発火するコードバック。失敗しても動作する。
(successは、通信が成功した時に発火するのでステータスコードは引数では受け取らない。)

response = $.parseJSON(ajax.responseText)

は文字列できたjson形式のレスポンスをjsonに変換しているらしい。

console.log(response.book)

console.logを使って、デバッグしているとオブジェクトを参照できるのですごく便利。
alertだと[Object object]みたいな情報しか得られなくてやばい。

jsのコールバックが起動しない原因・現象

  • レスポンスにhtmlを返している
    • ブラウザの開発ツールを使えばレスポンスが見ればわかる。
  • "uncaught syntaxerror unexpected token u"と出る
    • コールバックと引数が一致していない。succcesssなのにcomplateで使う引数を使っているとか変数名が間違っている。
  • console.logが使えない
    • IEは非対応
  • CSSセレクタが誤っている
    • idを指定するとか少し変えてみれば
  • レスポンスが返ってきたけどプロパティがundifinedになる
    • console.logを使ってjsonの見てみる

参考記事
http://www.koikikukan.com/archives/2012/10/02-005555.php
http://etu.bituse.info/js/13
http://blog.livedoor.jp/sasata299/archives/51841211.html
http://tohae.hatenablog.com/entry/20101019/1287484896