How to update rows in jQuery with PHP and HTML

Question

Hi All

My PHP script generates a table with rows which can optionaly be edited or deleted. There is also a possibilety to create a new Row.

I am having a hard time to figure out how to update the HTML rows which are generated through PHP and inserted via jQuery. After the update it must be still editable. The HTML is generated into a div.

1) jQuery (insert generated HTML/wait for action)

2) PHP (generate html)

3) Go back to step 1)

(EDIT: Corrected an error and changed script to answer)

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() {
    $(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");
  });
  $(".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");
    alert("save name: "+myvariable1+" save id: "+myvariable2);    
  });
  $(".delete").live("click", function() {
    var myvariable3 = $(this).prevAll("td:last").attr("id");
    alert(myvariable3);
  });
  $(".new").live("click", function() {
    var myvariable4 = $(this).prevAll("input[type=text]").val();
    $.post("place/place_list.php", {action: "new", name: ""+myvariable4+""});
  });
});

Answer 1

place all your event-handlers outside the ajax function and use the live() method instead. And you need to include what data to send when using ajax. From visualjquery:

$(function() {
    $.ajax({
        type: "POST",
        url: "some.php",
        data: "name=John&location=Boston",
        success: function(msg){
            alert( "Data Saved: " + msg );
        }
    });

    $(".edit").live("click", function() {
        //event handler code here
    });
    //more event handlers
});

Answer 2

I think you are not getting click events for editing, deleting etc. after new rows from php are appended to the div.

Try using jquery live plugin to bind click events as and when new stuff is created. Please refer to this question dealing with similar problem.

Answer 3

Like peirix and TheVillageIdiot pointed out, the live plugin maybe useful. However, there are some other things you may got wrong in your code:

First, your HTML isn't valid. You have to put quotes around attribut values. You could do this within quotes by escaping inner quotes with a backslash:

echo "<input type=\"text\" class=\"inputfield_visible\" />";

since this looks not that nice, you could leave the PHP part and write pure HTML if you change this:

<?php
    ...
    echo "</tbody>";
    echo "</table>";
    echo "<input type=text class=inputfield_visible />";
    echo "<button class=new>Neu</button>";
?>

To that (IMHO by far more readable):

<?php
    ...
?>

</tbody>
</table>
<input type="text" class="inputfield_visible" />
<button class="new">Neu</button>

Secondly, and that seems to be even more important, it looks to me like you have a SQLInjection vulnerability, because you pass the field values directly to mysql without using mysql_real_escape_string first. I'm not that into PHP, so maybe I got that wrong, but what happens if you enter ';-- into you input fields?