Comment mettre à jour les lignes de jQuery avec PHP et HTML
Question
Mon script PHP génère une table avec des lignes qui peuvent optionaly être modifiés ou supprimés. Il y a aussi un possibilety pour créer une nouvelle ligne.
Je suis un moment difficile de comprendre comment mettre à jour les lignes HTML qui sont générés par PHP et introduit par jQuery. Après la mise à jour, il doit être encore modifiable. Le code HTML est généré dans un div.
-
jQuery (insert HTML généré / attendre l'action)
-
PHP (générer html)
-
Retourner à l'étape 1)
(EDIT: Correction d'une erreur et un script modifié pour répondre)
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 + ""
});
});
});
La solution
placer tous vos gestionnaires d'événements en dehors de la fonction ajax et utiliser la méthode live()
à la place. Et vous devez inclure les données à envoyer lors de l'utilisation 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
});
Autres conseils
Je pense que vous ne recevez pas les événements de clic pour éditer, supprimer, etc. après de nouvelles lignes de php sont ajoutés à la div.
Essayez d'utiliser le plugin en direct jquery pour lier les événements de clic au fur et à de nouvelles choses est créé. S'il vous plaît se référer à cette question traitant le même problème.
Comme peirix et TheVillageIdiot a souligné, le plug-in direct peut-être utile. Cependant, il y a d'autres choses que vous pouvez obtenu mal dans votre code:
D'abord, votre code HTML est incorrect. Vous devez mettre des guillemets autour des valeurs de ATTRIBUT. Vous pouvez le faire entre guillemets en échappant à des citations internes avec une barre oblique inverse:
echo "<input type=\"text\" class=\"inputfield_visible\" />";
car cela semble pas beau, vous pouvez laisser la partie PHP et écrire HTML pur si vous changez ceci:
<?php
...
echo "</tbody>";
echo "</table>";
echo "<input type=text class=inputfield_visible />";
echo "<button class=new>Neu</button>";
?>
Pour que (à mon humble avis, de loin, plus lisible):
<?php
...
?>
</tbody>
</table>
<input type="text" class="inputfield_visible" />
<button class="new">Neu</button>
En second lieu, et cela semble être plus important encore, il me semble que vous avez une vulnérabilité Injection SQL, parce que vous passez les valeurs de champ directement à MySQL sans utiliser mysql_real_escape_string premier. Je ne suis pas en PHP, alors peut-être que je suis trompé, mais qu'arrive-t si vous entrez dans ';--
vous des champs de saisie?