如何在不刷新整个页面的情况下删除数据?

时间:2017-02-06 11:59:30

标签: php jquery ajax codeigniter-3

现在正在删除数据,但重新加载了整个页面。没有页面重新加载,数据必须删除。代码如下,

admin.js

userdeletecnfrm();
 function userdeletecnfrm(){
     $('.userdeletecnfrm').unbind("click");
     $(".userdeletecnfrm").click(function(){

            var uid=$(this).attr('data-id');
            $.ajax({
                type: "POST",
                data: "userId=" + uid,
                url: urljs+"admin/Users/deleteconfrmview",
                dataType:'json',
            }).done(function( data ) {

                $("#deluser").html(data.view);
                deleteuser();
            });
     });
 }

 deleteuser();
 function deleteuser(){
        $('.deleteuser').unbind("click");
        $('.deleteuser').on("click",function(e){


          var id=$(this).attr('data-id');
          var parent = $(this).closest('tr');
          $.ajax({
                type: "POST",
                data: "userId=" + id,
                url: urljs+"admin/Users/deleteuser",
                dataType:'json',
            }).done(function( data ) {

                    $("#deluser").hide();
                    $(parent).remove();


            });
          e.preventDefault();
        });  
    } 

以上代码正在通过页面重新加载来删除数据。

userview.php

<!-- USER VIEW -->
<section id="categories-content" class="categories-content">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content table-responsive">
                    <center><div id="comment"></div></center>
                    <button class="btn btn-primary" data-toggle="modal" data-target="#newuser" >Add User</button>
                    <div class="addhere"></div>
                    <table class="table responsive">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Role</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                           <?php 
                           foreach ($userQ->result() as $rowuser){
                            ?>
                            <tr>
                                <td><?php echo $rowuser->userId?></td>
                                <td>
                                <?php if($rowuser->profilePic!=''){ ?>
                                        <img alt="" src="<?php echo base_url();?>private/<?php echo $rowuser->userId;?>/<?php echo $rowuser->profilePic;?>" style="width: 50px; height:50px"> <?php echo $rowuser->name;?>
                                        <?php }else{?>
                                        <img src="<?php echo base_url()?>public/images/default-profile_pic.png" alt="" style="width: 50px; height:50px"><?php echo $rowuser->name;?>
                                        <?php }?>
                                </td>
                                <td><?php echo $rowuser->email?></td>
                                <td><?php echo $rowuser->roleName?></td>
                                <td>
                                    <a class="edit edituser" name="edituser" data-id="<?php echo $rowuser->userId;?>" 
                                      data-toggle="modal" data-target="#upuser" title="edit" href="#">
                                        <i class="icon md-pencil"></i>
                                    </a>&nbsp; &nbsp;
                                    <a class="delete userdeletecnfrm" name="deleteuser" data-id="<?php echo $rowuser->userId;?>" 
                                        data-toggle="modal" data-target="#deluser" title="delete" href="#">
                                        <i class="icon md-recycle"></i>
                                    </a>&nbsp; &nbsp;
                                    <?php 
                                    if($rowuser->status!=0){
                                    ?>
                                        <a class="inactiveuser" name="Inactivate" data-id="<?php echo $rowuser->userId;?>" 
                                            title="Inactivate" href="#">
                                            <span class="label label-success"> Active </span>
                                        </a>&nbsp; &nbsp;&nbsp; &nbsp;
                                        <?php }else{?>
                                        <a class="activeuser" name="Activate" data-id="<?php echo $rowuser->userId;?>" 
                                            title="Activate" href="#">
                                            <span class="label label-danger"> Inactive </span>
                                        </a>&nbsp; &nbsp;
                                    <?php }?>
                                    <!--<button class="btn btn-primary resetpassword" data-id="<?php echo $rowuser->email;?>">Reset password</button>-->
                                </td>
                            </tr>
                            <?php }?>
                       </tbody>
                  </table>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- END /USER VIEW-->

userdeleteconfirmwindow

<!-- DELETE USER CONFIRMATION VIEW -->

  <div class="modal-dialog" role="document">
    <form id="deluser">
        <div class="modal-content">
          <div class="modal-header">
              <button type="button" class="close cancel" data-dismiss="modal" aria-label="Close"><span class="closeForm">
              <i class="icon md-close-1"></i></span></button>
              <h4 class="modal-title" id="myModalLabel"><font color="black"><center>Delete User</center></font></h4>
          </div>
          <div class="modal-body">
              <p><b>Are you sure about this ?</b></p>
              <div class="modal-footer">
                 <button type="submit" class="btn btn-primary deleteuser" data-id="<?php echo $userId;?>" >Yes</button>
                 <button type="button" class="btn btn-default cancel" data-dismiss="modal">No</button>
             </div>
          </div>
        </div>
    </form>
  </div>

  <!-- END/DELETE USER CONFIRMATION VIEW -->
  <script>

  $('.cancel').unbind("click");
  $('.cancel').on("click",function(e){
    $('.modal-dialog').remove();
    e.preventDefault();
  });
  </script>

2 个答案:

答案 0 :(得分:1)

这应该是评论,但我在这里的声誉很低。

为什么不删除window.location.reload()?另外在下面添加一个返回false:我的意思是

 <script>
        function deleteuser() {
            $('.deleteuser').unbind("click");
            $('.deleteuser').on("click", function (e) {
                 e.preventDefault();
                var id = $(this).attr('data-id');
                $.post(urljs + "admin/Users/deleteuser", {'userId': id}, function (data) {
                    if (data.result > 0) {
                        $("#deletecategory").html(data.msg);                        
                    } else {
                        $.modal(data.view);
                        $("#deletecategory").html(data.mesg);
                    }
                }, "json");
                return false;
            });
        }
    </script>

还有什么理由你决定不在这里使用$ .ajax?您可以使用$ .ajax并在ajax调用中添加“POST”类型。

或者,您可以在document.ready上拥有一个获取当前用户列表的函数。当ajax post返回成功时,你隐藏窗口或表div id $('#div_id')。hide();并立即检索当前的用户列表。因此,删除的用户不会显示。

答案 1 :(得分:0)

而不是window.location.reload();,只需隐藏您的表格行$("#yourtrid").hide();(我假设要删除的数据在表格行中)

相关问题