3

I am making a simple blog application that has many articles. I successfully made a delete button for each article and the browser's default confirmation popup using:

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

I'm now struggling to make a customized delete confirmation using Bootstrap modal

The Bootstrap modal shows up but it deletes a wrong article. It always deletes the article on the top (the first one).

Versions:

  • Bootstrap 4
  • Rails 5.1.4

Code:

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>

Rendered Views:

Here is the articles view:

Articles

The delete modal shows up, but it deletes the wrong item! Somehow, all delete buttons point to the first article.

Delete confirmation

I'm new to Ruby on Rails. Please help!

Community
  • 1
  • 1
Khang Vu
  • 329
  • 4
  • 13
  • You can create a link in javascript and place it in the modal with a JQuery on click function. https://stackoverflow.com/questions/4772774/how-do-i-create-a-link-using-javascript – Beengie Nov 25 '17 at 23:20
  • @Beengie Can you please elaborate on that? I'm also new to web development in general, so it would be helpful if you could spend a little time writing a decent answer. Thank you for your help! :) – Khang Vu Nov 25 '17 at 23:39

1 Answers1

3

All of your modals have the same ID, exampleModal so when you click the Delete button the first instance of exampleModal is what's being opened.

Change your partial as follows...

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

and...

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

And that way the correct and unique modal id will be opened.

SteveTurczyn
  • 36,057
  • 6
  • 41
  • 53