如何从Blade的@foreach循环传递数据到编辑模态框 解决仅最后项可编辑问题

问题原因 #

• 你的模态框定义在课程列表的@foreach循环之外，Blade渲染页面时循环结束后$course变量只会保留最后一条课程的数据，因此模态框内表单的默认提交地址永远是最后一行课程的更新路由
• 你没有编写JS逻辑将按钮携带的当前行课程ID同步到模态框表单中，导致除最后一行外其他行点击后表单参数错误

修改方案 #

1. 修正模态框代码 #

移除无用的@if(!empty($course->id))判断，将表单路由设置为带占位符的格式，方便后续JS动态替换：

<!-- Assign Modal -->
<div class="modal fade" id="assignModal" tabindex="-1" role="dialog" aria-labelledby="assignModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="assignModalLabel">Assign Teacher</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('courses.update', '__ID__') }}" id="assign-form">
                    @csrf
                    @method('PUT')
                    <input type="text" class="form-control" name="id" value="" id="course-id" hidden>
                    <!-- 修正拼写错误：widht改为width -->
                    <select class="form-control select-teacher" style="width: 100%" name="teacher_id">
                        @foreach($teachers as $teacher)
                            <option value="{{ $teacher->id }}">{{ $teacher->last_name }}, {{ $teacher->first_name }}</option>
                        @endforeach
                    </select>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Assign</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

2. 添加JS同步逻辑 #

在你引入的Bootstrap JS之后添加以下代码，监听模态框打开事件，将点击的按钮对应的课程ID同步到表单中：

<script>
$('#assignModal').on('show.bs.modal', function (event) {
    // 拿到触发当前事件的按钮
    var button = $(event.relatedTarget);
    // 读取按钮上绑定的课程ID
    var courseId = button.data('id');
    // 拿到模态框对象
    var modal = $(this);
    // 给隐藏的课程ID字段赋值
    modal.find('#course-id').val(courseId);
    // 替换表单提交路由中的占位符为实际的课程ID
    var formAction = "{{ route('courses.update', '__ID__') }}".replace('__ID__', courseId);
    modal.find('#assign-form').attr('action', formAction);
})
</script>

修改完成后所有行的分配按钮都可以正确携带对应课程ID提交表单。

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