Django Python Notification Message Popup using toastr JS Example

Published On: 08/07/2022 | Category: Django Python

Hi Dev,

This article goes in detailed on django python notification message popup using toastr js example. I’m going to show you about how to use toastr js in django python. you'll learn toastr js notification message popup in django python example. This post will give you simple example of notification message popup using toastr js django app.

Here i explained simply step by step example of notification message popup using toastr js django.

Step 1 : Create a Project

In this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:

django-admin startproject example
Step 2 : Create a App
python3 startapp core
Step 3 : Creating the Views

In this step, we need to create the views for performing fetch record to the database.Open the core/ file and add:

from django.shortcuts import render
from django.contrib import messages

# Create your views here.

def index(request):
    messages.success(request, 'Welcome To Dashboard!')
    return render(request, 'index.html')
Step 4 : Creating the Templates

Next, open the core/templates/index.html file and the add:

<!DOCTYPE html>
    <title>How To Notification Message PopUp Using Toastr Js Plugin Django Example -</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" type="text/css" href="">
    <script src=""></script>
    <script src=""></script>
    <script type="text/javascript">
    {% if messages %}
        document.addEventListener("DOMContentLoaded", function(event) {
            toastr.options = { "closeButton": true, "debug": false, "newestOnTop": true,
                "progressBar": true, "positionClass": "toast-top-right", "preventDuplicates": true,
                "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "5000",
                "extendedTimeOut": "1000", "showEasing": "swing", "hideEasing": "linear",
                "showMethod": "fadeIn", "hideMethod": "fadeOut" };
            {% autoescape off %}
                {% for msg in messages %}
                    toastr.{{ msg.level_tag }}("{{ msg }}");
                {% endfor %}
            {% endautoescape %}
    {% endif %}
<div class="container mt-5">
    <div class="row">
        <div class="col-md-6 mx-auto">
            <div class="card">
                <div class="card-header">
                <div class="card-body">
                    <h5>Welcome to the</h5>
Step 5 : Creating URLs

In this section, we’ll create the urls to access our core views.Go to the core/ file and update it as follows:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index),

Next, we will require the modify the your root preoject folder lets update the file.

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('', include('core.urls')),
Run the Server

In this step, we’ll run the local development server for playing with our app without deploying it to the web.

python runserver

Next, go to the http://localhost:8000/ address with a web browser.

I Hope It will help you....