If the number of notifications is equal to zero, I want what I have right now (in the field), but if it is not equal to zero, I want the box to be changed to a notification counting icon

Question

I have a notification system that works. Right now, when there is no notification or not, a notification appears in <span class='glyphicon glyphicon-inbox' aria-hidden="true"></span> just like stackoverflow. but my desire is when there is a notice, I want the box to be turned into

 <span class="badge badge-notify" style="red">notification count</span> 

again, like a stack overflow.

So, I tried to remove a specific class that changes the shape of the field if count == 0 and adding a class when the counter is not zero. I also tried to set the install interval, but it just won't work.

Can you help me?

below is what i have in navbar, i have notification window and icon.

  <li class="dropdown"> <a href="#" class="dropdown-toggle notification-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="button"> <span class='glyphicon glyphicon-inbox' aria-hidden="true"></span> <span class="caret"></span> <span class="badge badge-notify">notification count</span></a> <ul class="dropdown-menu" role="menu" id='notification_dropdown'> </ul> </li> 

below is my ajax function to indicate notification

  <script> $(document).ready(function(){ $(".notification-toggle").click(function(e){ e.preventDefault(); $.ajax({ type: "POST", url: "{% url 'get_notifications_ajax' %}", data: { csrfmiddlewaretoken: "{{ csrf_token }}", }, success: function(data){ $("#notification_dropdown").html(' <li role="presentation" class="dropdown-header">alarm</li>'); var count = data.count console.log(count) if (count == 0) { $("#notification_dropdown").removeClass('notification'); var url = '{% url "notifications_all" %}' $("#notification_dropdown").append("<li><a href='" + url+ "'>view all</a></li>") } else { $("#notification_dropdown").addClass('notification'); $(data.notifications).each(function(){ var link = this; $("#notification_dropdown").append("<li>" + link + "</li>") }) } console.log(data.notifications); }, error: function(rs, e) { console.log(rs); console.log(e); } }) }) }) </script> 

so I tried this

  <style> {% block style %} #notification_dropdown{ } #notification_dropdown.notification{ color: red; } {% endblock %} </style> and <script> setTimeout(function(){ $("#notification_dropdown:visible").addClass('notification'); }, 2000); </script> 

Perhaps I set id incorrectly ... they didn’t do anything unfortunately.

Not sure if this is necessary, I will also add a notification function (ajax)

 def get_notifications_ajax(request): if request.is_ajax() and request.method == "POST": notifications = Notification.objects.all_for_user(MyProfile.objects.get(user=request.user)).recent() count = notifications.count() notes = [] for note in notifications: notes.append(note.get_link.encode('utf-8')) data = { "notifications": notes, "count": count, } print data json_data = json.dumps(data) print json_data return HttpResponse(json_data, content_type='application/json') else: raise Http404 

So my question is)

1) what I did wrong, that the shape / color of the notification window did not change when the notification is not zero, and how do I achieve what I want the window to be turned into

 <span class="badge badge-notify" style="red">notification count</span> 

2) I can show the number of notifications in the console using console.log (count), how can I display this account in the navigation bar?

Answer 1

It looks like all the changes you make in AJAX success are on #notification_dropdown , but in your HTML navigator the <span> elements you want to switch are never affected. This is the same in CSS:

  <style> {% block style %} #notification_dropdown{ } #notification_dropdown.notification{ color: red; } {% endblock %} </style> 

The CSS selectors used ( #notification_dropdown ) do not apply CSS properties to <span> elements that matter.

One way to fix this is

Change your HTML to:

  <li class="dropdown"> <a href="#" class="dropdown-toggle notification-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="button"> <span id="no_notify" class='glyphicon glyphicon-inbox' aria-hidden="true"></span> <span class="caret"></span> <span id="notify_count" class="badge badge-notify">notification count</span></a> <ul class="dropdown-menu" role="menu" id='notification_dropdown'> </ul> </li> 

Edit: added id attribute for no notify and notify count badge span elements.

and

Change your Ajax script to:

  <script> $(document).ready(function(){ $(".notification-toggle").click(function(e){ e.preventDefault(); $.ajax({ type: "POST", url: "{% url 'get_notifications_ajax' %}", data: { csrfmiddlewaretoken: "{{ csrf_token }}", }, success: function(data){ $("#notification_dropdown").html(' <li role="presentation" class="dropdown-header">alarm</li>'); var count = data.count console.log(count) if (count == 0) { $("#notify_count").html(count).hide(); $("#no_notify").show(); $("#notification_dropdown").removeClass('notification'); var url = '{% url "notifications_all" %}' $("#notification_dropdown").append("<li><a href='" + url+ "'>view all</a></li>") } else { $("#no_notify").hide(); $("#notify_count").html(count).show(); $("#notification_dropdown").addClass('notification'); $(data.notifications).each(function(){ var link = this; $("#notification_dropdown").append("<li>" + link + "</li>") }) } console.log(data.notifications); }, error: function(rs, e) { console.log(rs); console.log(e); } }) }) }) </script> 

Edit: added $("#no_notify") and $("#notify_count") related lines in show() / hide() based on count

And change your setTimeout to:

  <script> setTimeout(function(){ $(".notification-toggle").click(); }, 2000); </script> 

$(".notification-toggle").click(); launches a click on <a> in navbar, which calls an Ajax call. If the counter from the Ajax response is zero, we will notify_count span and show no_notify otherwise we will do the opposite.

Running a click on the <a> tag seems like a good idea. If in the future you want the counter to be updated only when the user acts (click on the bind shortcut) and you do not want the call to be performed periodically, all you need to do is get rid of the setTimeout logic.

It is best to add an error callback for your AJAX call, only if the POST call to get_notifications_ajax .

Answer 2

One easy way to achieve this is to use setInterval() to query the server every few seconds for new notifications. The code will look something like this:

HTML

 <li class="dropdown"> <a href="#" class="dropdown-toggle notification-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="button"> <div id='inbox-wrapper'><span class='glyphicon glyphicon-inbox' aria-hidden="true"></span><div> <span class="caret"></span> <span class="badge badge-notify">notification count</span></a> <ul class="dropdown-menu" role="menu" id='notification_dropdown'></ul> </li> 

Js

 <script> setInterval(function(){ $.ajax({ type: "POST", url: "{% url 'get_notifications_ajax' %}", data: { csrfmiddlewaretoken: "{{ csrf_token }}", }, success: function(data){ $("#notification_dropdown").html(' <li role="presentation" class="dropdown-header">alarm</li>'); var count = data.count console.log(count) if (count == 0) { $("#notification_dropdown").removeClass('notification'); var url = '{% url "notifications_all" %}' $("#notification_dropdown").append("<li><a href='" + url+ "'>view all</a></li>") // here we change the inbox appearance $("#inbox-wrapper").html("<span class='glyphicon glyphicon-inbox' aria-hidden='true'></span>"); } else { $("#notification_dropdown").addClass('notification'); $(data.notifications).each(function(){ var link = this; $("#notification_dropdown").append("<li>" + link + "</li>") // change the inbox appearance $("#inbox-wrapper").html("<span class='badge badge-notify' style='background-color:red'>" + count + "</span>"); }) } console.log(data.notifications); }, error: function(rs, e) { console.log(rs); console.log(e); } }); }, 5000); </script> 

I made the following changes to your code:

1) I added a div with an identifier to wrap the inbox to simplify the HTML exchange (I also fixed a style attribute for the "active" span inbox)

2) I move the code from the Inbox event to the setInterval function. This way, you don’t have to send an AJAX request when you open the Inbox drop-down list because you already did this every 5 seconds!

3) I added a notification counter to the inbox