在不刷新页面的情况下删除jquery中的行答案

【问题标题】：delete row in jquery without page refresh在不刷新页面的情况下删除jquery中的行
【发布时间】：2013-01-19 16:52:55
【问题描述】：

我正在使用此代码删除一行..我的代码运行良好我正在使用数据表，其中每一行前面都有一个删除按钮..我想要的是当确认对话框出现并且用户出现时按确定然后它会删除该行并在不刷新的情况下显示数据表中的剩余行..我的意思是当时如果我按下确定按钮它会成功删除该行..但是删除行仍然存在于表中直到我刷新页面然后它从表中删除..这可能吗？..因为我不希望用户在按下删除后必须刷新以查看该行是否被删除..

这是我的查看代码用户名

         <td> <a href = "employesController/deleteEmploye/<?php echo  $row->emp_id ?>" 
             class = "deletes" >Delete</td>

我的 jquery 代码

 <script type='text/javascript'>
  $(document).ready(function(){
$(".deletes").click(function(e){
  var r =  confirm("are you sure you want to delete this");

   if (r==true){
    $this  = $(this);
    e.preventDefault();
    var url = $(this).attr("href");
    $.get(url, function(r){
        if(r.success){
            $this.closest("tr").remove();
        }
    })
   }else {
        return false;
       }

    });
     });

我的控制器

 function deleteEmploye($empid){

     $id = $empid;
    $this->load->model('employesModel');
    $query = $this->employesModel->deleteEmploye($id);
    return json_encode(array("success" => true));

型号

  public function deleteEmploye($id){

         $this->db->where('emp_id', $id);
        $query = $this->db->delete('employees');

        return $query->result();


 }

【问题讨论】：

你能多显示一点 HTML
$.ajax 的 success 回调将 AJAX 调用返回的数据作为其第一个参数传递。您确定要返回一个带有 success 属性的 JSON 对象，该属性的计算结果为 true？此外，您将$this 作为一个全局对象泄漏。添加var。
是的，我也会给你看我的控制器
我更新了我的问题..这是我在 firbug 响应中遇到的错误..致命错误调用非对象 localhost/.. 上的成员函数 result() 模式第 38 行

标签： php javascript jquery ajax codeigniter

【解决方案1】：

首先，您需要验证是否调用了 if 条件块。如果它被正确调用，那么试试这个：

$this.parent('td').parent('tr').remove();

【讨论】：

【解决方案2】：

使用 Firebug（或类似工具，如果您不使用 firefox）来调试您的 ajax 调用。在“网络”选项卡中，您可以查看您的 ajaxrequest 是否真的发送，以及它返回的内容。

将 console.log 和 console.dir 语句添加到您的代码中以了解发生了什么：

$.get(url, function(r){
    console.log("returned form ajax");
    if(r.success){
        console.log("successful, $this is now ");
        console.dir($this);
        $this.closest("tr").remove();
    }
}

这样你会发现你的 ajax 确实返回了，但是不是您期望的结果：它只返回数据，所以查找 r.success 总是会失败。

您使用的方法 .get 只需要两个参数： url，以及仅在成功时调用的函数！所以你根本不需要 if 语句：

$.get(url, function(r){
  $this.closest("tr").remove();
}

请参阅http://jsfiddle.net/bjelline/8RQQN/ 了解完整的示例。

另外：不要使用 get 来删除东西！请改用post！您还应该考虑跨站点请求伪造：完全不同站点上的某人可能会添加链接

<a href="http://yoursite.com/employesController/deleteEmploye/4">free beer here</a>

诱骗您的用户删除员工 - 甚至没有注意到！

见https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29_Prevention_Cheat_Sheet

【讨论】：

..这是我在 firbug 响应中遇到的错误 ..fatal 错误调用非对象 localhost/.. 上的成员函数 result() 在模态行 38跨度>
感谢您的提示，但我认为我在模型中做错了什么......我正在返回结果......我做对了吗？

【解决方案3】：

您可以使用 jquery 发送到 php 中删除该行的另一个脚本，并且在确认后您可以删除您的表中的这一行

jquery

$.post("functions.php", { rowId: 1231 },
    function(data) {
        if (data == "ok")
            alert("the row has ben delete");
        else
            alert("the row is not delete");

});

php

<?php
    function delete_row(){
        //action to delete row in db
        // when the row has bes delete you can print ok
        echo 'ok';
        //if you have a error  you can print a message that you can managed y jquery
        echo "error 2121123"
    }
    if(isset($_post["rowId"]))
        delete_row($_post["rowId"]);

【讨论】：