Question

我正在使用Rails进行项目。

我正在尝试在删除链接中放置一个警报框。

为此，我尝试使用普通的警报框，并且工作正常，然后我使用了引导程序模态，因为我在循环内使用了引导程序模态代码，因此正在为每个循环创建模态，因此我必须将其删除。现在，我使用了Data-Confirm Modal，并且正确地遵循了他们的文档，但是仍然没有得到正确的结果。

我的问题是，是否有其他方法可以在循环内使用模态而不使用它。

下面给出了代码，请给我一些建议

 <div class="row">
  <% @user.each do |c| %>
   <div class="col-lg-3">
    <div class="card bot-card card-1">
     <div class="row">
      <div class="col-lg-8">
        <p class="d-flex align-items-center">
          <span class="green-dot"></span>
          <span class="online-text">online</span>
        </p>
       </div>
      <div class="col-lg-1">
        <%= link_to user_path(c.id), method: :delete, data: {confirm: 'Are 
      you sure?'} do %>
        <i class="fa fa-trash" aria-hidden="true" ></i>
        <%end%>
      </div>
      <div class="col-lg-1">
        <i class="far fa-clone">
        </i>
      </div>
     </div>
       <img src="assets/avatar-2.png" alt="Avatar" class="avatar" >
     <div class="card-body">
       <p class="card-title"><%= c.name %></p>
       <p class="card-text"><%= c.description %></p>
       <div class="d-flex justify-content-end card-link">
          <a href="users/#" class="card-link-1">View Details</a>
          <a href="users/<%= c.id %>" class="card-link-2">Edit</a>
        </div>
     </div>
   </div>
 </div>
</div>
<% end %>
<div class="col-lg-3">
 <div class="card card-2 d-flex align-items-center justify-content-center">
  <p>
  <a href="/users/new" class="card-link">Create user</a>
  </p>
  <p>
    <a href="/users/#" class="card-link">Create From Template</a>
   </p>
 </div>
 </div>
 </div>

使用引导模式的代码

<div class="row">
 <% @user.each do |c| %>
  <div class="col-lg-3">
   <div class="card  card-1">
    <div class="row">
      <div class="col-lg-8">
        <p class="d-flex align-items-center">
          <span class="green-dot"></span>
          <span class="online-text">online</span>
        </p>
       </div>
      <div class="col-lg-1">
        <i class="fa fa-trash" aria-hidden="true" data-toggle="modal" data- 
target="#exampleModal"></i>
      </div>
      <div class="col-lg-1">
        <i class="far fa-clone">
        </i>
      </div>
     </div>
       <img src="assets/avatar-2.png" alt="Avatar" class="avatar" >
     <div class="card-body">
       <p class="card-title"><%= c.name %></p>
       <p class="card-text"><%= c.description %></p>
       <div class="d-flex justify-content-end card-link">
          <a href="users/#" class="card-link-1">View Details</a>
          <a href="users/<%= c.id %>" class="card-link-2">Edit</a>
        </div>
     </div>
   </div>
 </div>

 <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>
        <div class="modal-footer">
          <button class="btn btn-danger">
            <%= link_to 'Ok', user_path(c.id), method: :delete %>
          </button>
        </div>
    </div>
  </div>
</div>
<% end %>
<div class="col-lg-3">
<div class="card card-2 d-flex align-items-center justify-content-center">
  <p>
  <a href="/users/new" class="card-link ">Create user</a>
  </p>
  <p>
    <a href="/users/#" class="card-link ">Create From Template</a>
  </p>
</div>
</div>
</div>

使用数据确认模式无法获得正确的结果

0 个答案: