Ajax update element with unread_count and max number of notifications to display

[quevon24]

Hi, I recently discover this awesome module but I have a few questions:

I saw that the json response with notifications contains: "unread_count": 1 so I was wondering if it's possible to update a count in a notification icon on top bar (like facebook globe and it's count) with that response, or it's necessary to modify the ajax function updateSuccess() ?

Also I was wondering if it's possible to set a limit of notifications to display in the box, like the latest 5 notifications, or also it's necessary to modify the notification_update() function in views.py to add a range in the line:

new_notifications = request.user.notifications.filter(id__gt=last_notification).active().prefetch()

or do that on jQuery scripts?

[quevon24]

For the count I override updateSuccess() with this code if anyone wants to include the count, insert this code after loading notifyX.js

<script type="text/javascript">
        // Override updateSuccess
        var modUpdateSuccess = window.updateSuccess;
        window.updateSuccess = function (response) {
            // Get unread_count from response
            var unread_count = response.unread_count;
            if (unread_count > 0) {
                // Element where display count
                // Mine is like this:
                // <span class="label label-primary label-indicator animation-floating notification-counter"></span>
                $('.notification-counter').show();
                $('.notification-counter').text(unread_count);
            } else if (unread_count == 0) {
                $('.notification-counter').hide();
            }
            modUpdateSuccess(response);
        }
    </script>

Also I noticed that if you are using ajax to get notifications and there are no notifications you see the message: No notifications yet.

But if you send a new notification, the new notification displays on that list but doesn't remove the message: 'No notifications yet.' could be great if everytime you click on the notifications dropdown menu, it request all the notifications so it can also update it status(read/unread) without reloading the page.

[v1k45]

Hey, glad that you found this lib useful!

The view uses a last notification identifier make sure it only returns notification which are new to users. This is where the updateSuccess callback comes handy, It allows you to set custom behavior for your application.

You can have notification count bubble in your navbar and update the text in it everytime the count changes.

Here is a relevant code from an old project where I used the custom updateSuccess func:

var updateSuccess = function (response) {
    var notification_box = $(nfBoxListClassSelector);
    var notifications = response.notifications;
    $nf_count = $('.nf-count');
    $.each(notifications, function (i, notification) {
        $('.notification-container > b').fadeOut();
        notification_box.prepend(notification.html);
        Materialize.toast(notification.html, 10000, 'nf-toast');
    });
    var ccount = $('.notification-dropdown-content > .notification-container > li.unread').length;
    if(ccount) {
        if ($nf_count.length) {
            $nf_count.html(ccount);
            $nf_count.fadeIn();
        }
        else {
            $('.nf-ddown-a').append("<span class=\"nf-count\" style=\"display: none\">" + ccount + "</span>");
            $('.nf-count').fadeIn();
        }
        if(ccount > 9) {
            $nf_count.addClass('nf-count-ddigit');
        }
    }
};

The notification count label/icon thing as a feature differs from project to project, thats why I decided not to put that in the main library and let the users decide instead.

[v1k45]

The feature to limit no of new notifications returned by the ajax view seems to be a useful feature.

To be clear, are you talking about the no. of notifications returned by the API or shown in the notification box?

[v1k45]

could be great if everytime you click on the notifications dropdown menu, it request all the notifications so it can also update it status(read/unread) without reloading the page.

You can use the "mark_all" view here to mark all notifications as read as soon as the user clicks the notification icon/dropdown.

[quevon24]

The feature to limit no of new notifications returned by the ajax view seems to be a useful feature.

To be clear, are you talking about the no. of notifications returned by the API or shown in the notification box?

With the number of notifications I mean the maximum number of notifications shown in the box, because I think the notification box will get very large if you have a lot of undeleted notifications. I mean something like: Display max 10 notifications in box, if there's a new one, remove the last notification and append the new to the top.

[v1k45]

I think this a use case related issue. Some might want the notification box to become a scrollable container.

IMO, this is something which should be left to the users to implement based on their own usecases and requirements.

[quevon24]

Thanks for you answers and the great work with this module. I also noticed that if there is no notification and your receipt one while you open the dropdown box(in: notifications/all ) adds the new notification but doesn't remove the message: No notifications yet.

[DanailYordanov]

I also noticed that if there is no notification and your receipt one while you open the dropdown box(in: notifications/all ) adds the new notification but doesn't remove the message: No notifications yet.

Yes, this should be fixed