Question

我有一个有效的通知系统。现在，当没有通知时，通知就像stackoverflow一样出现在<span class='glyphicon glyphicon-inbox' aria-hidden="true"></span>中。但我的愿望是，当有通知时，我希望盒子变成

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

再次就像堆栈溢出一样。

因此，如果count == 0，我尝试删除一个更改框形式的特定类，并在count不为零时添加类。我也试过设置设置间隔，但它不起作用。

你能帮帮我吗？

下面是我在导航栏中的内容，我有通知框和徽章设置。

   <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>

下面是我的ajax函数来显示通知

 <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>

所以我有点尝试过这个，

        <style>
          {% block style %}
    #notification_dropdown{
    }

    #notification_dropdown.notification{
      color: red;
    }


        {% endblock %}
          </style>

and 

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

也许我设置了错误的ID ......不幸的是，那些没有做任何事情。

不确定是否需要，我还会添加通知功能（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

所以我的问题）

1）当通知不为零时，通知框的形式/颜色没有改变我做错了什么，以及如何实现我想要的那个盒子变成

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

2）我可以在console.log（count）的控制台中显示通知计数，如何在导航栏中显示此计数？

Answer 1

看起来您在AJAX成功中所做的所有更改都在#notification_dropdown，但在您的导航栏HTML中，您想要切换的<span>元素永远不会被触及。它在你的CSS中是一样的：

    <style>
      {% block style %}
#notification_dropdown{
}

#notification_dropdown.notification{
  color: red;
}


    {% endblock %}
      </style>

使用的CSS选择器（#notification_dropdown）不会将CSS属性应用于重要的<span>元素。

解决此问题的方法之一 -

将导航栏HTML更改为：

 <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>

更改：为id和no notify notify count badge元素添加了span属性。

和

将您的Ajax脚本更改为：

 <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>

更改：根据$("#no_notify")

将$("#notify_count")和count相关行添加到show() / hide()这些范围内

并将setTimeout更改为：

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

＆lt; a＆gt;上的

$(".notification-toggle").click(); triggers a click在navbar中，它执行Ajax调用。如果来自Ajax响应的计数为零，我们隐藏notify_count span并显示no_notify否则执行相反的操作。

触发＆lt; a＆gt;上的点击标签似乎是一个好主意。如果您将来希望计数更新仅发生在用户操作上（单击锚标记）并且不希望定期发生调用，那么您只需要摆脱setTimeout逻辑。

最佳做法是为您的AJAX调用添加error回调，以防万一POST调用get_notifications_ajax失败。

Answer 2

实现此目的的一种简单方法是使用setInterval()每隔几秒查询服务器以获取新通知。代码看起来像这样：

<强> 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>

我对您的代码进行了以下更改：

1）我添加了一个带有id的div来包装收件箱，以便简化HTML交换（我还修复了'active'收件箱span的样式属性）

2）我将代码从收件箱点击事件移动到setInterval功能。这样，您在打开收件箱下拉菜单时不必发送AJAX请求，因为您已经这样做了，每5秒钟就会发送一次！

3）我将通知计数添加到收件箱元素

如果通知计数为零我想要我现在拥有的（盒子）但是如果它不是零我想要将盒子改成带有通知计数的徽章

2 个答案: