PHP 및 HTML로 jQuery에서 행을 업데이트하는 방법
문제
내 PHP 스크립트는 선택적으로 편집하거나 삭제할 수있는 행이있는 테이블을 생성합니다. 새 행을 만들 수있는 가능성도 있습니다.
PHP를 통해 생성되고 jQuery를 통해 삽입되는 HTML 행을 업데이트하는 방법을 알아 내기가 어렵습니다. 업데이트 후에도 여전히 편집 가능해야합니다. HTML은 div로 생성됩니다.
jQuery (삽입 된 HTML/작업 대기 시간)
PHP (HTML 생성)
1 단계로 돌아갑니다)
(편집 : 오류를 수정하고 스크립트를 변경하여 답변)
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 + ""
});
});
});
해결책
모든 이벤트 핸들러를 Ajax 기능 외부에 배치하고 live()
대신 방법. AJAX를 사용할 때 보낼 데이터를 포함해야합니다. 에서 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
});
다른 팁
PHP의 새로운 행이 Div에 추가 된 후 편집, 삭제 등의 클릭 이벤트를받지 못한다고 생각합니다.
jQuery 라이브 플러그인을 사용하여 클릭 이벤트를 새로운 재료를 만들 때 바인딩하십시오. 참조하십시오 이것 비슷한 문제를 다루는 질문.
처럼 Peirix 그리고 villageidiot 지적하면 라이브 플러그인이 유용 할 수 있습니다. 그러나 코드에 잘못된 다른 것들이 있습니다.
먼저 HTML이 유효하지 않습니다. 귀속 값에 따옴표를 넣어야합니다. 내부 인용문을 백 슬래시로 탈출하여 인용문 내 에서이 작업을 수행 할 수 있습니다.
echo "<input type=\"text\" class=\"inputfield_visible\" />";
이것은 그렇게 좋아 보이지 않기 때문에, 당신은 이것을 변경하면 PHP 부품을 남기고 순수한 HTML을 쓸 수 있습니다.
<?php
...
echo "</tbody>";
echo "</table>";
echo "<input type=text class=inputfield_visible />";
echo "<button class=new>Neu</button>";
?>
그것에 (훨씬 더 읽기 쉬운 IMHO) :
<?php
...
?>
</tbody>
</table>
<input type="text" class="inputfield_visible" />
<button class="new">Neu</button>
둘째, 더 중요한 것 같습니다. 사용하지 않고 필드 값을 MySQL에 직접 전달하기 때문에 Sqlinejection 취약점이있는 것처럼 보입니다. mysql_real_escape_string 첫 번째. 나는 PHP에 그럴 수 없어서 아마도 잘못되었을 수도 있지만, 입력하면 어떻게됩니까? ';--
입력 필드에?