CODEWITHSUNDEEP
pythondjangodjango-messages
tiberhockey
tiberhockey

Reputation: 576

Why does the Django message tags boxs is not working?

I have a problems with the message tags. So I have a little apps that send a sms.

When I press the submit button and my webpage, if the sms is send correctly a message.success is printed on the screen.(The success messages work fine. the text and green color appear correclty) But if the message is not sent, an message.error is printed, but only the text is printed, the red color box is not printed(Which is not fine, I also want the Red box to be printed). I searched online to find a answer, but I didn't find anything.THanks for help

views.py

 try:
            sms = Client.messages.create(
                from_="+14509001443",
                body=mess,
                to=number
            )
            send = sms.sid
            print("DOne")
            form.instance.author = request.user
            form.save()
            messages.success(request, f'Votre message a bien été envoyé!')
            return redirect("sms-home")
        except:
            print("error")
            messages.error(request, f'Votre message na pas été envoyé!')
            return redirect("sms-home")

home.html

{% extends "sms/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}">
    {{ message }}
</div>
{% endfor %}
{% endif %}


<div>
    <form method="POST">
        {% csrf_token %}
        {{ form|crispy }}
        <button class="btn btn-outline-info" type="submit" value="Save">SEND</button>
    </form>
</div>


</body>
</html>
{% endblock content %}

Upvotes: 0

Views: 1555

Answers (2)

Naphtal USABYUWERA
Naphtal USABYUWERA

Reputation: 1

The issue is that Django generates an alert-error class see Django messages framework documentation for error messages, whereas Bootstrap expects the class alert-danger to display a red alert box Bootstrap Alert Component. This mismatch is why the green success message appears correctly, but the red error box does not.

I would suggest the two approach to resolve this, you can check it out and do it chose one

  1. Modify MESSAGE_TAGS in settings.py

    from django.contrib.messages import constants as messages

    MESSAGE_TAGS = { messages.ERROR: 'danger', }

This will change Django's default error tag to danger, which Bootstrap recognizes and will render with the red alert box.

  1. Conditional Rendering in the Template

Alternatively, if you'd prefer not to modify your settings, you can address the issue directly in your template. Use a conditional statement to check if the message tag is error and change it to danger

{% if messages %}
    {% for message in messages %}
        <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %}">
            {{ message }}
        </div>
    {% endfor %}
{% endif %}

I hope in this way, when an error message is generated, it will be wrapped in a danger alert class, and Bootstrap will display the correct red box.

Else You can modify the bootstrap class to use alert-error instead of alert-danger

Upvotes: -1

schillingt
schillingt

Reputation: 13731

Bootstrap's alert class is alert-danger, I'm pretty sure django's error tag is error. So your alert div is being rendered with the classes "alert alert-error" which doesn't match any styles that are defined.

To solve this there are a few options:

  1. Generate a generic message with the tag 'danger'.
  2. Customize your bootstrap styles such that alert-error is handled like alert-danger
  3. Add 'danger' as an extra_tag for the messages.error call, then handle the possibility of multiple tags in your template.

Actually, I wouldn't be suprised if you already need to handle the possibility of multiple tags in your template.

Upvotes: 2

Related Questions