1

Hello I am creating a notification.The notification_call is function that used to show the unreaded notifications on the bell icon

But my issues is once I click the notification the count needs to be override and make it as a 0.

Here is my Java script code for notification_call

var notification_call = function () {
    var url = $('.notification-content-div').data('href');
    blockUI = false
    Pace.ignore(function () {
        $.ajax({
            url: url,
            type: "GET",
            beforeSend: function (request) {
                var auth = localStorage.getItem("auth")
                if (auth) {
                    request.setRequestHeader("Authorization", "Token " + JSON.parse(auth));
                }
            },
            success: function (data) {
                $('.notification-count').attr('data-count', data.count);
                var raw = document.getElementById('notification-content-handlebar-div').innerHTML;
                var template = Handlebars.compile(raw);
                document.getElementById('notification-content-div').innerHTML = template({
                    data: data
                });
            }
        });
    });
}

I am calling the notification_Call in setinterval for updating it 

notification_call();
var notification_interval = 10000;
setInterval(notification_call, notification_interval);

I need to change the count once the user click on the icon using this function . But how can I set the data.count 0 here 

$(document).on('click', '.notification-icon', function () {

});
Anoop
  • 505
  • 8
  • 23
  • setting ajax response to a global variable, then use that on your `on-click` and reset the count. this way may be – user404 Jan 15 '20 at 06:57

1 Answers1

0

Set a global variable to mark when you click the reset icon:

let timestamp = 0
$(document).on('click', '.notification-icon', function () {
  timestamp = Date.now()
  // then set count to zero
})

Then ignore any request that is sended before timestamp:

var notification_call = function () {
    // ...
    // when the request if fired
    let timestamp_on_fire_request = Date.now()
    $.ajax({
      success: function (data) {
        // if it's fired before click, ignore it
        if (timestamp_on_fire_request < timesamp) return
        // ...
      }
    })
    // ...
}
Zmen Hu
  • 795
  • 3
  • 12
  • The issue I am facing is ..... timestamp variable is a gloabl function it will changed to zero in each page refresh So the notification count will not be same in each page – Anoop Jan 15 '20 at 09:07
  • You may keep it in localStorage if you want to sync among pages. – Zmen Hu Jan 15 '20 at 09:13