RailsでjQueryからajax

Ruby on Rails

jQueryを使ってajax通信を行いたいんだけど、Railsの環境だとどうしたらいいのか全くわからなかった。

「rails ajax」で検索したら「remote: trueにしたらいい」っていう記事ばっかり出て来るけど、それはフォームでの話らしい。私の場合、画像をクリックしたらajax通信したいので、jQueryでイベント検知するしかないなって感じだった。

qiita.com

この記事がすごい参考になった。

それから、ajaxが終わったらその結果を使ってpartialを更新したかったので、以下の記事も読んだ。

Ajaxによるページ部分更新 [ Ruby on Rails ]

https://www.prime-architect.co.jp/myblog/ruby-on-rails-1559

やることは以下の通り。

1. jQueryでのイベント定義

$(canvas).on 'click', (event) ->
  $.get('upload/show_similar_hattoris', {rgb: rgbAtPixel})

キャンバスをクリックしたら、rgbっていうデータを持ってupload/show_similar_hattorisへ行ってもらう。

2. routesの設定

get 'upload/show_similar_hattoris'

1のjQueryから来たのをちゃんと受け止めてあげられるように。

3. controllerのアクションの定義

def show_similar_hattoris
  @similar_color_hattoris = similar_color_hattoris(nil, rgb)
  @similar_dark_level_hattoris = similar_dark_level_hattoris(nil, dark_level(rgb))
end

こうやってインスタンス変数を持たせてあげると、ちゃんとpartialに渡せる。渡す処理は次に書く。

4. viewの定義

controllerでアクションを作ったら、普通ならそれに対応するviewを「アクション名.html.erb」で作るものだけど、今回は「アクション名.js.erb」で作っておいて、その中に「htmlを差し替える」っていう処理をjsで書いておけばよい。

$("#similar_hattoris_container")
  .html("<%= escape_javascript(
    render 'partials/image_detail_similar_hattoris',
    similar_color_hattoris: @similar_color_hattoris,
    similar_dark_level_hattoris: @similar_dark_level_hattoris
  ) %>");

ここで、さっきcontrollerでもらった@similar_color_hattorisと@similar_dark_level_hattorisをpartials/image_detail_similar_hattorisに渡せている。

そして、そのpartialが#similar_hattoris_containerの中に反映されるということになる。

これで完了！！

すごい連携やね。めっちゃ混乱する。