Laravel中关闭Modal后更新Blade视图的实现疑问

是的，需要通过前端JavaScript（推荐用jQuery，因为项目中Bootstrap Modal本身依赖jQuery）来实现这个客户端DOM更新功能，不需要重新请求后端接口。

具体实现步骤 #

1. 在主视图添加展示容器 #

在你提供的col-md-8的div下方新增一个容器，用来放置选中的产品信息：

<div class="col-md-8 form-group">
    <label class="form-control-label">Related Products</label>
    @if (count($products) > 0)
        <p class="description">
            <a href="#"  data-toggle="modal" data-target="#setRelatedProducts">Set related products here.</a>
        </p>
        @include('cms::article.modal-products')
    @else
        <p class="description">
            No Data Product
        </p>
    @endif
</div>
<!-- 新增的选中产品展示容器 -->
<div id="selected-products-display" class="col-md-8 mt-3"></div>

2. 优化Modal的产品行数据存储 #

在Modal的产品表格行中，添加data-product属性存储完整的产品数据，方便后续快速获取：

@foreach ($products as $item)
<?php
    $statusCategory = !empty($item->familyProductChild) && !empty($item->familyProductChild->category) ? $item->familyProductChild->category->is_active : null;
    // 保留原有变量逻辑
?>
@if (!empty($item->familyProductChild))
    <!-- 添加data-product属性，存储产品JSON格式数据 -->
    <tr data-product='@json($item)'>
        <!-- 原有的td内容保持不变 -->
        <td>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" name="article_related[]"
                    class="custom-control-input article-related" value="{{ $item->id }}"
                    id="article_related_{{ $item->id }}" {{ in_array($item->id, $articleRelated) ? 'checked' : '' }}>
                <label class="custom-control-label"
                    for="article_related_{{ $item->id }}"></label>
            </div>
        </td>
        <!-- 其他td内容... -->
    </tr>
@endif
@endforeach

3. 给Modal按钮添加ID #

修改Modal中的「Set Selected Products」按钮，添加唯一ID方便绑定点击事件：

<button type="button" class="btn btn-sm btn-primary mb-4" data-dismiss="modal" id="set-selected-products-btn">
    Set Selected Products
</button>

4. 编写jQuery交互代码 #

在主视图的底部（或项目的公共JS文件中）添加以下代码，实现选中产品的收集和展示：

$(document).ready(function() {
    // 监听设置按钮的点击事件
    $('#set-selected-products-btn').on('click', function() {
        const displayContainer = $('#selected-products-display');
        // 清空之前的展示内容
        displayContainer.empty();
        
        // 收集所有选中的产品
        const selectedItems = [];
        $('.article-related:checked').each(function() {
            // 从父表格行获取产品数据
            const product = $(this).closest('tr').data('product');
            selectedItems.push(product);
        });
        
        // 渲染选中的产品到展示容器
        if (selectedItems.length > 0) {
            let renderHtml = '<h6 class="mb-2">Selected Related Products</h6><ul class="list-group">';
            
            selectedItems.forEach(product => {
                // 保持和Modal一致的分类显示逻辑
                const isCategoryActive = product.familyProductChild?.category?.is_active === 1;
                const categoryName = isCategoryActive ? product.familyProductChild.category.name : 'Not Set';
                const subCategoryName = isCategoryActive ? product.familyProductChild.name : 'Not Set';
                
                renderHtml += `
                    <li class="list-group-item d-flex justify-content-between align-items-start">
                        <div>
                            <strong>${product.title}</strong>
                            <div class="small text-muted mt-1">
                                Category: ${categoryName} | Sub Category: ${subCategoryName}
                            </div>
                        </div>
                        <span class="badge bg-primary rounded-pill">ID: ${product.id}</span>
                    </li>
                `;
            });
            
            renderHtml += '</ul>';
            displayContainer.html(renderHtml);
        } else {
            displayContainer.html('<p class="text-muted">No related products selected.</p>');
        }
    });
});

补充说明 #

• 若项目未引入jQuery，也可以用原生JavaScript实现，但考虑到Bootstrap Modal本身依赖jQuery，项目中一般已包含该库。
• 如果需要将选中的产品ID提交到后端（比如表单提交场景），可在主视图中添加隐藏input字段，同步更新选中的ID：

  <input type="hidden" name="selected_products" id="selected-products-input">
  

  然后在jQuery代码中添加：

  // 收集选中的产品ID并赋值给隐藏字段
  const selectedIds = selectedItems.map(p => p.id);
  $('#selected-products-input').val(selectedIds.join(','));
  

内容的提问来源于stack exchange，提问作者Yasamura