Как включить некоторый JS-код в модал Bootstrap с помощью ejs? - PullRequest
Новая
       19

Как включить некоторый JS-код в модал Bootstrap с помощью ejs?

0 голосов
/ 13 июня 2019

У меня есть страница ejs, которая использует некоторые данные, включая цикл по <% = items [i] .id%> и кнопки добавления или удаления элементов. Как только я переношу функцию удаления в модал начальной загрузки (создав диалог подтверждения удаления), цикл перестает работать, и удаляется только первый элемент массива. Я использую Bootstrap 4.0 и их встроенный JQuery. Удаление работает правильно, если выполняется вне модального. Спасибо за любые подсказки! 

<% for (let i=0; i<items.length; i++) { %>
<div class="card w-100 p-3">
  <form method="post" >
    <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
      <div class="card-header">
        <%= items[i].name  %>
      </div>
      <div class="card-body">
        <p class="card-text"> <%= items[i].desc  %> </p>
      </div>
      <button formaction="/project" type="submit" class="btn btn-outline-dark" name="editButton" value="<%= items[i].id  %>">Edit</button>
      <button type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#deleteModal">Delete</button>

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


<!-- Delete Modal -->
 <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form class="form-control" action="/delete" method="post">
          <p>Are you sure you want to delete <%= items[i].name  %> ? </p>

        <button type="submit" class="btn btn-outline-danger" name="deleteButton" value="<%= items[i].id  %>">Delete</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        </form>

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

<% } %>

1 Ответ

0 голосов
/ 13 июня 2019

Все <div class="model... имеют одинаковый атрибут id.Когда вы нажимаете кнопку «Удалить», открывается только первый модал.Добавьте <%= i %> в качестве суффикса на id: 

<% for (let i=0; i<items.length; i++) { %>
    <div class="card w-100 p-3">
        <form method="post">
            ...
            <button data-target="#deleteModal<%= i %>" type="button" class="btn btn-outline-danger" data-toggle="modal" >Delete</button>
        </form>
    </div>

    <!-- Delete Modal -->
    <div id="deleteModal<%= i %>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        ...
    </div> 
<% } %>
...