使用AJAX删除表格/数据库项目的问题
现在我已经为我正在处理的这个任务组织器项目提供了几个AJAX方法 - 到目前为止,我只有插入的工作和删除部分工作。出于某种原因,我无法弄清楚为什么我无法在刷新页面之前删除新条目。在PHP生成的代码(第五从而echo下降显示了我传递的是与我的数据库任务id相关的ID):使用AJAX删除表格/数据库项目的问题
function generateTaskTable(){
$con = mysql_connect('localhost', '-', '-');
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("tasks", $con);
$result = mysql_query("SELECT * FROM tasks order by taskDate ASC");
echo '<table id="task_table">';
while($row = mysql_fetch_array($result))
{
$id = $row['taskID'];
echo '<tr id="row'.$id.'">';
echo '<td>'.convertDate($row['taskDate']).'</td>';
echo '<td>'.$row['hours'].'</td>';
echo '<td>'.$row['task'].'</td>';
echo '<td><a href=""><img src="images/trash.png" class="delete" name="'.$id.'"></a>
<a href=""><img src="images/delete.png" class="unsuccessful"></a>
<a href=""><img src="images/check.png" class="successful"></a></td>';
echo '</tr>';
}
echo '</table>';
mysql_close($con);
}
的JQuery/Ajax调用:
<script type="text/javascript">
$(document).ready(function(){
$('.delete').click(function(e){
var deleteID = $(this).attr('name');
var row = deleteID;
$.ajax({
type: "POST",
url: "ajax.php",
data: "deleteID="+ deleteID,
success: function(result){
$('#row'+row).fadeOut('fast');
}
});
e.preventDefault();
});
$("form#submit").submit(function(e) {
var day = $('#dayDD').val();
var month = $('#monthDD').val();
var year = $('#yearDD').val();
var hours = $('#hours_text').val();
var task = $('#task_text').val();
$.ajax({
type: "POST",
url: "ajax.php",
data: "day=" + day + "&month=" + month + "&year=" + year + "&hours=" + hours + "&task=" + task,
success: function(result){
$('#hours_text').val('');
$('#task_text').val('');
$('#task_table').append(result);
}
});
e.preventDefault();
});
});
</script>
阿贾克斯.php:
if(isset($_POST['deleteID'])){
deleteTask($_POST['deleteID']);
}
if (isset($_POST['task'])&& isset($_POST['hours'])){
$newID = insertTask();
$month = $_POST['month'];
$day = $_POST['day'];
$year = $_POST['year'];
$task = $_POST['task'];
$hours = $_POST['hours'];
$day = str_pad($day, 2, "0", STR_PAD_LEFT);
echo'<tr id="row'.$newID.'"><td>'.$month.' '.$day.', '.$year.'</td><td>'.$hours.'</td><td>'.$task.'</td><td><a href=""><img src="images/trash.png" class="delete" name="'.$newID.'"></a><a href=""><img src="images/delete.png" class="unsuccessful"></a><a href=""><img src="images/check.png" class="successful"></a></td></tr>';
}
ajax.php的底部显示了返回到AJAX调用的代码。当我查看生成的源代码时,它一旦添加一个新条目,新生成的ID就会正确并正确地分配给映像名称 - 但它无法正常工作。而不是从表格和我的数据库中删除页面刷新和项目不会被删除,直到您再次单击图像。我还注意到图标对齐略有偏离,我不知道为什么,因为生成的源显示与所有其他表项完全相同的格式。
删除功能:
function deleteTask($id){
$con = mysql_connect('localhost', '-', '-');
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("tasks", $con);
$result = mysql_query("DELETE FROM tasks WHERE taskID=$id");
mysql_close($con);
}
编辑:好吧,我想我可能知道发生了什么与此环视其他一些堆栈溢出的职位去错了 - 也许是我的JQuery $('.delete').click
功能无法正常工作,因为它只是运行当document.ready激发时。 PHP生成的JQuery返回并在页面上创建另一个表元素,并且具有正确的ID标记以便被删除,但document.ready已经使类“delete”可点击的元素(不是新元素)成为可能。这会有可能吗?如果是这样,我该如何解决这个问题?谢谢!
由于链接<a href="">
围绕垃圾按钮进行刷新。尝试把
javascript:void(0);
为
<td><a href="javascript:void(0)"><img src="images/trash.png" class="delete" name="'.$id.'"></a>
使用GET而不是POST在AJAX,只是删除帖子和数据位和URL设置为:
url: "ajax.php?deleteID=" + deleteID
当然,也更新删除php使用$ _GET而不是$ _POST。
谢谢,但它仍然拒绝删除这个项目,如果我点击delete删除其他任何项目,很好,奇数 – 2012-02-09 05:13:38
否否否否否_Never_在GET调用中不使用删除查询,蜘蛛可以很高兴地为您的所有内容“索引”,从而删除所有内容,即使它隐藏在防火墙后面或需要登录,这种方法可以防止它,这是非常危险和容易避免的。'GET'方法仅*用于检索数据。 – 2012-02-09 10:18:53
就在您的onClick
处理程序添加e.stopPropagation();
的元素与类.delete
+1这是@ husbas解决方案的更好方法 – 2012-02-09 10:43:44
我之前使用过e.preventDefault() ... e.stopPropagation()会是更好的方式吗? – 2012-02-09 19:09:02
想通了。只需要添加$(".delete").live('click',function(e){
即可将事件绑定到动态元素。
谢谢!我希望我能够高兴,我现在不到15分。但是这解决了刷新问题 - 由于某种原因它仍然没有被删除。 – 2012-02-09 04:44:13
发布你的PHP代码删除..它会给出一个更好的主意。 – 2012-02-09 04:51:38
编辑为包含删除功能 – 2012-02-09 04:58:21