Notifications not showing on list

I have a django app with django-notifications-hq installed. The notifications are working pretty well except for the list of notifications aren’t showing on the field. The notifications count is showing in the navbar.

Here’s my code :

<div class="dropdown">
    <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
        <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>
      </svg> {{ request.user.notifications.unread.count }}
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      {% for notification in notifications %}
        <a class="dropdown-item" href="{{ notification.data.action_object.get_absolute_url }}">
          Notification: {{ notification.actor }} {{ notification.verb }}
        </a>
      {% empty %}
        <span class="dropdown-item">No notifications</span>
      {% endfor %}
    </div>
</div>

I’ve tried to consult ChatGPT but don’t get any answers. So any help from this community would be a great one. Also, if you need me to post anything else, I would definitely post it here.

>Solution :

It looks like you are using Django with the django-notifications-hq package to handle notifications in your app. The issue seems to be that the list of notifications is not displaying in the dropdown.
In your template, you are trying to iterate over notifications, but it seems like you might not be passing the notifications to the template context. You should make sure that you are passing the notifications to the context when rendering the template in your views.
Here’s a modified version of your template to handle both unread and read notifications:

<div class="dropdown">
    <button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bell" viewBox="0 0 16 16">
        <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/>
      </svg> {{ request.user.notifications.unread.count }}
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      {% if request.user.notifications.unread %}
        <h6 class="dropdown-header">Unread Notifications</h6>
        {% for notification in request.user.notifications.unread %}
          <a class="dropdown-item" href="{{ notification.data.action_object.get_absolute_url }}">
            Notification: {{ notification.actor }} {{ notification.verb }}
          </a>
        {% endfor %}
      {% endif %}

      {% if request.user.notifications.read %}
        <div class="dropdown-divider"></div>
        <h6 class="dropdown-header">Read Notifications</h6>
        {% for notification in request.user.notifications.read %}
          <a class="dropdown-item" href="{{ notification.data.action_object.get_absolute_url }}">
            Notification: {{ notification.actor }} {{ notification.verb }}
          </a>
        {% endfor %}
      {% endif %}

      {% if not request.user.notifications %}
        <span class="dropdown-item">No notifications</span>
      {% endif %}
    </div>
</div>

In this template, I separated unread and read notifications, and only display them if they exist. Also, make sure you are passing the notifications to the context in your views. You might be doing something like this in your views:

from notifications.models import Notification

def my_view(request):
    notifications = Notification.objects.filter(recipient=request.user)
    return render(request, 'my_template.html', {'notifications': notifications})

Make sure to adjust this code according to your actual implementation. If you are using the request.user.notifications directly in the template without passing it to the context, you can continue to do so.

Leave a Reply