How to delete data without refreshing whole page in php?

Question

The data is deleting now but the whole page is reloaded. Without page reload the data has to remove. The code is like below,

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();
        });  
    } 

The above code is working to delete data with page reloading.

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>

Answer 1

This is supposed to be comment, but i have low reputation here.

Why dont you remove the window.location.reload()? Also add a return false just below: What i mean is

 <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>

Also any reason why you decided not to use a $.ajax here? You can use a $.ajax and add type 'POST' to the ajax call.

Alternatively, you can have a function on document.ready which gets the current list of users. When the ajax post returns success, you hide the window or table div id $('#div_id').hide(); and immediately, the current list of users would be retrieved. So, the deleted user would not show up.

Answer 2

Instead of window.location.reload();, just hide your table row like $("#yourtrid").hide(); (I assume the the data to be deleted is in table row)