Railsでテーブルをクリックしたときに詳細画面をモーダルウィンドウで表示したい。

Question

テーブルをクリックしたときに詳細画面がモーダルウィンドウで表示されるように実装したいのですが、Railsでどのように実装すれば良いか分かりません。

簡単なblogアプリを以下のように作成しました。

rails new blog
rails g scaffold Post title:string body:text
rake db:migrate

blog/config/routes.rbに以下を追加

resources :posts
root  'posts#index'

http://localhost:3000にアクセス
これで簡単なblogアプリが完成しました。

このブログのトップページ http://localhost:3000に表示されている「show」または「Edit」リンクを押すとモーダルウィンドウが表示され画面を遷移せずに編集出来るようにしたいのですが、どのように実装すれば良いでしょうか？
非同期通信をするためにajaxを使用すれば良いところまでは分かるのですが、このコードのどこに「:remote => true」と書けばよいのか分かりません。

初歩的な質問で申し訳ありませんがよろしくお願いいたします。

Answer 1

モーダルダイアログで Form を出して、submit する例 (動作画面とそのソース) が示されているページを紹介します。
http://jqueryui.com/dialog/#modal-form

おおざっぱにいうと、
非表示にしておいた div 中に form を書いておき、
必要に応じて jquery でその部分を ダイアグ表示する
というものです。

Comments

[退会済みユーザー]

返信がおそくなって申し訳ございません。
やっと解決しました。

まず、edit,の部分は以下のサイトをほぼ真似て実装しました。
http://richonrails.com/articles/basic-ajax-in-ruby-on-rails

そして問題だったのは一覧表をshowしたときにモーダルウィンドウで詳細画面を実装するという部分。教えていただいたurlよりモーダルウィンドウの作成方法の考え方を覚え、再度考え直してみました。
なかなかこの部分を実装しているサイトが見つからなかったため、無理矢理javascriptファイルを作成し、ajaxコードを書きました（これで合っているのか不明です...）

showのajax化は以下の手順で行いました。

①gemファイルにbootstrapを追加
blog/Gemfile

gem 'bootstrap-sass', '~> 3.1.1'

②bundle install

③ルーティング設定
blog/app/config/routes.rbに以下を追加

match '/show', to: 'posts#show', via: 'get'

④blog/app/assets/javascripts/application.jsを編集

//= require jquery
//= require jquery_ujs
//= require bootstrap #追加
//= require turbolinks
//= require_tree .

⑤blog/app/assets/stylesheetsに新規ファイル「costom.css.scss」を追加。
以下を追加する
@import "bootstrap";

⑥blog/app/views/posts/index.html.erbを以下のように編集

<h1>Listing posts</h1>
<div class="container">
<table class="table table-condensed table-hover" >
<thead>
<tr>
<th>Title</th>
<th>Body</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>

<tbody>
<% @posts.each do |post| %>
<tr id="<%= post.id %>" data-toggle="modal">
<td><%= post.title %></td>
<td><%= post.body %></td>
<td><%= link_to 'Edit', edit_post_path(post) %></td>
<td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>

</tbody>
</table>

<br>

<%= link_to 'New Post', new_post_path %>

<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h1>Posts</h1>
</div>
<div class="modal-body">
<div id="result_title"></div>
<div id="result_body"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
閉じる
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>

</div><!-- /container -->

⑦blog/app/assets/javascriptの下に新規ファイル「show.js」を作成。以下のように編集。

$(document).on('ready page:load', function() {

$('table tr').click(function() {
var $cur_td = $(this)[0];
$.ajax({
async: true ,
url : '../show/',
type: "GET",
data: {id : $cur_td.id},
dataType : 'json',
success : function(data, dataType) {
$(".modal-body").find("#result_title").html('<span>'+ data.title + '</span>');
$(".modal-body").find("#result_body").html('<span>'+ data.body + '</span>');
$('#myModal').modal('show');

}
});
});
});

⑧http://localhost:3000にアクセス
　テーブルのカラムをクリックすると詳細（show）がモーダルウィンドウで開く事を確認。

これでなんとか解決しました。ありがとうございます。
ベストアンサーをどちらか迷いましたが、モーダルウィンドウのヒントになる情報をいただけましたので、今回katoyさんのアンサーをベストアンサーとさせていただきました。

Answer 2

Bootstrapありなら、次のページが参考になるかもです。

参考: Rails 4 submit modal form via AJAX and render JS response as table row - Eric London's Blog

Bootstrapなしなら、次のページが参考になるかもです。

参考: 2009-04-06 - 篳篥日記

Comments

[退会済みユーザー]

返信がおそくなって申し訳ございません。
新規作成の部分は教えていただいたサイトをほぼ真似て（モデルやコントロール名を変更する程度）作成してみたところできました。初心者のためレンダリングの部分に慣れていないためかコードを理解するのに苦しんでおりました。（レンダリングは慣れですね。。。）
問題は一覧からテーブルのカラムをクリックしたときに詳細画面（showの部分）のAjaxをどうやって作成するか悩んでおります。