Comment mettre à jour des lignes dans jQuery avec PHP et HTML

Question

Mon script PHP génère une table avec des lignes qui peuvent être modifiées ou supprimées. Il y a aussi une possibilité de créer une nouvelle ligne.

J'ai du mal à comprendre comment mettre à jour les lignes HTML générées via PHP et insérées via jQuery. Après la mise à jour, il doit toujours être modifiable. Le HTML est généré dans un div.

1. jQuery (insert généré HTML/attente d'une action)

2. PHP (générer html)

3. retourner à l'étape 1)

(EDIT: Correction d'une erreur et modification du script 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 + "" 
     }); 
    }); 
}); 

Answer 1

lieu tous vos gestionnaires d'événements en dehors de la fonction ajax et utilisez la méthode live() à la place. Et vous devez inclure les données à envoyer lors de l'utilisation d'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

Je pense que vous ne recevez pas les événements de clic pour modifier, supprimer, etc. après de nouvelles lignes de php sont ajoutés à la div. Essayez d'utiliser jquery live plugin pour lier les événements click au fur et à mesure de la création de nouveaux éléments. S'il vous plaît se référer à this question traitant de problème similaire.

Answer 3

Comme peirix et TheVillageIdiot souligné, le plugin en direct peut-être utile. Cependant, il y a d'autres choses que vous pourriez avoir mal dans votre code:

D'abord, votre HTML n'est pas valide. Vous devez placer des guillemets autour des valeurs d'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 le Fiel d valeurs directement à mysql sans utiliser mysql_real_escape_string en premier. Je ne suis pas en PHP, alors peut-être que je me suis trompé, mais que se passe-t-il si vous entrez ';-- dans vos champs de saisie?