Django中AJAX向for循环外Bootstrap模态框传值更新单条记录问题排查

现存错误定位 #

• 模板层问题
  • 循环变量重名：{% for compliance in compliance %} 被遍历的queryset和循环内单条对象同名，第一次循环后就会覆盖原数据集，导致后续循环逻辑异常
  • 模板标签拼写错误：{% complience_category compliance request.user as compliances %} 标签名单词拼写错误，会直接触发模板渲染报错
  • 模态框作用域错误：模态框写在for循环外部，直接用{{ qualification.id }}渲染表单action、输入框属性时，只能拿到循环最后一个qualification的值，无法匹配点击的对应条目
  • 模态框语法错误：Bootstrap隐藏类为hide不是hid；form标签action属性末尾多了一个冗余双引号，属于HTML语法错误
  • 事件绑定冲突：编辑按钮同时写了data-toggle="modal" data-target="#modal-default"属性，点击时会直接弹出未加载数据的空模态框，不会等待AJAX返回结果
• AJAX层问题
  • 请求地址错误：url参数填空字符串，默认请求当前页面地址，没有请求单条资质详情的对应接口
  • 回调逻辑错误：$('#modal-default .modal-dialog',data)的DOM选择写法无法正确提取返回内容里的模态框节点，重复替换节点还会导致模态框事件绑定失效
• 视图层问题
  • 函数参数拼写错误：更新视图的形参qualifiaction_id单词拼写错误，和URL传参名不匹配时会直接返回404
  • 逻辑分支缺失：现有update_qualifications视图只处理表单提交后的更新逻辑，没有处理AJAX拉取单条资质详情、返回模态框片段的分支，AJAX请求发过去只能拿到重定向的整页内容
  • 变量拼写错误：compilance变量少写字母，赋值时无法取到正确的关联资质ID

修正方案 #

1. 列表页模板修正 #

去掉按钮上的自动弹模态框属性，模态框只保留空壳占位，不要提前渲染资质相关内容：

{% for compliance in compliance_list %}
    {% compliance_category compliance request.user as compliances %}
    {% for qualification in compliances %}
    <tr>
        <!-- 其他业务列省略 -->
        <td>
            <button data-id="{{ qualification.id }}" type="button" class="btn btn-warning margin-bottom edit-qualification">
                edit
            </button>
        </td>
        <!-- 其他业务列省略 -->
    </tr>
    {% endfor %}
{% endfor %}

{% csrf_token %}
<div class="modal hide fade" id="modal-default">
    <div class="modal-dialog">
        <!-- 内容留空，AJAX请求返回后动态填充 -->
    </div>
</div>

2. AJAX逻辑修正 #

<script>
$(document).on('click','.edit-qualification',function(){
    var qualId = $(this).data('id');
    $.ajax({
        // 替换为你配置的资质详情接口实际地址
        url: '/get-qualification-detail/',
        type:'GET',
        data: {'id': qualId},
        success:function(data){
            $('#modal-default .modal-dialog').html(data);
            $('#modal-default').modal('show');
        },
        error:function(){
            alert('资质信息加载失败，请重试');
        }
    });
});
</script>

3. 视图层修正 #

新增AJAX详情接口，修正原有更新视图的拼写错误：

# 新增：处理AJAX请求，返回单条资质的编辑表单片段
@login_required
def get_qualification_detail(request):
    qual_id = request.GET.get('id')
    qualification = get_object_or_404(ClientUserQualification, pk=qual_id)
    return render(request, 'partial/qualification_edit_modal.html', {'qualification': qualification})

# 修正原有更新视图的拼写与逻辑问题
@login_required
def update_qualifications(request, qualification_id):
    client = request.user.client
    next_url = request.POST.get('next', '/')
    date = request.POST.get('expiry_date') or None
    record_date = request.POST.get('record_date') or None
    name = request.POST.get('id_name')
    compliance = request.POST.get('compliance')
    document = request.FILES.get('document')
    qualification = get_object_or_404(ClientUserQualification, pk=qualification_id)
    
    if document:
        qualification.document = document
    done = request.POST.get('done', False)
    qualification.expiry_date = date
    qualification.record_date = record_date
    qualification.validated = request.user.is_admin
    qualification.done = done
    if name:
        qualification.name = name
    qualification.qualification_id = compliance
    
    messages.success(request, 'Compliance was successfully updated.')
    qualification.save()
    if request.user.is_admin:
        return redirect(next_url)
    return redirect(reverse('worker_compliance_list'))

4. 模态框片段模板修正 #

新建模板文件templates/partial/qualification_edit_modal.html，存放编辑表单内容，渲染时直接拿到当前点击的资质对象：

<form class="form-horizontal" method="POST" enctype="multipart/form-data" action="{% url 'update_qualifications' qualification.id %}"> 
    {% csrf_token %}
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Update Compliance</h3>
    </div>
    <div class="modal-body">
        <div class="control-group">
            <label class="control-label" for="inputdate_{{qualification.id}}">Expiry Date</label>
            <div class="controls">
                <input type="date" id="inputdate_{{qualification.id}}" name="expiry_date" value="{{qualification.expiry_date|date:'Y-m-d'}}">
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
        <button class="btn btn-primary" type="submit">Save</button>
    </div>
</form>

注意：需要在urls.py中为新增的get_qualification_detail视图配置对应路由映射，否则AJAX请求会返回404

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