Django, как обновить html-страницу не в urls.py, а только в тегах

Я работаю над приложением, которое использует теги {% include %} для создания страниц. В основном у меня есть layout.html, который служит базой, и в нем есть тег include для navbar.html и {% block content %} для других страниц, например, home, login, user и т. д. В navbar.html есть еще {% include %} для моего notification.html, который содержит значок значка для уведомлений. Я использую django-notifications-hq для обработки уведомлений. Все работает, но для получения новых уведомлений мне приходится обновлять страницу. Я хочу, чтобы значок (или notifications.html) периодически обновлялся. Вот html-страницы, layout.html, navbar.html и notification.html; они не находятся в файле urls.py, просто вызываются через теги.

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

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>

Я прочитал тонну возможных ответов, модифицированных вещей и т.д., но я просто не могу заставить это работать.

Я пробовал несколько решений, таких как Ajax. Я столкнулся с проблемой, что не могу установить url: но я попробовал current_url() и, кажется, все было хорошо, но все равно не обновлялся значок уведомления.

Я открыт для изменений, если потребуется, но мне бы очень хотелось иметь возможность оставить макеты страниц такими, какие они есть.

Моя последняя попытка выглядела следующим образом:

    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);

с элементом div, окружающим тег уведомления

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

Также пробовали задать id=notifylist значку, в html шаблоне и т.д.

Вернуться на верх