eachでループにそれぞれmodalを付ける方法

＜エラー内容＞

Eachした要素に対してそれぞれmodalで編集機能を実装した際にエラーが発生。

全てのmodalに対してid=1のモーダルが表示されてしまう。

＜解決策＞

それぞれのmodal IDをuniqueにしなければならない。よって、buttonのdata-target要素、modalのid要素にuniqueになるようにidを加えてあげなければならない。

data-target = #<your modal id><%= project.id %>

～Source～

実際のフォームでのidは、edit_project_<id>になる！！

<form class="edit_project" id="edit_project_1" action="/users/101/projects/1" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="_method" value="patch">

jquery - Displaying a modal for one entry in a .each loop - Rails / Bootstrap - Stack Overflow

もう一つ問題が発生。。レスポンスをajaxで受け取る際に、セレクタの指定の仕方がわからない、、

＜解決策＞

正規表現を使うことで実装成功。

editProject = $('div[id^="#editProject"]')

$(document).on 'ajax:success', editProject, (xhr, data, status) ->location.reload()

とした！

jQueryのセレクタに正規表現・属性フィルタを使う方法！ | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト