if notification count is zero I want what I have right now(box) but if it's not zero I want box to be changed to badge with notification count
<p>I have a notification system that works. Right now, when there's no notification or not, the notification appears in a <code>&lt;span class='glyphicon glyphicon-inbox' aria-hidden="true"&gt;&lt;/span&gt;</code> just like stackoverflow. but my desire is when there's a notification, I want the box to be turned into a </p>

<pre><code>&lt;span class="badge badge-notify" style="red"&gt;notification count&lt;/span&gt; 
</code></pre>

<p>again just like a stack overflow. </p>

<p>So I tried removing a particular class that changes the form of the box when if count == 0 and adding the class when count is not zero. I tried setting set interval as well but it just won't work. </p>

<p>Can you please help me?</p>

<p>below is what I have in navbar, I have the notification box and the badge set up.</p>

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

              &lt;/ul&gt;
            &lt;/li&gt;
</code></pre>

<p>below is my ajax function to disply notification</p>

<pre><code> &lt;script&gt;
    $(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(' &lt;li role="presentation" class="dropdown-header"&gt;alarm&lt;/li&gt;');
            var count = data.count
            console.log(count)
            if (count == 0) {
                  $("#notification_dropdown").removeClass('notification');
              var url = '{% url "notifications_all" %}'
              $("#notification_dropdown").append("&lt;li&gt;&lt;a href='" + url+ "'&gt;view all&lt;/a&gt;&lt;/li&gt;")
            } else {
                  $("#notification_dropdown").addClass('notification');
              $(data.notifications).each(function(){
                var link = this;
                $("#notification_dropdown").append("&lt;li&gt;" + link + "&lt;/li&gt;")
              })
            }
            console.log(data.notifications);
          },
          error: function(rs, e) {
            console.log(rs);
            console.log(e);
          }
        })
      })
    })
    &lt;/script&gt;
</code></pre>

<p>so what I kinda tried was this,</p>

<pre><code>        &lt;style&gt;
          {% block style %}
    #notification_dropdown{
    }

    #notification_dropdown.notification{
      color: red;
    }


        {% endblock %}
          &lt;/style&gt;

and 

    &lt;script&gt;
setTimeout(function(){
   $("#notification_dropdown:visible").addClass('notification');
}, 2000);
    &lt;/script&gt;
</code></pre>

<p>maybe I set the id wrong...those did nothing unfortunately.</p>

<p>not sure if this is needed, I'll also add function for notification(ajax)</p>

<pre><code>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
</code></pre>

<p>So my question)</p>

<p>1) what did I do wrong that the form/color of notification box didn't change when notification is not zero, and how do I achieve what I want which is box to be turned into a </p>

<pre><code>&lt;span class="badge badge-notify" style="red"&gt;notification count&lt;/span&gt; 
</code></pre>

<p>2) I'm able to display count of notification in console with console.log(count), how do I display this count in the navbar?</p>