私のケースにブートストラップモーダルを表示するにはどうすればいいですか？

Question

私はブートストラップを使用しており、images#showアクションへのリダイレクト先のリンクがhome#indexです。リンクがHAMLで書かれている：

- url = @entry.class.to_s.downcase.singularize 
    = link_to(send("#{url}_path", @entry), data: { 'type' => @entry.class.to_s.downcase }) do 
     = yield 

そこで現在、home#indexは、画像の一覧を表示し、画像がクリックされたときに、上記記述されたリンクは、特定の画像例のためのビューにユーザーをリダイレクト：images/1。すなわち、@entryはイメージを表し、クリックされたときに特定のイメージまたは（@entry）にリダイレクトされます。

私はホームページ（home#index）から離れたくないので、クリックした画像（または@entry）を考慮に入れたモーダルビューを表示したいだけです。このリンクを変更して、上記のリンクをクリックしたときにブートストラップモーダルを表示するコードを追加するにはどうすればよいですか？他に何をする必要がありますか？私はモーダルを表示する点に助けが必要です。ここで

は私のトレースです：

Started GET "/images/3" for ::1 at 2016-09-07 22:28:10 -0400 
Processing by ImagesController#show as */* 
    Parameters: {"id"=>"3"} 
    User Load (0.4ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1  ORDER BY "users"."id" ASC LIMIT 1 [["id", 1]] 
    Image Load (0.3ms) SELECT "images".* FROM "images" WHERE "images"."id" = $1 LIMIT 1 [["id", 3]] 
    Group Load (0.4ms) SELECT DISTINCT "groups".* FROM "groups" INNER JOIN  "group_memberships" ON "groups"."id" = "group_memberships"."group_id" WHERE  "group_memberships"."member_id" = $1 AND "group_memberships"."member_type" = $2  AND "group_memberships"."group_type" = $3 [["member_id", 1], ["member_type", "User"], ["group_type", "Group"]] 
    GroupMembership Load (0.4ms) SELECT "group_memberships".* FROM "group_memberships" WHERE "group_memberships"."member_id" = $1 AND "group_memberships"."member_type" = $2 [["member_id", 3], ["member_type", "Image"]] 
    GroupMembership Load (0.5ms) SELECT "group_memberships".* FROM "group_memberships" WHERE "group_memberships"."group_type" = $1 AND "group_memberships"."member_type" = $2 AND "group_memberships"."member_id" = $3 AND "group_memberships"."group_id" IN (-1, -1) [["group_type", "Group"], ["member_type", "User"], ["member_id", 1]] 
    Rendered images/_modal.html.erb (0.0ms) 
    Rendered images/show.js.erb (1.2ms) 
    Completed 200 OK in 27ms (Views: 10.0ms | ActiveRecord: 1.9ms) 

Answer 1

1つのオプションは、jsテンプレートを使用してremote: trueオプションの使用を使用するようにリンクを変更することです：コントローラ応答タイプに

<%- @images.each do |image| -%> 
<%= link_to '...', image_path(image) remote: true %> 
<%- end -%> 
<div id="modals"></div> 

次のことができますjsに設定することをお勧めします（htmlオプションをそのまま使用することをお勧めします）。

を扱うテンプレートで

その後：

// app/views/images/show.js.erb 
$("#modals").html('<%= j render "images/modal", image: @image %>'); 
$('#modals .modal').modal(); 
$('#modals .modal').modal('.toggle'); 

が最後にモーダルとセットアップのために任意のマークアップに必要な部分を追加します。

<!-- app/views/images/_modal.html.erb --> 
<div class="modal fade"> 
    ... 
    <%= image_tag(image.url, class: "img-responsive") %> 
    ... 
</div>