2009-07-09 109 views
0

我的PHP脚本生成一个包含可以选择编辑或删除的行的表。还有可能创建一个新的行。 PHP是通过jQuery Events激活的。表不响应第二个jQuery请求

现在一切正常,我可以编辑删除并创建一个项目。在每个使用PHP脚本的操作之后,HTML表格都会被更新。

但是,当我尝试在事件后再次执行操作时,HTML表格不会在后台更新,但PHP脚本会进入数据库。

是否有人知道为什么当我触发第二个事件时,我的HTML表格不会自动更新?

下面是脚本:

PHP

<?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() { 
    myvariable5 = $(this).prevAll(".place_name").html(); 
    $(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").siblings().find("input[type=text]").val(myvariable5); 
    }); 
    $(".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"); 
    $.post("place/place_list.php", {action: "edit", name: ""+myvariable1+"", id: ""+myvariable2+""}, function (html){$("#place_container").replaceWith(html);}); 
    }); 
    $(".delete").live("click", function() { 
    var myvariable3 = $(this).prevAll("td:last").attr("id"); 
    $.post("place/place_list.php", {action: "delete", id: ""+myvariable3+""}, function (html){$("#place_container").replaceWith(html);}); 
    }); 
    $(".new").live("click", function() { 
    var myvariable4 = $(this).prevAll("input[type=text]").val(); 
    $.post("place/place_list.php", {action: "new", name: ""+myvariable4+""}, function (html){$("#place_container").replaceWith(html);}); 
    }); 
}); 
+0

你有没有试过用Firebug调试你的代码? – montrealist 2009-07-09 16:38:42

+0

你也应该用单引号括住你的参数值(即class ='inputfield_td',不是class = inputfield_td) – montrealist 2009-07-09 16:41:08

回答

2

我想我知道。你做replaceWith而不是追加,所以你的第一个操作(你留下只有一个表在你的网页)ID #place_container的DIV,当然jQuery没有找到它,并无法刷新它与来自第二个操作的新内容。

只需使用append或更好的方法即可使用html方法。

2

不应该更换了完整的表?

$("#place_container").html(html); 
+0

我的容器没有在JS的开始点填充内容,所以我不认为这会影响如果内容被附加? – elhombre 2009-07-09 15:33:48