Como atualizar linhas em jQuery com PHP e HTML

Question

Meu PHP script gera uma tabela com linhas que pode optionaly ser editados ou apagados. Há também um possibilety para criar uma nova linha.

Eu estou tendo um momento difícil descobrir como atualizar as linhas de HTML que são gerados através de PHP e inseridos via jQuery. Após a atualização deve ser ainda editável. O HTML é gerado em um div.

1. jQuery (insert gerado HTML / espera para a ação)

2. PHP (gerar html)

3. voltar ao passo 1)

(EDIT: Foi corrigido um erro e mudou script para resposta)

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 os seus manipuladores de eventos fora da função ajax e usar o método live() vez. E você precisa incluir os dados a enviar ao 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

Eu acho que você não está recebendo eventos de clique para editar, apagar etc. após novas linhas de php são anexados ao div.

Tente usar plugin jQuery ao vivo para eventos clique em Ligar como e quando o material novo é criado. Por favor, consulte esta questão lidar com problema semelhante.

Answer 3

Como peirix e TheVillageIdiot apontou, o plugin ao vivo talvez útil. No entanto, existem algumas outras coisas que você pode errou em seu código:

Primeiro, o HTML não é válido. Você tem que colocar aspas em torno attribut valores. Você poderia fazer isso dentro de aspas por escapar aspas internas com uma barra invertida:

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

Desde essa aparência não que Nice, você pode deixar a parte PHP e escrever puro HTML se alterar esta:

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

Para que (IMHO, de longe, mais legível):

<?php
    ...
?>

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

Em segundo lugar, e que parece ser ainda mais importante, parece-me que você tem uma vulnerabilidade Injeção de SQL, porque você passar os valores do campo diretamente para mysql sem o uso de mysql_real_escape_string primeiro. Eu não sou isso em PHP, talvez por isso eu tenho que errado, mas o que acontece se você digitar ';-- em você campos de entrada?