Codeigniter和AJAX从表中删除项目使页面空白

Question

I managed to integrate ajax into my pagination and search. it seems to work fine so far. However, when I delete an item and try to refresh the list, my page just returns blank. I was hoping someone could guide me on the proper way to do this as I have tried various methods and want to try to use ajax. Thank you.

My view

<script>
function searchFilter(page_num) {
    page_num = page_num?page_num:0;
    var keywords = $('#search').val();
        console.log(keywords);
        console.log('<?php echo site_url('/AdminDocuments/'); ?>'+page_num);
    $.ajax({
        type: 'POST',
        url: '<?php echo site_url('/AdminDocuments/Search/'); ?>'+page_num,
        data:'page='+page_num+'&keywords='+keywords,
        beforeSend: function () {
            $('.loading').show();
        },
        success: function (html) {
            $('#list').html(html);
            $('.loading').fadeOut("slow");
        }
    });
}

function deleteDocument(input){
    var id = input;
    console.log(id);
    $.ajax({
        type:'POST',
        url:'<?php echo site_url('/AdminDocuments/Delete'); ?>',
        data:'id='+id,
        beforeSend: function () {
            $('.loading').show();
        },
        success:function(result){
            console.log(result);
            $('#list').html(result);
            $('.loading').fadeOut("slow");
        }
    });
}
</script>
<div id="successid" style="display: none;" class="alert alert-success">
    <button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
        &times;
    </button>
    Success 
</div>
<div id="maincontainer">
    <div id="list" class="row">
        <div class="col-sm-12 table-responsive">
            <table class="table">
                <thead>
                    <tr class="text-left">
                        <td>Period</td>
                        <td>Name</td>
                        <td>Account Number</td>
                        <td></td>
                        <td></td>
                    </tr>
                </thead>
                <tbody>
                    <?php 
                        if(!empty($datatable)){
                            foreach ($datatable as $data){
                    ?>
                        <tr class="text-left">
                            <td><?php echo $data['month']."/"; ?><?php echo $data['year']; ?></td>
                            <td><?php echo $data['first_name']; ?> <?php echo $data['last_name']; ?></td>
                            <td><?php echo $data['account_number']; ?></td>
                            <td><a href="<?php echo $data['file_link'];?>"><i class="fa fa-file" aria-hidden="true"></i> View</a></td>
                            <!--<td><a href="<?php echo site_url('AdminDocuments/Delete/'.$data['document_id']);?>"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></td>-->
                            <td><a href="#" id="delete" onclick="deleteDocument(<?php echo $data['document_id'];?>)"><i class="fa fa-trash" aria-hidden="true"></i> Delete</a></td>
                        </tr>
                    <?php 
                        }
                    }else{
                    ?>
                        <tr>
                            <td colspan="7">You do not have any items at the moment</td>
                        </tr>
                    <?php
                    }
                    ?>
                </tbody>
            </table>
        </div>
        <div class="pagination-links pull-right">
            <?php echo $links; ?>
        </div>
    </div>
    <div class="loading" style="display: none;">
        <div class="content">
            <img src="<?php echo base_url().'assets/images/loading/loading.gif'; ?>"/>
        </div>
    </div>
</div>

Controller

public function delete(){
        $id = $this->input->post('id');
        unlink($this->DocumentModel->admin_get($id)['file_location']);
        $result = $this->DocumentModel->delete($id);
        $activity = array(
            'page'=>'Documents',
            'action'=>'Deleted document',
            'created_on'=>date('Y-m-d'),
            'time_on'=>date('h:i:s')
        );
        $this->ActivitiesModel->admin_create($activity);
        if($result===false){
            echo "false";
        }else{
            echo "true";
        }
    } 

Answer 1

You did a mistake I think. Please comment this line // $('#list').html(result);, because this will replace your #list div with result data

function deleteDocument(input){
    var id = input;
    console.log(id);
    $.ajax({
        type:'POST',
        url:'<?php echo site_url('/AdminDocuments/Delete'); ?>',
        data:'id='+id,
        beforeSend: function () {
            $('.loading').show();
        },
        success:function(result){
            console.log(result);
            // $('#list').html(result);
            $('.loading').fadeOut("slow");
        }
    });
}

Let me know if it not works for you.