PHP 및 HTML로 jQuery에서 행을 업데이트하는 방법

StackOverflow https://stackoverflow.com/questions/1096630

  •  11-09-2019
  •  | 
  •  

문제

내 PHP 스크립트는 선택적으로 편집하거나 삭제할 수있는 행이있는 테이블을 생성합니다. 새 행을 만들 수있는 가능성도 있습니다.

PHP를 통해 생성되고 jQuery를 통해 삽입되는 HTML 행을 업데이트하는 방법을 알아 내기가 어렵습니다. 업데이트 후에도 여전히 편집 가능해야합니다. HTML은 div로 생성됩니다.

  1. jQuery (삽입 된 HTML/작업 대기 시간)

  2. PHP (HTML 생성)

  3. 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에 그럴 수 없어서 아마도 잘못되었을 수도 있지만, 입력하면 어떻게됩니까? ';-- 입력 필드에?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top