Как отправить форму Django и вывести результат без перенаправления страницы?

Здравствуйте, как поживаете? Надеюсь, кто-нибудь сможет мне помочь!

Я прочитал кучу ответов здесь, на stack overflow, но ни один из них не сработал. У меня есть приложение, которое является "социальной сетью". В Divs собственных постов зарегистрированного пользователя есть кнопка "Edit", которая заменяет содержимое поста на Djago форму для редактирования содержимого пользователем. Логика работает, но я хочу, чтобы когда пользователь сохраняет изменения, сам div изменялся, без обновления страницы, как я могу это сделать?

Мой views.py:

@login_required
def edit_post(request, id):

# Query the post
try:
    post = Post.objects.get(id=id)
except Post.DoesNotExist:
    return HttpResponse("Error: The post does not exist.")

# Check if the user is the post's author.
if request.user.id != post.author.id:
        return HttpResponse("Error: You can't edit this post.")

# If request method is POST, modify the post
if request.method == "POST":
    form = editPostForm(request.POST, instance=post)
    if form.is_valid():
        form.save()
        return render(request, "network/postDiv.html", {"post": functions.getPost(id)}, content_type='application/xml')

# If request method is GET: return the form
form = editPostForm(instance=post)
return render(request, "network/editPostForm.html", {"form": form, "id": id})

Мой urls.py:

urlpatterns = [
    path("", views.index, name="index"),
    path("following", views.following, name="following"),
    path("login", views.login_view, name="login"),
    path("logout", views.logout_view, name="logout"),
    path("register", views.register, name="register"),
    path("u/<str:username>",views.profile, name="profile"),
    path("post/post-<int:id>",views.getPost, name="postDiv"),
    path("post/post-<int:id>/edit", views.edit_post, name="editPost"), 
]

Мой HTML:

<h1> All Posts </h1>
    <div class="PostsDiv border rounded">
        <form id="newPostForm" action="{% url 'index' %}" method="post"> 
            {% csrf_token %}
            {{ newPostForm.content.errors}}
            <label for="postContent" class="form-label">New Post:</label>
            {{ newPostForm.content }}
            <input type="submit" value="Submit" class="btn btn-primary">
        </form>
    </div>
    <div class="posts">
        {% for post in page %}
            <div class="PostsDiv border rounded" id="post-{{ post.id }}">
                <p>{{ post.content }}</p>
                <div class="row">
                    <div class="col-1">
                        <span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
                        </svg> {{ post.likes }}</span>
                    </div>
                    <div class="col">
                        {% if post.author == user %}
                            <button class="btn btn-outline-secondary btn-sm editPostButton">Edit</button>
                        {% endif %}
                    </div>
                    <div class="col">

                    </div>
                </div>
                
                <footer class="blockquote-footer">
                    Posted by <cite title="Source Title"><a href="{% url 'profile' post.author %}">{{ post.author }}</a> </cite>in<cite tittle="Source Title"> {{ post.dateTime}}</cite>
                </footer>
            </div>
        {% endfor %}
    </div>

Мой JS:

document.addEventListener("DOMContentLoaded", function () {
  // Add listeners to the "Edit Post" buttons
  document.querySelectorAll(".editPostButton").forEach((button) =>
    button.addEventListener("click", function () {
      postDiv = button.parentElement.parentElement.parentElement;
      postDivClone = postDiv.cloneNode(true);
      showEditPostForm(postDivClone);
    })
  );
});

function showEditPostForm(postDiv) {
  fetch(`/post/${postDiv.id}/edit`)
    .then((response) => response.text())
    .then((response) => {
      div = document.querySelector(`#${postDiv.id}`);
      div.innerHTML = response;
    })

  $('.editPostForm').submit(function() {
      $.ajax({
          data: $(this).serialize(), 
          type: $(this).attr('method'), 
          url: $(this).attr('action'), 
          success: function(response) { 
              $(`#${postDiv.id}`).html(response.text()); 
          }
      });
      return false; 
  });
}

Форма:

class editPostForm(forms.ModelForm):
class Meta:
    model = Post
    fields = ['content']
    widgets = {
        'content': forms.Textarea(attrs={'class': 'form-control textarea'})
    }

А моя модель:

class Post(models.Model):
    author = models.ForeignKey("User", on_delete=models.CASCADE, related_name="author")
    content = models.TextField()
    dateTime = models.DateTimeField()

Я пытаюсь использовать jquery для достижения того, что я хочу, но я не понимаю, почему это не работает. Кто-нибудь может мне помочь?