Each of my popovers show the content of the first one

Question

I'm want to have a table of products that have an edit and delete button in each row. Each edit button triggers a popover that has the form to update the product. Each delete button is just a confirmation.

There is a table row for each product in my mongodb collection. I generate this with a for loop.

My problem is that each popover is the same as the first row. All the data inside the popovers comes from the first product as well. So pressing edit on the 3rd row and pressing update will actually update the first row.

I am using Bootstrap 4 (Tables and Bootstrap Popovers), JQuery and 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();
    }
});

As you can see, each update/delete popover has a hidden ID field which is autofilled in the for loop.

I've tried displaying the object id in each popover and they all show the object id of the first product in the table. In addition to the update form and delete button only affecting the first product in the table, this leads me to believe that the popovers being generated in the for loop are all the same and the autofilled id is always the id of the first product.

Is anyone able to help me figure this out?

I have a demo here: https://thawing-garden-41890.herokuapp.com/dashboardproducts

score 1 · Answer 1 · answered Jan 24 '19 at 11:31

1

$('.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();
  }
});

Hope this Helps you!

answered Jan 24 '19 at 11:31

Selvaraj

68
1
4

Thanks! This looks like the code Henrik also posted. It works :) – adrianmaznio Jan 24 '19 at 19:53

score 1 · Accepted Answer · answered Jan 24 '19 at 11:32

The problem is not that each popover is the same, the problem is that $('.product-update') return the first element it finds matching the class name .product-update. Since your for-loop generates every popover with either .product-update or .product-delete, jQuery cannot distinguish between them and returns the one it finds first, which happens to be the one belonging to the first row of your table.

To avoid this happening you need to alter your code to help jQuery find the right popover. In your code example the quickest way to accomplish this would be to do something like this:

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

Thanks so much for this detailed explanation! I understand now and confirm that this works! — adrianmaznio, Jan 24 '19 at 19:52

Each of my popovers show the content of the first one

2 Answers2