Live Notification mit Jquery

dennis-sauer

Erfahrenes Mitglied
Hallo zusammen,

ich steh ein wenig auf dem Schlauch und versuche mehrere Funktionen mit einander zu verbinden.

Zum einen nutze ich für die Live Aktualisierung eines "span" folgendes:

Javascript:
$("#refresh_wiki_navigation").load("live_notifications/wiki_navigation.php");
       var refreshId = setInterval(function() {
          $("#refresh_wiki_navigation").load('live_notifications/wiki_navigation.php');
       }, 1000);

Soweit ist das kein Problem, mein span tag mit der id = refresh_wiki_navigation wird in meinem Test auch jede Sekunde aktualisiert.

Nun würde ich gern, wenn der Wert erhöht wird das ganze noch animieren:

Code:
  if($('.notifications-count').length) {
            setTimeout(function() {
                $('.notifications-count').addClass('animated bounceIn');
            }, 1000);
        }

Die Abfrage in der Datenbank ist recht simpel:

PHP:
    // Alle Wiki Themen zählen
       
    $faq_navigation = $db->executeQuery("SELECT * FROM faq_threads");   
    $anzahl_faq_navigation = $faq_navigation->getRowCount();
   
    echo "$anzahl_faq_navigation";

Kann ich das gesamte zum einen vereinfachen und zum anderen kombinieren? Hat jemand eine Idee? Letztendlich ist es nichts anderes als die bekannte Facebookzahl über der Weltkugel.

Grüße

Dennis
 
Speichere doch die alte Anzahl und überprüfe, ob die neue größer oder kleiner ist.

Deinen PHP-Code kann man noch optimieren:
PHP:
// Alle Wiki Themen zählen
// Du brauchst keine Felder, wieso willst du also sie laden?
$faq_navigation = $db->executeQuery("SELECT COUNT(*) FROM faq_threads");   

// Gleich ausgeben, wozu zwischenspeichern?
echo $faq_navigation->getRowCount();

// Nun zwar überflüssig, aber wozu die Anführungszeichen?
// echo "$anzahl_faq_navigation";
 
Hey,

danke für deine Antwort. Du hast vollkommen recht, ich hab den Code optimiert. Keine Gedanken darüber gemacht. Danke dafür!

Ich habe mir überlegt, beim Login den Wert in einer SESSION Variable zu speichern und diese Variable dann (in der Testversion) jede Minute zu erneuern.

Das erneuern sollte ja im Hintergrund per Ajax laufen, da stolpere ich aber ein bisschen.
 
Zu meinem Code noch ganz kurz: Nun kannst du natürlich nicht mehr getRowCount() o. Ä. benutzen. Die Anzahl steht im ersten Datensatz in der ersten Spalte (=COUNT(*)).

In einer SESSION-Variable würde ich das nicht speichern. Der Nachteil ist, dass diese auf einen ganzen Nutzer bezogen ist. Was ist, wenn der Nutzer zwei Tabs offen haben möchte? Dann gibt es unschöne Nebeneffekte (sprich falsches Anzeigen der Werte).


Javascript:
var oldValue = null;
var refreshId = setInterval(function() {
  var newValue = doAjax();
  if (oldValue != null) {
    if (oldValue > newValue) {
      ...
    }
    ...
  }
}, 1000);

Das einzige Problem bei deinem Code ist, dass du die Daten gleich in ein HTML-Element lädst ( $("#refresh_wiki_navigation").load('live_notifications/wiki_navigation.php');). Um hier wirklich die Daten abgreifen zu können, müsstest du statt load() $.get() oder $.ajax() benutzen. Ich würde dir zu $.get() raten.
 
Gibt es denn eine andere Lösung als die Daten in ein HTML Element zu laden?

Ich habe ja neben der Navigation ein badge in diesem steht die aktuelle Zahl der Beiträge.

In dein o.g. Code Beispiel muss ich mich erstmal noch einmal in Ruhe reinlesen/denken...
 
Naja schlussendlich willst es immer in einem HTML-Element anzeigen.
Die Frage ist nur, ob etwas dazwischen geschehen soll. In deinem Fall möchtest du den Wert gegen einen vorherigen Wert prüfen und dann als neuen alten Wert speichern.

doAjax() ist übrigens eine vordefinierte Funktion. Sie soll nur verdeutlichen, dass du load() nicht in deinem Fall gebrauchen kannst.
 
Ich habe jetzt nochmal gebastelt und komme irgendwie nicht weiter. Ich habe den von dir vorgeschlagenen Code mal versucht mit meinen Mitteln umzusetzen.

Ich stehe noch vor ein paar Problemen bzw. bin mir teilweise nicht sicher:

- mit meiner Funktion (unten) wird dann oldValue direkt mit diesem Teil (oldValue = data;) auf den neuen Wert gesetzt?
- Die Anzeige jetzt ist weniger gut, da fehlt ja auch noch was. Es muss ja noch was passieren, wenn der Wert verringert wird
- Aktuell passiert folgendes, wenn sich in der DB etwas tut (egal ob minus oder plus): Im span Tag steht dann z.b. 54565

Javascript:
oldValue = null;           
function repeatMe(){
    $.ajax({
    type:'POST',
    url:'test.php',
    data:'json',
    cache:false,
    success:function(data){
        var newData = data;
        if (oldValue < newData)
        {
            $('#alertbox').fadeIn('slow').prepend(data);
        }
    oldValue = data;
    }
  });
}
setInterval(repeatMe, 1000);

Ja ich merk schon, das ist nicht so ganz mein Thema... :-(
 
Du brauchst den originalen Wert von oldValue nur solange, wie du die Vergleiche ausführen musst.

- Die Anzeige jetzt ist weniger gut, da fehlt ja auch noch was. Es muss ja noch was passieren, wenn der Wert verringert wird
In der Tat. Tut mir leid, wenn ich deinen Satz nicht ganz verstehe, aber war dieser nun als Frage gemeint?

- Aktuell passiert folgendes, wenn sich in der DB etwas tut (egal ob minus oder plus): Im span Tag steht dann z.b. 54565
Eigentlich sollte sich der Wert momentan nur dann aktualisieren, wenn oldValue < newData zutrifft.
 
In der Tat. Tut mir leid, wenn ich deinen Satz nicht ganz verstehe, aber war dieser nun als Frage gemeint?.

Ja doch das war schon eine Frage. :) Ich hatte den Code noch erweitert in dem ich folgendes eingefügt habe.

Javascript:
 if (oldValue < newData)
        {
            $('#alertbox').fadeIn('slow').prepend(data);
        }
        if (oldValue > newData)
        {
           $('#alertbox').fadeIn('slow').prepend(data);
        }

Hab es aber erstmal wieder rausgenommen, weil es ja nicht wirklich funktioniert hatte. Normalerweise sollte der span tag ja aus nur der aktuellen Zahl bestehen, in meinem Beispiel stehen dann aber irgendwann 5 Zahlen da. Weil nämlich 5 Aktualisierungen stattgefunden haben. Ich hab noch ein wenig mit fadeOut rumgespielt aber das führt alles nicht zu dem Ergebnis, was ich will.

Also dumm geschrieben soll es ja so aussehen.

1. Lade aktuellen Wert und zeige an
2. Wert wird erhöht, fade 1. aus, fade neuen Wert ein
2. Wert wird verringert, fade Wer aus, fade neuen Wert ein
 
Der Grund dafür, dass du mehrere Ziffern in deinem <span>-Tag erhälst, liegt doch auf der Hand: Du verwendest jQuery#prepend() anstatt den vorherigen Wert zu überschreiben.
 
Zurück