使用 ajax 和 codeigniter 删除数据

Question

我在使用 ajax 删除数据时遇到问题我首先尝试测试是否单击按钮进行警报操作，因此它不起作用。 这是我的控制器代码

public function indexajax()
  {

      $this->load->model("usersmodel");
      $data["allu"]=$this->usersmodel->ShowAllUsers("users");
      $data['pagetitle']=" -->All Users Using Ajax<--";
      $this->load->view("template/admin/header",$data);
      $this->load->view("users/allusersusingajax");
      $this->load->view("template/admin/footer");
  }

  public function get_all_users()
  {
     if($this->input->post("action")=='FetchAllUserUingAjax1'){

        $this->load->model("usersmodel");
         $x=  $data["allu"]=$this->usersmodel->ShowAllUsers("users");
         foreach ($x as $a):
             echo'<tr>
        <td>'.$a->id.'</td>
        <td>'.$a->username.'</td>
        <td><button class="deletenew" id="'.$a->id.'">delete</button></td>

        </tr>';
         endforeach;
      }

public function deleteusers()
{
    $id=$this->input->post("id");
    $this->load->model("usersmodel");
    $this->usersmodel->deleteusers($id);
}

这是我的删除模型代码

public function deleteusers($id)
{
    $this->db->where('id',$id);
    if($this->db->delete("users")){
        return true;
    }else{
        return false;
    }
}

/**************这是查看页面*****/

<div class="userdataajax table-responsive">
    <table class=" table table-responsive table-bordered">
        <tr>
            <th>#</th>
            <th>name</th>
            <th>image</th>
            <th> full name</th>
            <th>email</th>
            <th>usertype</th>
            <th>status</th>
            <th>reg date</th>
            <th>reg time</th>
            <th>delete</th>
            <th>edit</th>
            <th>Activate</th>
            <th>disactivate</th>

        </tr>

    </table>
</div>


<script>

    $(document).ready(function () {
        FetchAllUserUingAjax();

        function FetchAllUserUingAjax() {

            $.ajax({
                url:'<?php echo base_url()?>Users/get_all_users',
                method:"post",

                success:function (data) {
                    $(".userdataajax table").append(data);
                }
            })

            var action="FetchAllUserUingAjax1";
            $.ajax({
                url:"<?php echo base_url()?>Users/get_all_users",
                method:"post",
                data:{action:action},
                success:function (data) {
                    $(".userdataajax table tr").not("table  
                   tr:first").remove();

                    $(".userdataajax table").append(data);
                    Table();
                }
            })
        };
        $(".deletenew").on("click",function () {
           alert("engex");//this alert not working

            var id=$(this).attr('id');
            $.ajax({

                url:"<?php echo base_url()?>Users/deleteusers",
                method:"post",
                data:{id:id},
                success:function () {
                    alert("deleted");
                    FetchAllUserUingAjax();
                }
            })
        })
    })

</script>

// 但如果我从控制器中删除 foreach (foreach) 并将其放入视图页面，则删除工作正常。我想知道我的问题是什么。

Answer 1

在您为删除按钮设置点击处理程序的那一刻，这些按钮在页面中不存在（但...），因为它们正在加载另一个 ajax 请求。

要绑定稍后添加到页面的按钮，您可以使用事件委托。为此，您需要更改您的点击处理程序：

$(".deletenew").on("click",function () {

到：

$('body').on('click', '.deletenew', function () {

我已将其委托给 body 元素，但您可以使用任何包含按钮并且在页面加载/DOM 就绪时可用的元素。

Answer 2

控制器代码

我认为您的警报没有显示，因为您的表格是由 ajax 显示的。在此代码中，当单击删除按钮时，您必须使用 deletenew 函数。

public function get_all_users()
      {
         if($this->input->post("action")=='FetchAllUserUingAjax1'){

            $this->load->model("usersmodel");
             $x=  $data["allu"]=$this->usersmodel->ShowAllUsers("users");
             foreach ($x as $a):
                 echo'<tr>
            <td>'.$a->id.'</td>
            <td>'.$a->username.'</td>
            <td><button class="deletenew" id="'.$a->id.'" onclick="deletenew(this.id);">delete</button></td>

            </tr>';
             endforeach;
          }

查看页面删除功能

这是 deletenew 功能，当您单击删除按钮时会起作用

    function deletenew(id){
     alert("engex");

      $.ajax({
          url:"<?php echo base_url()?>Users/deleteusers",
          method:"post",
          data:{id:id},
          success:function () {
              alert("deleted");
              FetchAllUserUingAjax();

          }

      })
  }

我希望这段代码对你有用

Answer 3

       //change Controller function 

     public function get_all_users()

     {

        if($this->input->post("action")=='FetchAllUserUingAjax1')
    {

         $this->load->model("usersmodel");
        // print_r($this->input->post("action"));
         echo ($this->input->post("action"));
        $data["allu"]=$this->usersmodel->ShowAllUsers("users");
        $this->load->view("template/admin/header");
       //make another view show_users,make a button in page
       //alluersusing ajax give that button id 'but'
        $this->load->view("users/show_users,$data");

        $this->load->view("template/admin/footer");

     }


 //copy paste the code below in  show_users view


        foreach ($x as $a):

                         echo'<tr>

                    <td>'.$a->id.'</td>

                    <td>'.$a->username.'</td>

        <td><button class="btn btn primary" onclick=del(<?php echo '.$a->id.' ?>)>delete</button></td>

                    </tr>';
                     endforeach;


//Ajax Delete function

<script>

 function del(id) {


        $.ajax({
            type: "POST",
            url: '<?php echo base_url('Users/deleteusers')?>' +"/"+ id,
            success: function (data) {
                $("#get").html(data);


            }
        });

    }
</script>