(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共通)
- $ rails server
- http://localhost:3000/todos
- New Todo (todo作成 -> Back から/todos一覧へ)
- /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