牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

Rails での Ajax のメモ


(Rails3.2.13)

上記リンクの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