Django, Ajax et JS. Comment empêcher les recharges de page et les sauts en haut de la page lorsque je soumets un commentaire

Dec 01 2020

J'ai suivi une solution sur la façon d'obtenir le formulaire de commentaire Django à soumettre sans recharger la page et sauter en haut de la page. J'ai essayé de nombreuses solutions en ligne et hors ligne mais toujours pas de solution.

Le formulaire fonctionne correctement, le seul problème est le rechargement de la page lors de la soumission.

Je suis nouveau sur Django Backend et Ajax, je serai heureux si quelqu'un peut vous aider sur la façon de gérer cela. Merci d'avance.

JS AJAX

$( document ).ready(function() { $(`.comment-form${post_id}`).submit(function() { $.ajax({
              data: $(this).serialize(), type: $(this).attr('method'), 
              url: $(this).attr('action'), success: function(response) { $();
              },
              error: function(response) {
                console.log('error', response)
             }
          });
          return false;
    });
});

models.py

from django.db import models
from django.contrib.auth.models import User

# Create your models here.
from django.db import models

class Comment(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    post = models.ForeignKey(Post, on_delete=models.CASCADE)
    body = models.TextField(max_length=300)
    updated = models.DateTimeField(auto_now=True)
    created = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return str(self.pk)
VIEWS

from django.shortcuts import render, redirect
from .models import Post, Like
from django.contrib.auth.models import User
from .forms import CommentModelForm
from django.http import JsonResponse

# Create your views here.

def post_comment_create_and_list_view(request):
    qs = Post.objects.all()
    user = User.objects.get(pk=request.user.pk)


    #Comment form
    c_form = CommentModelForm()
        
    if 'submit_c_form' in request.POST:
        c_form = CommentModelForm(request.POST)
        if c_form.is_valid():
            instance = c_form.save(commit=False)
            instance.user = user
            instance.post = Post.objects.get(id=request.POST.get('post_id'))
            instance.save()
            c_form = CommentModelForm()

    
    context = {
    'qs': qs,
    'user':user,
    'c_form':c_form,
    }

    return render(request, 'posts/main.html', context)
HTML

<form action="" method="POST" class="comment-form" id='{{obj.id}}'>
{% csrf_token %}
  <div class="input-group">
    <input type="hidden" name="post_id" value={{obj.id}}> 
    
    {{ c_form }}
    <div class="input-group-append">
      <button type="submit" name="submit_c_form" class="btn btn-md u-btn-white g-color-red g-text-underline-hover g-brd-gray-light-v3 g-brd-none g-brd-top">Post</button>
      </div> 
    </div>
</form>

Réponses

Hisham___Pak Dec 01 2020 at 01:15

Vous empêchez le rechargement de la page en ajoutant e.preventDefault();

$(`.comment-form${post_id}`).submit(function(e) { // Note here too, on submit a function in created where we catch e
      e.preventDefault(); // Here it is e is an event which is passed on clicking button
      $.ajax({ data: $(this).serialize(), 
          type: $(this).attr('method'), url: $(this).attr('action'), 
          success: function(response) {
              $();
          },
          error: function(response) {
            console.log('error', response)
         }
      });
      return false;
    });