Zwei Probleme bezüglich AJAX/PHP

[Padarom]

Hallo,

ich habe eine Seite, die zu Anfang mittels einer PHP-Datenbankabfrage gefüllt wird (es werden aus einer MySQL-Datenbank alle Zeilen gelesen und diese werden in einer Tabelle im HTML-Code geschrieben). Alle 10 Sekunden wird dann über ein Javascriptinterval die jQuery-get Methode (Also AJAX) aufgerufen, was ein Script ausführt, welches den Inhalt der Datenbank erneut ausliest und ausgibt. Die Rückgabe dieser Funktion wird dann als neuer HTML-Wert für die Tabelle verwendet.

In dieser Tabelle sind einige Buttons. Werden diese geklickt, werden sie ein-/ausgeschaltet und eine weitere PHP-Datei aufgerufen, welche über shell-Commands 433MHz Funksteckdosen steuert.
Sinn der Aktualisierung der Seite ist die Aktualität der Buttonwerte. Diese sollen stets den gleichen Status haben, wie die Funksteckdose (ob diese ein- oder ausgeschaltet ist, wird ebenfalls in der Datenbank vermerkt).
Nun habe ich folgendes Problem:
Sobald die Seite das erste Mal über AJAX aktualisiert wird, funktionieren die Buttons nicht mehr. Javascript führt die click()-Funktion nicht mehr aus. Warum ist das so?

$(document).ready(function(){
  $(".toggle").click(function() {
    if($(this).hasClass("ein")) {
      $(this).removeClass("ein");
      $(this).html("aus");
      $.post("various/executeCode.php", {transmitted:true, id:$(this).attr('id'), toggle:'0'}, function(result) {
      });
    } else {
      $(this).addClass("ein");
      $(this).html("ein");
      $.post("various/executeCode.php", {transmitted:true, id:$(this).attr('id'), toggle:'1'}, function(result) {
      });
     }
  });
});


window.setInterval("reloadPage()", 5000);
function reloadPage()
  {
    $.get('various/reloadPage.php', function(data) {
      $("#content").html(data);
  });
}

$stmt = $dbh->query("SELECT * FROM `funksteckdosen`");
$row = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach($row as $r)
{  
  echo "<tr>";  
  echo "  <td>" . $r['name'] . "</td>";  
  echo "    <td><button id='" . $r['id'] . "' class='toggle" . ($r['toggle'] == 0 ? "" : " ein") . "'>"     
    . ($r['toggle'] == 0 ? "aus" : " ein") . "</button></td>";  
  echo "</tr>";
}

Problem 2:
Der Inhalt der Table wird aktuell gelöscht und durch die neue ersetzt. Ist es mir über jQuery (UI?) o.Ä. möglich, dass neu erscheinende Werte eingeblendet werden, also dass ein fade hinzukommt, anstatt dass die neue Zeile (bzw. der geänderte Buttonwert/die Farbe) einfach hinzugefügt wird? Das würde dem ganzen einen kleinen Abschliff geben.

Ich hoffe, ihr habt verstanden was ich meine.

Danke im Voraus
Padarom

 

[Anusha]

Bei deinem 1. Problem findest du alles was du brauchst auf dieser Seite:
.on() | jQuery API Documentation

Zu Problem 2. Ich hab jetzt nicht genau verstanden was du willst.
Aber du brauchst dafuer wohl kein jqueryui.

$("selector").fadeOut('slow', function() {
$("another Selecter").fadeIn('slow');
});

Aber ich bin mir nicht sicher ob du das willst. Hier wird halt eine element rausgefadet und sobald das fading fertig ist wird die callback Funktion ausgefuehrt, welche hier irgendwas anderes einblendet. Vllt kannst du das irgendwie fuer deinen Zweck verwenden.