Laravel下Bootstrap模态框渲染视图旧数据重复叠加如何解决

实现场景 #

在Laravel开发中通过后端渲染视图的方式为Bootstrap模态框填充数据：点击模态框触发按钮时向后端发起请求，后端渲染完视图后返回HTML内容，前端将内容填充到模态框内展示。

现有代码 #

控制器端代码 #

$view = \View::make('list.modal-body', ['list'=>$list]);   
$message = $view->render();
return response()->json([
   'ajax_request_return_data' => $message
]);

视图模板代码 #

<div class="table-responsive">
<table>
    <thead>
            <tr>
            </tr>
     </thead>
     <tbody>
        @foreach($list as $single_detail)
        <tr>
            <td>{{ $single_detail->detail_name }}</td>
        </tr>
        @endforeach
     </tbody>
</table>
</div>

前端AJAX代码 #

$.ajax({
    type : 'POST',
    url : 'URL-OF-AJAX', 
    data : { 'related_data' : ralate_data_detail }, 
    success: function(data) {
        $('.CLASS_OF_Modal_Body').append(data.ajax_request_return_data)        
        $('#modal_id').modal('toggle');
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
    
    }
});

问题描述 #

每次触发模态框渲染数据时，旧数据会和新数据同时出现在表格中，每打开一次模态框数据就累加一次。已尝试在添加新数据前清空原有内容、清除视图缓存，仍然存在新旧数据共存的问题。

解决方案 #

按以下步骤排查修改即可解决问题：

1. 替换内容追加方法为覆盖方法
   原有代码使用append()方法填充内容，该方法是在原有内容末尾追加新内容，本身就会导致内容累加。将其替换为html()方法，直接覆盖目标元素的所有原有内容：

// 修改success回调内的填充代码
$('.CLASS_OF_Modal_Body').html(data.ajax_request_return_data)

2. 模态框关闭时主动清空内容
   绑定Bootstrap模态框的隐藏事件，每次关闭模态框时主动清空模态框主体内容，避免DOM残留：

// 与AJAX代码同级放置即可
$('#modal_id').on('hidden.bs.modal', function () {
  $('.CLASS_OF_Modal_Body').empty();
})

3. 请求发起前预清空（可选优化）
   如果存在并发请求导致的内容错乱问题，可以在发起AJAX请求前先清空一次内容：

$.ajax({
    type : 'POST',
    url : 'URL-OF-AJAX', 
    data : { 'related_data' : ralate_data_detail }, 
    beforeSend: function() {
        $('.CLASS_OF_Modal_Body').empty();
    },
    success: function(data) {
        $('.CLASS_OF_Modal_Body').html(data.ajax_request_return_data)        
        $('#modal_id').modal('toggle');
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
    
    }
});

4. 后端返回校验
   如果以上修改完成后仍然存在重复内容，可在浏览器控制台打印data.ajax_request_return_data，检查后端返回的HTML内容是否本身就包含重复数据，排除后端查询逻辑错误的问题。
   另外可排查代码拼写问题：示例代码中传递的参数ralate_data_detail存在拼写错误，正确应为related_data_detail，拼写错误可能导致后端查询条件失效，返回全量数据。

内容的提问来源于stack exchange，提问作者always-a-learner