Невозможно редактировать форму на Javascript с помощью Django

Я пытаюсь редактировать форму на этом сайте с помощью Django и сохранять правки с помощью Javascript (но без обязательного обновления страницы).

Когда пользователь нажимает "редактировать" на странице, ничего не происходит. Никаких консольных ошибок. Я думаю, что проблема в Javascript функции edit_post. Я новичок в использовании Javascript в Django. Любая помощь будет принята с благодарностью.

Relevant urls.py

path('edit_post/<str:id>', views.edit_post, name="edit_post"), #before was pk not id
path('edit_post/', views.edit_post),
path("profile/<str:username>", views.profile, name="profile"),

Javascript

function edit_handeler(element) {
  id = element.getAttribute("data-id");
  document.querySelector(`#post-edit-${id}`).style.display = "block";
  document.querySelector(`#post-content-${id}`).style.display = "none";
  // everything above this works and opens up the form for editing

  edit_btn = document.querySelector(`#edit-btn-${id}`);
  edit_btn.textContent = "Save";
  edit_btn.setAttribute("class", "text-success edit");
  if (edit_btn.textContent == "Save") {
  edit_post(id, document.querySelector(`#post-edit-${id}`).value); //here

  edit_btn.textContent = "Edit";
  edit_btn.setAttribute("class", "text-primary edit");
}}

function edit_post(id, post) {
  const body = document.querySelector(`#post-content-${id}`).value;

  fetch(`/edit_post/${id}`, {
    method: "POST",
    body: JSON.stringify({
    body:body
    })

  }).then((res) => {
    document.querySelector(`#post-content-${id}`).textContent = post;
    document.querySelector(`#post-content-${id}`).style.display = "block";
    document.querySelector(`#post-edit-${id}`).style.display = "none";
    document.querySelector(`#post-edit-${id}`).value = post.trim();
      });
}

Релевантный html

<span id="post-content-{{i.id}}" class="post">{{i.text}}</span> <br> 
            <textarea data-id="{{i.id}}" id="post-edit-{{i.id}}" 
style="display:none;" class="form-control textarea" row="3">{{i.text}}</textarea>

 <button class="btn-btn primary" data-id="{{i.id}}" id="edit-btn-{{i.id}}" 
 onclick="edit_handeler(this)" >Edit</button> <br><br>

views.py

 def edit_post(request, id):

    post = Post.objects.get(id=id)
    form = PostForm(instance=post)
        if request.method == "POST":
            form = PostForm(request.POST, instance=post)
            if form.is_valid():
                form.save()
                return JsonResponse({}, status=201) 

        else:
            if request.method == "GET":           
                form = PostForm(instance=post)
                form_for_post = {'form': PostForm()}

                return render(request, "network/make_post.html", {
                "post": post,
                "form_for_post": form,
            })

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