Bootstrap alert closing on page load

Question

I have a view in which I send some messages, like this:

messages.warning(request, 'Nothing found")

In my settings.py I have edited the message tags like:

MESSAGE_TAGS = {
    messages.DEBUG: 'alert-info',
    messages.INFO: 'alert-info',
    messages.SUCCESS: 'alert-success',
    messages.WARNING: 'alert-warning',
    messages.ERROR: 'alert-danger'
}

on my template, I display them like this:

{% for message in messages %}
    <div class="alert {{ message.tags }} alert-dismissible fade in">
        <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
        {% if message.tags == 'info' %}
            <p>{{ message }}<br>
                You have <strong>{{users}}</strong> user{{users|pluralize}}<br>
         ,around <strong>{{non_users}}</strong> non user{{non_users|pluralize}}</p>
        {% else %}
            <p>{{ message }}</p>
        {% endif %}
    </div>
{% endfor %}

When the template loads, the messages appears very fast and disappears.

If I try this: <p>{{message}}</p> instead the message stays there, so I'm guessing I'm doing something wrong with bootstrap.

This (kinda) works as well: <div class="{{message.tags}}">

Could someone shed a light?

Edit:

I just noticed this is happening specifically when I use messages.error(), the rest of them are working properly, can't seem to find what's wrong.

Do you want to destroy the message when clicking on the close button? — Lemayzeur, May 17 '18 at 18:13
Yeah, it should be doing that already, but it seems like the `alert` class is breaking something. — Onilol, May 17 '18 at 18:26

Lemayzeur · Answer 1 · 2018-05-17T18:33:13.220

0

try this, the class is alert-{{tag}} which will render alert-info, there's no whitespace

{% for message in messages %}
    <div class="alert alert-{{message.tags}} page-alert">
        <button type="button" class="close" data-dismiss='alert'>
             <span aria-hidden="true"> × </span>
             <span class="sr-only">Close</span>
        </button>
        <p>{{message}}</p> 
    </div>
{% endfor %}

edited May 17 '18 at 18:33

answered May 17 '18 at 18:29

Lemayzeur

8,297
3
23
50

my message tags are already formatted to display it like that – Onilol May 17 '18 at 18:30
so, what's exactly the issue? – Lemayzeur May 17 '18 at 18:31
It seems like that `alert` class is triggering something that closes the div. I have no js code that does that tho. – Onilol May 17 '18 at 18:35
do you have it that way `alert alert-{{message.tags}}` instead of `alert {{message.tags}}`? – Lemayzeur May 17 '18 at 18:36
It should be displayed like `alert {{message.tags}}` which translates to `alert alert-warning` – Onilol May 17 '18 at 18:40
Try removing these `class` : `alert-dismissible fade in` – Lemayzeur May 17 '18 at 18:42
Wouldn't that make it non-closable? – Onilol May 17 '18 at 18:43
Of course, but add it to the button instead... ` – Lemayzeur May 17 '18 at 18:43

Bootstrap alert closing on page load

1 Answers1