Обновление данных с помощью ajax с django и bootstrap modal

вот мой views.py

def update_article(request, pk):
    obj = Article.objects.get(pk=pk)
    if request.headers.get('x-requested-with') == 'XMLHttpRequest':
        new_designation = request.POST.get('designation')
        new_famille = request.POST.get('famille_id')
        new_quantite = request.POST.get('quantite')
        obj.designation = new_designation
        obj.famille = new_famille
        obj.quantite = new_quantite
        obj.save()
        return JsonResponse({
            'designation': new_designation,
            'famille': new_famille,
            'quantite': new_quantite,
        })
    return redirect('/article')

Вот мой модал

<div class="modal fade" id="UpdateModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Update</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body" >
            <form action="" method="post" id="update-form"> 
                        {% csrf_token %}
                        {% for field in form %}
                            <div class="form-group col-lg-12">
                                {{ field.label_tag }}  
                                {{ field }}
                            </div>
                        {% endfor %}
                    
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Update</button>
                </div>
            </form>
      </div>
    </div>
  </div>

вот мой Js

const getData = () =>{
    $.ajax({
        type:'GET',
        url:'/load/',
        success: function(response){
            console.log(response)
            const data = response.article
            console.log(data)
            data.forEach(element => {
                articleBox.innerHTML +=`
                <tbody>
                <tr>
                    <td><div ><a data-bs-toggle="modal" data-bs-target="#detailModal" href="" data-pic=${element.designation} class="detail" >${element.designation}</a></div></td>
                    <td>${element.famille}</td>
                    <td><a href="#">${element.quantite}</a></td>
                    <td>${element.date}</td>
                    <td>Available</td>
                    <td><a href="#"  data-bs-toggle="modal" data-bs-target="#delete">Delete</a>
                    |<div  data-bs-toggle="modal" data-bs-target="#UpdateModal" id="update-article"  >Edit</div></td>                  
                </tr>
                </tbody>
                `
            });
            
        },
        error: function(error){
            console.log(error)
        }
    })

}

из этого кода я хочу обновить данные по id, я перепробовал все, но когда я нажимаю кнопку редактировать, модальная форма не возвращает никакого значения...спасибо заранее

это мой первый вопрос, поймите, если он не очень хорошо задан или структурирован

Вернуться на верх