Laravel列表模态框编辑AJAX仅更新第一条数据问题求助

问题核心 #

循环渲染模态框时，description文本输入框、descriptiError错误提示容器的ID全局重复，HTML规范要求同页面ID必须唯一，因此JS用ID选择器取值时永远只会拿到第一个匹配元素的内容，错误提示也只会显示在第一个模态框里，导致非第一个表单提交异常。

修复方案 #

1. 给模态框内元素加上唯一ID后缀 #

修改模态框循环渲染的Blade代码，给文本框、错误提示的ID拼接当前咨询记录的ID，保证全局唯一：

<div class="modal-body">
    <!-- 给ID加上{{$item->id}}后缀 -->
    <textarea id="description-{{$item->id}}" name="description" class="form-control form-control-sm" placeholder="你想咨询什么内容？">{{$item->description}}</textarea>
    <!-- 错误容器ID也加上后缀 -->
    <div class="alert-message" id="descriptiError-{{$item->id}}"></div>
</div>

2. 调整AJAX逻辑，动态获取对应模态框的内容 #

修改JS提交代码，根据点击按钮绑定的咨询ID，匹配对应模态框的元素取值和渲染错误：

$(".updateInfo").on('click',function(e) {
    e.preventDefault();
    // 获取当前点击按钮绑定的咨询ID
    const ConsultId = $(this).attr('data-id');
    // 动态获取当前对应模态框的文本值、错误容器
    let description = $('#description-' + ConsultId).val();
    let errorContainer = $('#descriptiError-' + ConsultId);
    if (confirm("确定要更新这条咨询内容吗？")) {
        $.ajax({
            type:"PUT",
            data:{
                "_token": "{{ csrf_token() }}",
                description:description,
            },
            url:'/ConsultantsCp/Consult/' + ConsultId,
            success: function(data){
                swal({
                    title: "操作成功", 
                    text: "咨询内容已更新", 
                    type: "success", 
                    timer: 1500, 
                    buttons: false,
                }).then(function(){
                    location.reload();
                });
            },
            error: function(response) {
                // 错误提示渲染到当前模态框的容器内
                errorContainer.text(response.responseJSON.errors.description);
            }
        });
    }
});

推荐优化（不依赖ID实现，维护性更高） #

不用修改ID也可以通过DOM层级查找元素，后续调整页面结构适配性更强：

$(".updateInfo").on('click',function(e) {
    e.preventDefault();
    const ConsultId = $(this).attr('data-id');
    // 从点击按钮向上找最近的form表单，再查找表单内的元素
    let currentForm = $(this).closest('form');
    let description = currentForm.find('textarea[name="description"]').val();
    let errorContainer = currentForm.find('.alert-message');
    // 后续AJAX逻辑和上面一致即可
});

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