I know this is something silly but I just can't seem to fix it.
I'm displaying alerts onto a Django template, and would like the user to remove the alert by pressing the 'X' icon that is displayed when it pops up. My issue is that clicking the 'X' icon doesn't work. the alert messages also do not show when redirected to the home page, however when navigating to a product page all the alerts that have been generated for that page will show up at once.
Here is my base template which shows the messages:
<body>
<div class="mt-5 pt-4">
{% if messages %}
{% for message in messages %}
<div class="messages {{ message.tags }} fade show" role="alert">
{{ message }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<!-- <span aria-hidden="true">×</span> -->
</button>
</div>
{% endfor %}
{% endif %}
</div>
</body>
And my messages are created in the views.py file when a point in a statement is reached, e.g.:
order_item.save()
messages.success(request, 'This item quantity was updated.')
order.items.add(order_item)
messages.success(request, 'This item was added to your cart.')
And here is an example of the alert when it pops up.
Thanks.