Ruby on Rails 5.1使用Boostrap模态删除确认

Question

我正在创建一个包含许多文章的简单博客应用程序。我成功地为每篇文章和浏览器的默认确认弹出窗口创建了一个删除按钮：

<%= link_to 'Delete' , article, method: :delete, data: { confirm: 'Are you sure?' } %>

我现在正在努力使用Bootstrap modal

进行自定义删除确认

Bootstrap模式显示但删除了错误的文章。它总是删除顶部的文章（第一个）。

版本：

• Bootstrap 4
• Rails 5.1.4

代码：

的application.js

// app/assets/javascripts/application.js

//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require_tree .

index.html.erb

<!-- app/views/articles/index.html.erb -->

<div class="container">
    <h1>My Blog</h1>

    <!-- Render Articles -->
    <%= render @articles %> 
</div>

_article.html.erb

<!-- app/views/articles/_article.html.erb -->

<div class="row">
  <div class="col-sm-8">
    <div class="card mb-3">

      <div class="card-body">
        <h4 class="card-title"><%= article.title %></h4>
        <p class="card-text"><%= @markdown.render(article.body).html_safe %></p>
      </div>

      <div class="card-footer">
        <!-- Delete Button showing the modal -->
        <button type="button" class="btn btn-outline-danger" 
             data-toggle="modal" data-target="#exampleModal">
          Delete
        </button>
      </div>

      <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">

            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Delete Confirmation</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
              </button>
            </div>

            <div class="modal-body">
              Are you sure?
            </div>

            <!-- Delete button in the footer -->
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
              <%= link_to 'Delete', article, method: :delete, class: 'btn btn-outline-danger' %>
            </div>

        </div>
      </div>
    </div>
</div>

渲染视图：

以下是文章观点：

删除模式显示，但删除了错误的项目！不知何故，所有删除按钮都指向第一篇文章。

我是Ruby on Rails的新手。请帮忙！

Answer 1

您的所有模态都具有相同的ID exampleModal，因此当您点击Delete按钮时，exampleModal的第一个实例就是正在打开的内容。

更改您的部分，如下所示......

    <button type="button" class="btn btn-outline-danger" 
         data-toggle="modal" data-target="#exampleModal<%= article.id %>">

和...

<div class="modal fade" id="exampleModal<%= article.id %>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

这样就会打开正确而独特的模态ID。