Ich habe ein Benachrichtigungssystem, das funktioniert. Gerade jetzt, wenn keine Benachrichtigung erfolgt oder nicht, wird die Benachrichtigung in einem <span class='glyphicon glyphicon-inbox' aria-hidden="true"></span> wie Stackoverflow angezeigt. aber mein Wunsch ist es, wenn es eine Benachrichtigung ist, möchte ich die Box in einWenn die Anzahl der Benachrichtigungen Null ist, möchte ich, was ich gerade habe (Box), aber wenn es nicht Null ist, möchte ich Box in Badge mit Benachrichtigung Count
<span class="badge badge-notify" style="red">notification count</span>
wieder wie ein Stack-Überlauf gedreht werden.
Also habe ich versucht, eine bestimmte Klasse zu entfernen, die die Form der Box ändert, wenn ich zähle == 0 und die Klasse hinzufüge, wenn die Anzahl nicht Null ist. Ich habe versucht, das eingestellte Intervall auch einzustellen, aber es wird einfach nicht funktionieren.
Können Sie mir bitte helfen?
unten ist, was ich in navbar habe, habe ich die Benachrichtigungsbox und das Abzeichen eingerichtet.
<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>
unter meiner Ajax-Funktion ist Benachrichtigung
<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 disply, was ich war irgendwie versucht,
<style>
{% block style %}
#notification_dropdown{
}
#notification_dropdown.notification{
color: red;
}
{% endblock %}
</style>
and
<script>
setTimeout(function(){
$("#notification_dropdown:visible").addClass('notification');
}, 2000);
</script>
vielleicht stelle ich die ID falsch ... das tat nichts, leider .
nicht sicher, ob dies erforderlich ist, werde ich auch Funktion für die Benachrichtigung (Ajax) hinzufügen
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
Also meine Frage)
1), was habe ich falsch gemacht, dass die Form/Farbe Benachrichtigungsfeld nicht ändern, wenn Benachrichtigung nicht Null ist, und wie erreiche ich, was ich will die Box in ein
gedreht werden soll<span class="badge badge-notify" style="red">notification count</span>
2) ich bin in der Lage Anzahl der Benachrichtigung in Konsole wit anzuzeigen h console.log (Anzahl), wie zeige ich diese Anzahl in der Navigationsleiste an?
Sie müssen 'setInterval()' in der JavaScript verwenden, um den Server für Meldungen alle paar Sekunden abzufragen, sonst wie wird Ihr Frontend Know jede Änderung? – ygesher
@jegesh Ich habe es eingestellt, aber kein Unterschied –
Habe ich richtig verstanden, dass Sie die Benachrichtigung Count auf '' klicken möchten? Oder möchten Sie, dass es sich ändert, obwohl der Benutzer nichts unternimmt, aber eine Benachrichtigung für ihn erscheint? Im Moment prüft Ihr Code nur, ob eine Benachrichtigung vorliegt, wenn der Benutzer auf den Anker klickt. Wenn Sie fortwährend überprüfen möchten, ob es Benachrichtigungen für den Benutzer gibt, sollten Sie in Erwägung ziehen, 'setInterval()' zu verwenden, die alle X Sekunden eine AJAX-Anfrage stellen. – iulian