Rails での Ajax のメモ

(Rails3.2.13)

• Ruby on Rails 3 の Ajax いろいろ - yuumi3のお仕事日記

上記リンクの2と3を少々書き換えてやってみた。

下準備（2と3共通）

$ rails new ajax_app -T --skip-bundle
$ cd ajax_app
$ rails g scaffold Todo due:date task
$ bundle install
$ rake db:migrate

『2. jquery_ujs のcallbackを使う方法』の場合

app/views/todos/index.html.erb

    <td><%= link_to 'Show', todo, remote: true, "data-type" => "html", class: "show" %></td>
    :
<hr />
<div id="show_area"></div>

app/controllers/todos_controller.rb

  def show
    @todo = Todo.find(params[:id])

    respond_to do |format|
      format.html { render layout: (request.headers["X-Requested-With"] != 'XMLHttpRequest') }
      format.json { render json: @todo }
    end
  end

app/assets/javascripts/todos.js.coffee

$ ->
  $("a.show").on "ajax:success", (data, status, xhr) ->
    $("#show_area").html status

確認（2と3共通）

1. $ rails server
2. http://localhost:3000/todos
3. New Todo （todo作成 -> Back から/todos一覧へ）
4. /todos の Show をクリックで下記部分に詳細が表示される。

<div id="show_area"></div>

『3. jQuery のみ』の場合

app/views/todos/index.html.erb

    <td><%= link_to 'Show', "#", "data-id" => todo.id, class: 'show' %></td>
    :
<hr />
<div id="show_area"></div>

app/assets/javascripts/todos.js.coffee

$ ->
  $("a.show").click ->
    $.get "todos/#{$(this).data('id')}", (data) ->
      $("#show_area").html data

get のところをできれば
"todo_path(#{$(this).data('id')})"
みたいな感じにしたいのだけど、うまく出来なかった。
どうすればいいんだろ？

追記：コメントいただいた方法

もっともシンプルかつスマート

app/views/todos/index.html.erb

    <td><%= link_to 'Show', todo, class: 'show' %></td>
    :
<hr />
<div id="show_area"></div>

app/assets/javascripts/todos.js.coffee

$(document).on 'click', '.show', (e) ->
  e.preventDefault()
  $.get(this.href).done (data) ->
    $("#show_area").html data

...イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。

jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ | webOpixel