2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

繰り返し処理の中でモーダルウィンドウを実装すると、モーダル全てに同じ画像が表示されてしまうエラー

Posted at

#発生したエラー
繰り返し処理の中でモーダルウィンドウを実装すると、モーダル全て同じ画像が表示されてしまう

#開発環境
・Ruby 2.5.7
・Rails 5.2.4.4
・macOS Catalina 10.15.7
・refile
・Bootstrap3

#前提
・refileで画像投稿機能実装済み
・Bootstrap導入済み
・route.rbでのルーティング、モデル間のアソシエーションは実装済み
・親モデルであるPersonモデルと画像投稿用のcreationモデルは1:Nの関係
・下記サイトを参考にjem無しで画像拡大機能を実装したく、モーダルウインドウを実装しています。

参考サイト
サイト名:Pilgrim(ピルグリム)
著者名:ねこま様
記事名:[Bootstrap]クリックした画像を浮かび上がらせる ー モーダルウィンドウ
URL:http://pilgrim-guild.com/modal-window-on-bootstrap/

show.html.erb
<% @person.creations.each do |creation| %>
  <%= attachment_image_tag creation, :image, :fill, 250, 100 %>
  <!-- モーダルのトリガーボタン -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#creationModal">拡大する
  </button>

   #省略

  <!-- モーダルウィンドウ -->
  <div class="modal fade" id="creationModal" tabindex="-1" role="dialog" aria-labelledby="creationModalLabel">
       
   #省略

  </div>
<% end %>

(※Personは親モデル。PersonのshowページでCreationモデルの投稿機能を実装しています)
#エラー原因と解消方法
注目するのは"modal fade"クラスの"creationModal"IDです。
ID名だけ書いてしまってるので、繰り返し処理をすると全てのモーダルウインドウで1番目のIDが表示されてしまっています。固有IDを追加が必要です。
そのため下記の様に、モーダルのトリガー部分とモーダルウィンドウのid部分にそれぞれ<%= creation.id %>を足してあげると解消しました。

show.html.erb
<% @person.creations.each do |creation| %>
  <%= attachment_image_tag creation, :image, :fill, 250, 100 %>
  <!-- モーダルのトリガーボタン -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#creationModal<%= creation.id %>">拡大する
  </button>

  #省略

  <!-- モーダルウィンドウ -->
  <div class="modal fade" id="creationModal<%= creation.id %>" tabindex="-1" role="dialog" aria-labelledby="creationModalLabel">
      
  #省略

  </div>
<% end %>

以上となります。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?