✔ Live Notification mit Jquery

[dennis-sauer]

Peng... Ja macht Sinn.

mit dem jetzigen Code klappts eigentlich fast so, wie es soll.

Nach dem laden der Seit wird das Badge mittels bounceIn mit der aktuellen Anzahl eingeblendet.

oldValue = null;         
function repeatMe(){
    $.ajax({
    type:'POST',
    url:'test.php',
    data:'json',
    cache:true,
    success:function(data){
    if (oldValue != null) {
    $('.notifications-count').html(data).addClass('animated bounceIn');
        if (oldValue < data) {
        $('.notifications-count').addClass('animated wobble');
        }       
    }       
    oldValue = data;
    }
  });
}
setInterval(repeatMe, 1000)

Was ich aber ums verrecken nicht hinbekomme ist, dass, bei einem neuen Wert das Badge "wobbelt". Die Zahl verändert sich einfach, ohne das sonst etwas passiert.

 

[ComFreek]

Bist du sicher, dass du mit jQuery#addClass('animated wobble') einen "wobble"-Effekt bekommst? Ich konnte per Google nichts Relevantes bezüglich jQuery und "wobble" finden.

Meinst du vielleicht den Shake Effect? http://api.jqueryui.com/shake-effect/
Beispiel: http://jsfiddle.net/L0hL0ewk/1/

 

[dennis-sauer]

Der wobble Effekt stammt von animate.css und das nutze ich. Wenn ich statt bounceIn wobble einsetze klappt das beim neuladen der Seite ohne Probleme!

 

[ComFreek]

Dann wird anscheinend der IF-Zweig "oldValue < data" nicht beschritten. Bist du sicher, dass die Werte innerhalb dieser Variablen stimmen? Kannst du vielleicht mal einen Breakpoint in der JS-Konsole deines Browsers setzen und die Variableninhalte auslesen? Oder einfacher: Nutze console.log(), um die Werte auszugeben. (Ich würde allerdings das setInterval() weglassen und repeatMe nur einmal aufrufen, sonst nervt die ständige Datenausgabe.)

 

[dennis-sauer]

Hey,

das ist mein Konsolenergebnis. Tatsächlich ist oldValue nicht existent...

Uncaught ReferenceError: oldCount is not defined
$.ajax.success

Und noch mal über den Code gelesen... Ich habe oben oldValue stehe und unten hatte ich oldCount, da kann das auch nichts werden.

Nichts desto trotz, die Konsole gibt keinen Fehler mehr aus, die Animation funktioniert trotzdem nicht!

 

[ComFreek]

oldCount? Wo haben wir "oldCount" stehen? Wir haben doch nur oldValue im obigen Code.

Zeig mal deinen aktuellen Code.

 

[dennis-sauer]

Hatte noch vorher rumgebastelt und hatte (warum auch immer mit der Bezeichnung rumgespielt)

Aktueller Code:

oldValue = null;         
function repeatMe(){
    $.ajax({
    type:'POST',
    url:'test.php',
    data:'json',
    cache:true,
    success:function(data){
    if (oldValue != null) {
    $('.notifications-count').html(data).addClass('animated bounceIn');
        if (data > oldValue) {
        $('.notifications-count').addClass('animated wobble');
        }       
    }       
    oldValue = data;
    }
  });
}
setInterval(repeatMe, 1000)

Also wie ich oben schon ergänzt hatte, als ich es gemerkt habe. Nichts desto trotz, die Konsole gibt keinen Fehler mehr aus, die Animation funktioniert trotzdem nicht!

 

[ComFreek]

Ok, über welche Animation redest du? Du meinst schon die wobble-Animatino, oder?
Dann musst du überprüfen, ob die IF-Bedingung eintritt.
Entweder per Debugger + Breakpoint oder per:

// ...
console.log(data, oldValue, data > oldValue);
if (data > oldValue) {
  // Rest des Codes

 

[dennis-sauer]

Ja ich meinte die wobble Animation. Ich hab den Fehler aber scheinbar gefunden! Ich denke der Code ist sicher noch zu optimieren, aber es funktioniert!

Ich habe einfach mal zuerst ein removeClass und dann erst addClass wobble eingebaut und siehe da, es klappt!

oldValue = null;       
function repeatMe(){
    $.ajax({
    url:'test.php',
    success:function(data){
    if (oldValue != null) {
    $('.notifications-count').html(data).addClass('animated bounceIn');
        if (data > oldValue) {
        $('.notifications-count').removeClass('animated bounceIn');
        $('.notifications-count').addClass('animated wobble');
        } 
        if (data < oldValue) {
        $('.notifications-count').removeClass('animated bounceIn');
        $('.notifications-count').addClass('animated wobble');
        }
    }     
    oldValue = data;
    }
  });
}
setInterval(repeatMe, 1000)

ABER:

unmittelbar nach dem "wobblen" (weil ja derzeit 1 Sekunde) macht er wieder den bounceIn aus diesem Teil

if (oldValue != null) {
$('.notifications-count').html(data).addClass('animated bounceIn');

Kann ich das irgendwie verhindern?

 

[ComFreek]

Dann lösch doch die Zeile, oder? Oder du wozu brauchst du den BounceIn?