Cómo actualizar filas en jQuery con PHP y HTML

Question

Mi script PHP genera una tabla con filas, que Opcionalmente pueden ser editados o eliminados. También hay un possibilety para crear una nueva fila.

Estoy teniendo un tiempo difícil averiguar cómo actualizar las filas HTML que se generan a través de PHP y se insertan a través de jQuery. Después de la actualización debe ser todavía editable. El código HTML se genera en un div.

1. jQuery (insertar HTML generado / esperar a la acción)

2. PHP (generar html)

3. Ir de nuevo al paso 1)

(EDIT: Se ha corregido un error y secuencia de comandos para responder cambiado)

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

lugar todos sus manipuladores de eventos fuera de la función ajax y utilizan el método live() lugar. Y es necesario incluir datos que desea enviar al usar ajax. De 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

Creo que no está recibiendo eventos de clic para editar, borrar, etc. después de nuevas filas de php se anexan a la div.

Trate de usar jQuery plug-in vivo para enlazar eventos de clic como y cuando se crea cosas nuevas. Por favor, consulte esta pregunta se trata de un problema similar.

Answer 3

Al igual que peirix y TheVillageIdiot señaló, el plug-in vivo que puede resultar útil. Sin embargo, hay algunas otras cosas es posible que se equivocó en el código:

En primer lugar, el código HTML no es válido. Usted tiene que poner comillas alrededor de los valores attribut. Usted puede hacer esto entre comillas escapando cotizaciones internas con una barra invertida:

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

ya que esto no se ve tan bonita, que podría dejar la parte PHP y escribir HTML puro si cambia esto:

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

Para que (en mi humilde opinión, con mucho, más legible):

<?php
    ...
?>

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

En segundo lugar, y que parece ser aún más importante, me parece que tiene una vulnerabilidad de Inyección SQL, ya que se pasa los valores de campo directamente a MySQL sin usar mysql_real_escape_string primero. No estoy de que en PHP, así que tal vez tengo que mal, pero lo que sucede si se introduce en ';-- le campos de entrada?