Table doesn't respond to second jQuery request

Question

Hi All

My PHP script generates a table with rows which can optionally be edited or deleted. There is also a possibility to create a new Row. The PHP is activated through jQuery Events.

Now all works well, I can edit delete and create an Item. After each action which makes use of the PHP script the HTML table gets updated.

But when I try after an Event to do an action again the HTML Table doesn't get updated though in the background the PHP script makes an entry into the database.

Does someone of you know why my HTML Table doesn't update itself when I trigger a second event?

Here the Script

PHP

<?php
  require_once "../../includes/constants.php";
  // Connect to the database as necessary
  $dbh = mysql_connect(DB_SERVER,DB_USER,DB_PASSWORD)
    or die ("Unaable to connnect to MySQL");

  $selected = mysql_select_db(DB_NAME,$dbh)
    or die("Could not select printerweb");

   $action = $_POST['action'];
   $name = $_POST['name'];
   $id = $_POST['id'];

    if($action == "new")
      {
        mysql_query("INSERT INTO `place` (`id`, `name`) VALUES (NULL, '$name')");
      }
    elseif($action == "edit")
      {
        mysql_query("UPDATE `place` SET `name` = '$name' WHERE `id` = '$id'");        
      }
    elseif($action == "delete")
      {
        mysql_query("DELETE FROM place WHERE id = '$id'");
      }

    echo "<table><tbody>";
    $result = mysql_query("SELECT * FROM place");
    while ($row = mysql_fetch_array($result)) {
      echo "<tr><td id=".$row["id"]." class=inputfield_td><input class=inputfield_place type=text value=".$row["name"]." /></td><td class=place_name>".$row["name"]."</td><td class=edit>edit</td><td class=cancel>cancel</td><td class=delete>delete</td><td class=save>SAVE</td></tr> \n";
    }
    echo "</tbody>";
    echo "</table>";
    echo "<input type=text class=inputfield_visible />";
    echo "<button class=new>Neu</button>";
?>

JS

$(function() {
  $.ajax({
  url: "place/place_list.php",
  cache: false,
  success: function (html){
    $("#place_container").append(html);
      }
  });
  $(".edit").live("click", function() {
    $(this).css("display","none").prevAll(".place_name").css("display","none").prevAll(".inputfield_td").css("display","block").nextAll(".cancel").css("display","block").nextAll(".save").css("display","block").prevAll(".inputfield_td").css("display","block");
  });
  $(".cancel").live("click", function() {
    myvariable5 = $(this).prevAll(".place_name").html();
    $(this).css("display","none").prevAll(".edit").css("display","block").prevAll(".place_name").css("display","block").prevAll(".inputfield_td").css("display","none").nextAll(".save").css("display","none").siblings().find("input[type=text]").val(myvariable5);
  });
  $(".save").live("click", function() {
    var myvariable1 = $(this).siblings().find("input[type=text]").val();
    var myvariable2 = $(this).prevAll("td:last").attr("id");
    $(this).css("display","none").prevAll(".cancel").css("display","none").prevAll(".edit").css("display","block").prevAll(".place_name").css("display","block").prevAll(".inputfield_td").css("display","none");
    $.post("place/place_list.php", {action: "edit", name: ""+myvariable1+"", id: ""+myvariable2+""}, function (html){$("#place_container").replaceWith(html);});
  });
  $(".delete").live("click", function() {
    var myvariable3 = $(this).prevAll("td:last").attr("id");
    $.post("place/place_list.php", {action: "delete", id: ""+myvariable3+""}, function (html){$("#place_container").replaceWith(html);});
  });
  $(".new").live("click", function() {
    var myvariable4 = $(this).prevAll("input[type=text]").val();
    $.post("place/place_list.php", {action: "new", name: ""+myvariable4+""}, function (html){$("#place_container").replaceWith(html);});
  });
});

Answer 1

Shouldnt you replace the complete table ?

$("#place_container").html(html);

Answer 2

I think I know. You do replaceWith instead of append, so your DIV with ID #place_container disappears after the first operation (you are left with only a table in your page), and of course jQuery does not find it and is unable to refresh it with new content from the second operation.

Just use append or, better yet, html methods.