nếu số lượng thông báo bằng không, tôi muốn những gì tôi có ngay bây giờ (hộp) nhưng nếu không phải là 0 Tôi muốn hộp được thay đổi thành huy hiệu với số thông báo

Question

Tôi có một hệ thống thông báo hoạt động. Ngay bây giờ, khi không có thông báo hay không, thông báo sẽ xuất hiện trong một số <span class='glyphicon glyphicon-inbox' aria-hidden="true"></span> giống như stackoverflow. nhưng mong muốn của tôi là khi có thông báo, tôi muốn hộp được chuyển thành một số

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

lại giống như tràn ngăn xếp.

Vì vậy, tôi đã thử xóa một lớp cụ thể thay đổi biểu mẫu của hộp khi đếm == 0 và thêm lớp khi số không phải là 0. Tôi đã thử đặt khoảng thời gian là tốt nhưng nó sẽ không hoạt động.

Bạn có thể giúp tôi không?

dưới đây là những gì tôi có trong thanh điều hướng, tôi có hộp thông báo và thiết lập huy hiệu.

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

dưới đây là chức năng ajax của tôi để thông báo Disply

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

vì vậy những gì tôi kinda cố gắng là điều này,

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

    #notification_dropdown.notification{ 
     color: red; 
    } 


     {% endblock %} 
      </style> 

and 

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

có lẽ tôi thiết lập id sai ... những người đã không làm gì không may .

không chắc chắn nếu điều này là cần thiết, tôi cũng sẽ thêm chức năng thông báo (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 

Vì vậy, câu hỏi của tôi)

1) những gì tôi đã làm gì sai rằng hình thức/màu hộp thông báo không thay đổi khi thông báo không phải là 0 và cách tôi đạt được nội dung tôi muốn là hộp được chuyển thành một số

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

2) Tôi có thể hiển thị số thông báo trong bảng điều khiển wit h console.log (đếm), làm cách nào để hiển thị số này trong thanh điều hướng?

Answer 1

Dường như tất cả các thay đổi bạn đang thực hiện trong thành công AJAX là trên #notification_dropdown nhưng trong thanh điều hướng HTML, các yếu tố <span> bạn muốn chuyển đổi sẽ không bao giờ được chạm vào. Đó là như nhau trong CSS của bạn:

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

#notification_dropdown.notification{ 
    color: red; 
} 


    {% endblock %} 
     </style> 

Các bộ chọn CSS sử dụng (#notification_dropdown) không áp dụng các thuộc tính CSS để các yếu tố <span> mà vấn đề.

Một trong những cách để sửa lỗi này -

Thay đổi HTML navbar của bạn để:

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

thay đổi: thêm id thuộc tính cho cả no notify và notify count badgespan yếu tố.

Và

Thay đổi kịch bản Ajax của bạn để:

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

thay đổi: thêm $("#no_notify") và $("#notify_count") dòng liên quan đến show()/hide() những nhịp dựa trên count

Và thay đổi setTimeout của bạn để:

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

$(".notification-toggle").click();triggers a click trên <a> trong thanh điều hướng, thực hiện cuộc gọi Ajax. Nếu số đếm từ phản hồi Ajax bằng không, chúng tôi ẩn khoảng cách notify_count và hiển thị no_notify ngược lại.

Kích hoạt nhấp chuột vào thẻ <a> có vẻ như là một ý tưởng hay. Nếu trong tương lai bạn muốn cập nhật đếm chỉ xảy ra trên hành động của người dùng (nhấp chuột vào thẻ neo) và không muốn cuộc gọi diễn ra định kỳ tất cả những gì bạn phải làm là loại bỏ logic setTimeout.

Cách tốt nhất là thêm một cuộc gọi lại error cho cuộc gọi AJAX của bạn, chỉ trong trường hợp nếu lệnh POST gửi tới get_notifications_ajax không thành công.

Answer 2

Một cách đơn giản để thực hiện việc này là sử dụng setInterval() để truy vấn máy chủ vài giây một lần đối với các thông báo mới. Mã này sẽ giống như thế này:

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> 

tôi đã thực hiện những thay đổi sau để mã của bạn:

1) Tôi đã thêm một div với id để gói hộp thư đến, để làm cho việc hoán đổi HTML trở nên đơn giản hơn (như tôi cũng đã cố định thuộc tính kiểu cho hộp thư đến 'hoạt động' span)

2) Tôi di chuyển mã từ sự kiện nhấp vào hộp thư đến đến một hàm setInterval. Bằng cách đó, bạn không phải gửi yêu cầu AJAX khi mở hộp thư đến thả xuống, vì bạn đã làm như vậy, cứ 5 giây một lần!

3) tôi đã thêm các tính thông báo đến các yếu tố inbox