Wie aktualisieren von Zeilen in jQuery mit PHP und HTML

Question

Mein PHP-Skript generiert eine Tabelle mit Zeilen, die können Optional bearbeitet oder gelöscht werden.Es gibt auch eine possibilety zum erstellen einer neuen Zeile.

Ich habe eine harte Zeit, um herauszufinden, wie zu aktualisieren die HTML-Zeilen, die erzeugt werden durch PHP und eingefügt über jQuery.Nach dem update, es muss noch bearbeitet werden.Der HTML-Code wird generiert, in ein div.

1. jQuery ("einfügen" generiert HTML/wait for action)

2. PHP (html)

3. Gehen Sie zurück zu Schritt 1)

(BEARBEITEN:Einen Fehler behoben und verändert Skript zu beantworten)

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

legen Sie alle Ihre event-Handler außerhalb der ajax-Funktion und verwenden Sie das live() Methode statt.Und Sie brauchen, um welche Daten zu senden, die bei der Verwendung von ajax.Von 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

Ich denke, Sie sind nicht immer auf Veranstaltungen zum Bearbeiten, löschen usw.nach der neuen Zeilen, die von php sind angefügt, um das div.

Versuchen Sie es mit jquery live-plugin binden, klicken Sie auf Ereignisse, wie und Wann neue Sachen geschaffen.Bitte beziehen sich auf diese Frage Umgang mit ähnlichen problem.

Answer 3

Wie peirix und TheVillageIdiot darauf hingewiesen, dass der live-plugin vielleicht nützlich.Es gibt jedoch einige andere Dinge, die Sie möglicherweise habe falsch in Ihrem code:

Erste, Ihre HTML ist nicht gültig.Sie haben zu setzen Sie Anführungszeichen um attribut-Werte.Könnten Sie dies innerhalb von Anführungszeichen durch die Flucht inneren Anführungszeichen mit einem umgekehrten Schrägstrich:

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

da sieht dies nicht schön, Sie könnte verlassen Sie den PHP-Teil und schreiben der reinen "HTML", wenn Sie dies ändern:

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

Um das (IMHO weit mehr lesbar):

<?php
    ...
?>

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

Zweitens, und das scheint noch wichtiger ist, es sieht für mich wie Sie haben eine SQL-Injection-Schwachstelle, weil Sie passieren die Feldwerte direkt an mysql, ohne Verwendung mysql_real_escape_string erste.Ich bin nicht in PHP, also vielleicht habe ich das falsch, aber was passiert, wenn Sie eingeben ';-- Sie in die Eingabefelder?