Dynamic content not showing/removing until page is refreshed

Question

I have looked at that question as it over 10yrs old. Tech changes and the answers on that post do not solve my problem

I have looked at a few posts of SO, but none seem to work in my case,

After refresh page content is showing and dynamic radio buttons as navigation not working until page refresh are just a few

I append data to a div that's in a modal, the problem is when I open the modal the dynamic content does not show. Same goes for when I remove the item it still displays until I refresh the page.

As one of the above posts state adding document does not work

I have added all the scripts in case the issue lies somewhere in one of then

<script>
    $(document).ready(function () {
        function removeItem(id) {
            var obj1 = JSON.parse(sessionStorage.getItem("cart")) || {};
            var items = obj1;
            for (var i = 0; i < items.length; i++) {
                if (items[i].id === id) {
                    alert(id);
                    items.splice(i, 1);
                    break;
                }
            }
            sessionStorage.setItem("cart", JSON.stringify(obj1));
        }

        $('.itemsInCart').on('click', 'p.remove-item', function (e) {
            e.preventDefault();
            var val = $(".remove-item").attr('data-id');
            removeItem(val);
        });
    });
</script>
<script>
    $(document).ready(function () {
        $("#displayTotal").hide();
        $('.btnProduct').on('click', function (e) {
            e.preventDefault();

            var id = $(this).data("id");
            var title = $(this).data("title");
            var rawPrice = $(this).data("price");
            var cart = sessionStorage.getItem("cart");
            var obj = [];
            if (cart) {
                obj = JSON.parse(cart);
            }
            obj.push({ "id": id, "title": title, "price": rawPrice });
            sessionStorage.setItem("cart", JSON.stringify(obj));

            $("#displayTotal").show();
        });
        function populateContainer() {
            var retrieveCartFromSessionStorage = sessionStorage.getItem("cart");
            var displayCartInSessionStorage = JSON.parse(retrieveCartFromSessionStorage);

            var total = 0;
            var formatter = new Intl.NumberFormat('en-GB', {
                style: 'currency',
                currency: 'GBP',
                minimumFractionDigits: 2
            });

            for (var p in displayCartInSessionStorage) {
                if (displayCartInSessionStorage.hasOwnProperty(p)) {
                    $(".itemsInCart").append('<p class="remove-item" data-id="' + displayCartInSessionStorage[p].id + '">' + displayCartInSessionStorage[p].title + ' ' + formatter.format(displayCartInSessionStorage[p].price) + " " + '<span class="text-danger">Remove Item</span></p>');
                    total += displayCartInSessionStorage[p].price;
                }
            }

            var basicPrice = $("#aircraft-basic-price").attr('data-basic');
            var sum = parseFloat(basicPrice) + parseFloat(total);

            $("#displayTotal").text(formatter.format(sum));
        }

        populateContainer();
    });
</script>

The modal is:

<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h4>Products</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
            <p class="text-center text-muted">Items in Cart</p>
            <div class="itemsInCart">
            </div>
        </div>
        <div class="modal-footer"><button class="btn btn-light" type="button" data-dismiss="modal">Close</button><button
                class="btn btn-dark" type="button">Checkout</button></div>
    </div>
</div>

Please try adding a runnable snippet reproducing the issue. You can do so using the `<>` icon. — Jeto, Feb 15 '19 at 12:30
Tried cannot get it to work, keep getting script error even though it works on my machine — George Phillipson, Feb 15 '19 at 12:43
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Wesley Smith, Feb 15 '19 at 12:47

score 1 · Accepted Answer · answered Feb 15 '19 at 12:54

1

I think the issue is that you are not running populateContainer(); before you open the modal. Place populateContainer(); before $("#displayTotal").show(); and this should fix your issue.

answered Feb 15 '19 at 12:54

Ginger CSS Wizard

664
3
9

Dynamic content not showing/removing until page is refreshed

1 Answers1