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 %}

Answer 1

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.

Answer 2

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 %}