How to use toastr in Django for success or fail message

Question

I have been using Django message framework to show the success or failure message in my application. But I want the UI to be good so I found out that toastr is a good way to display messages to the user. But I am not sure how to use it. Please guide me through this.

The function below saves the user to the database and when the user info is save a message is displayed:

def addSubscriber(request):
    template = 'addSubscriber.html'

    if request.method == 'POST':
        form = addSubsForm(request.POST)
        if form.is_valid():
            f = form.save(commit=False)
            f.save()
            messages.success(request, "The Subscriber has been successfully added")
            return redirect('report')

        else:
            messages.error(request, "Sorry the data has not been entered to the database")

    else:
        form = addSubsForm()

    return render(request, template, {'form': form})

The following template shows the display of the message:

  {% if messages %}
            <ul class="messages">
                {% for message in messages %}
                <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}

score 21 · Answer 1 · answered Aug 30 '19 at 14:09

Thanks for this question I was able to implement toastr with python, this is a more complete answer that was given by Neeraj Kumar.

In my case, It is much better than materialize, because that CSS kit disrupts my own CSS code and I don't have the time to do CSS debugging.

First, in your template, you have to set the JS files, example:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/toastr.css' %}" media="all">
<script type="text/javascript" src="{% static 'js/toastr.min.js' %}"></script>

Next, inside of the body, you might put the options for the Toast messages (These options can be easily created in the Toastr demo page.

Finally, insert this code of block if you are using the standard tags of the messages framework from django:

    {% if messages %}
        {% for message in messages %}
            {% if message.tags == 'success'%}
                <script type=text/javascript>toastr.{{ message.tags }}('{{ message }}')</script>
            {% elif message.tags == 'info' %}
                <script type=text/javascript>toastr.{{ message.tags }}('{{ message }}')</script>
            {% elif message.tags == 'warning' %}
                <script type=text/javascript>toastr.{{ message.tags }}('{{ message }}')</script>
            {% elif message.tags == 'error' %}
                <script type=text/javascript>toastr.{{ message.tags }}('{{ message }}')</script>
            {% endif %}
        {% endfor %}
    {% endif %}

I hope this can be helpful and time saving for other people.

This is helped me, thnx. Copied messages block in a html called toast-component.html then include it after .. block. Worked like charm — Tech, Apr 15 '22 at 10:11

score 6 · Answer 2 · edited Sep 25 '19 at 22:55

6

Add toastr js and css in html code then write below code for showing toastr messages

 {% for message in messages %} 
   toastr.{{ message.tags }}("{{ message }}");
 {% endfor %}

edited Sep 25 '19 at 22:55

yanjost

5,223
2
25
28

answered Jul 10 '17 at 07:07

Neeraj Kumar

3,851
2
19
41

1

doesn't work. I don't see any `toastr` message. Instead just the plain error text I send in `message` variable – sphoenix Oct 26 '18 at 18:53
@sphoenix Check your console of a browser. I think you will see an error in console that will useful to understand this – Neeraj Kumar Oct 29 '18 at 10:35
@sphoenix there was an error in the code provided, I fixed it – yanjost Sep 25 '19 at 22:56

How to use toastr in Django for success or fail message

2 Answers2