Django, how to refresh html page not in urls.py only included with tags

I am working on an app that utilizes the {% include %} tags to build pages. Basically I have a layout.html that serves as the base and it has an include tag for the navbar.html and {% block content %} for other pages e.g. home, login, user etc. In the navbar.html there is another {% include %} for my notification.html which contains the badge icon for notifications. I am using django-notifications-hq to handle the notifications. Everything works, but to get new notifications, I have to refresh the page. I want the badge (or notifications.html) to update periodically. Here are the html pages, the layout.html, navbar.html and notification.html; they are not in the urls.py file, simply called via tags.

layout.html


    {% load static %}

    <!DOCTYPE html>
    <html>
    <head>
        <title>Application</title>
        <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.min.css' %}"  />
        <link href="{% static 'css/login.css' %}" rel="stylesheet">
    
        <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'javascript/tablesorter.js' %}"></script>
        <script type="text/javascript" src="{% static 'javascript/refreshpage.js' %}"></script>
    </head>
    <body>
        <div id="notifylist">
            {% include 'VegeApp/navbar.html' %}
        </div>
        <hr />
        {% if messages %}
        <ul class="alert">
            {% for message in messages %}
            {% if message.tags == 'debug' %}
            <li class="alert alert-secondary">{{ message }}</li>
            {% endif %}
            {% if message.tags == 'error' %}
            <li class="alert alert-danger">{{ message }}</li>
            {% endif %}
            {% if message.tags == 'info' %}
            <li class="alert alert-info">{{ message }}</li>
            {% endif %}
            {% if message.tags == 'success' %}
            <li class="alert alert-success">{{ message }}</li>
            {% endif %}
            {% if message.tags == 'warning' %}
            <li class="alert alert-warning">{{ message }}</li>
            {% endif %}
            {% endfor %}
        </ul>
        <hr />
        {% endif %}
    
        {% block content %}
    
        {% endblock %}
    </body>
    </html>


navbar.html

    {% load static %}
    
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <img src="{% static 'images/logo.png' %}" width="400" height="130" />
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="{% url 'home' %}">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'tables' %}">Tables</a>
                    </li>
                </ul>
                {% if request.user.is_authenticated and request.user.is_staff %}
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li>
                        <a class="nav-link" href="{% url 'admin' %}">Admin</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Admin Control
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="{% url 'usercontrol' %}">User Control</a></li>
                            <li><a class="dropdown-item" href="{% url 'formcontrol' %}">Form Control</a></li>
                            <li><a class="dropdown-item" href="{% url 'linkcontrol' %}">Link Control</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            View Control
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="{% url 'userselectview' %}">User Feedback</a></li>
                            <li><a class="dropdown-item" href="{% url 'changed' %}">Records Table</a></li>
                            <li><a class="dropdown-item" href="{% url 'commentsadmin' %}">Comments Table</a></li>
                        </ul>
                    </li>
                    {% endif %}
                </ul>
                {% if request.user.is_authenticated %}
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    {% if request.user.is_staff %}
                    <li class="nav-item">
                        {% include 'VegeApp/notifications.html' %}
                    </li>
                    {% endif %}
                    <li class="nav-item">
                        <a style="font-size:28px; color:white; font-weight:700; margin-right:10px">Hello, {{request.user}}</a>
                        <a class="nav-link" style="font-size:16px; color:cyan; font-weight:500" aria-current="page" href="{% url 'logoutpage' %}">Logout</a>
                    </li>
                </ul>
                {% else %}
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" style="font-size:16px; color:cyan; font-weight:500" aria-current="page" href="{% url 'loginpage' %}">Login</a>
                    </li>
                </ul>
                {% endif %}
            </div>
        </div>
    </nav>

notifications.html

    {% load static %}
    {% load notifications_tags %}
    
    {% notifications_unread as unread_count %}
    {% live_notify_badge badge_class="badge bg-primary" %}
    
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <span class="badge bg-primary"></span>
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            {% for notification in user.notifications.unread %}
            <li style="max-width: 150px;">
                <a class="dropdown-item" style="max-width: 150px; text-overflow: ellipsis; overflow: hidden; word-break: break-all;" href="{% url 'commentsadmin' %}">
                    {{notification.actor}}: {{notification.verb}}
                </a>
            </li>
            {% endfor %}
        </ul>
    </li>

I have read through a ton of possible answers, modified stuff etc. but I just can't get this to work.

I have tried a couple of solutions like Ajax. I ran into issues with not being able to set the url: but I tried current_url() and it seemed to be happy but still didn't refresh the notification badge.

I am open to changing things up if I have to, but I would really like to be able to leave the page layouts as is.

My last try looked like this:

    function refresh() {
        $.ajax({
            url: current_url(),
            success: function (data) {
                $('#notifylist').replaceWith($('#notifylist', data)); // NOTE this
            }
        });
    }
    var seconds = 3; // seconds, edit here
    setInterval(refresh(), seconds * 1000);

with a div element surrounding the notification tag

    <div id="notifylist">
             <li class="nav-item">
                        {% include 'VegeApp/notifications.html' %}
             </li>
    </div>

Also tried giving the id=notifylist to the badge, in the html template etc.

Back to Top