Каждый из моих поповеров показывает содержание первого - PullRequest
Новая
       20

Каждый из моих поповеров показывает содержание первого

0 голосов
/ 24 января 2019

Я хочу иметь таблицу продуктов, в каждой из которых есть кнопка редактирования и удаления.Каждая кнопка редактирования запускает всплывающее окно, которое имеет форму для обновления продукта.Каждая кнопка удаления является только подтверждением.

В моей коллекции mongodb есть строка таблицы для каждого продукта.Я генерирую это с помощью цикла for.

Моя проблема в том, что каждый поповер такой же, как в первой строке.Все данные внутри всплывающих окон также поступают из первого продукта.Таким образом, нажатие edit на 3-й строке и нажатие update фактически обновят первую строку.

Я использую Bootstrap 4 (Popsvers для таблиц и Bootstrap), JQuery и EJS.

EJS 

<table class="table table-light table-hover">
    <thead class=" thead-light">
        <tr>
            <th scope="col">#</th>
            <th scope="col">ObjectID</th>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Options</th>
        </tr>
    </thead>
    <tbody>
        <% for(var i=0; i < products.length; i++) {%>
        <tr>
            <td>
                <%= i+1 %>
            </td>
            <td>
                <%= products[i]._id.toString() %>
            </td>
            <td>
                <%= products[i].name %>
            </td>
            <td>
                <%= products[i].price %>
            </td>
            <td>
                <button id="product-update" class="product-update btn btn-warning" data-placement="bottom" data-toggle="popover" data-title="Update Product" data-container="body" type="button" data-html="true" href="#" id="login">
                    <span data-feather="edit"></span>
                </button>
                <div id="popover-product-update" class="popover-product-update d-none">
                    <form action="/dashboardproducts/update" method="POST">
                        <div class="form-group">
                            <label for="name">Product Name:</label>
                            <input type="text" class="form-control" name="name">
                        </div>
                        <div class="form-group">
                            <label for="price">Product Price:</label>
                            <input type="text" class="form-control" name="price">
                        </div>
                        <div class="form-group d-none">
                            <label for="id">Product ID:</label>
                            <input type="text" class="form-control" name="id" value="<%= products[i]._id.toString() %>">
                        </div>
                        <button type="submit" class="btn btn-success">Update</button>
                    </form>
                </div>

                <button id="product-delete" class="product-delete btn btn-danger" data-placement="bottom" data-toggle="popover" data-title="Are you sure you want to delete this product?" data-container="body" type="button" data-html="true" href="#" id="login">
                    <span data-feather="trash-2"></span>
                </button>
                <div id="popover-product-delete" class="popover-product-delete d-none">
                    <form action="/dashboardproducts/delete" method="POST">
                        <div class="form-group d-none">
                            <label for="id">Product ID:</label>
                            <input type="text" class="form-control" name="id" value="<%= products[i]._id.toString() %>">
                        </div>
                        <button type="submit" class="btn btn-danger">Yes</button>
                    </form>
                </div>
            </td>
        </tr>
        <% } %>
    </tbody>
</table>

jQuery 

$('.product-update').popover({
    html: true,
    content: function() {
        return $('.popover-product-update').html();
    }
});
$('.product-delete').popover({
    html: true,
    content: function() {
        return $('.popover-product-delete').html();
    }
});

Как видите, у каждого обновления / удаления всплывающего окна есть скрытое поле идентификатора, которое автоматически заполняется в цикле for.

Я пытался отобразить идентификатор объекта в каждом поповере, и все они показывают идентификатор объекта первого продукта в таблице.В дополнение к форме обновления и кнопке удаления, влияющим только на первый продукт в таблице, это заставляет меня поверить, что все всплывающие окна, генерируемые в цикле for, одинаковы, а идентификатором автозаполнения всегда является идентификатор первого продукта.

Кто-нибудь может мне помочь с этим разобраться?

У меня есть демо здесь: https://thawing -garden-41890.herokuapp.com / dashboardproducts

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Проблема не в том, что каждый поповер одинаков, проблема в том, что $('.product-update') возвращает первый найденный элемент, соответствующий имени класса .product-update.Так как ваш for -loop генерирует каждый поповер с .product-update или .product-delete, jQuery не может различить их и возвращает тот, который он находит первым, а именно тот, который принадлежит первой строке вашей таблицы.

Чтобы этого не случилось, вам нужно изменить код, чтобы помочь jQuery найти правильный поповер.В вашем примере кода самый быстрый способ сделать это - сделать что-то вроде этого: 

$('.product-update').popover({
    html: true,
    content: function() {
        return $(this).siblings('.popover-product-update').html();
    }
});
0 голосов
/ 24 января 2019 
$('.product-update').popover({
  html: true,
  content: function() {
    return $(this).siblings('.popover-product-update').html();
  }
});

$('.product-delete').popover({
  html: true,
  content: function() {
    return $(this).siblings('.popover-product-delete').html();
  }
});

Надеюсь, это поможет вам!

...