how to use ajax function to send form without page getting refreshed, what am I missing?Do I have to use rest-framework for this?

Question

I\'m trying to send my comment form using ajax, right now when user inserts a comment then whole page gets refreshed. I want this to be inserted nicely without page getting

Answer 1

This is general structure of your comment app. I am assuming you are using Django REST Framework

- Comment
    - models.py
    - forms.py
    - views.py

• Comment Model (models.py)

  from django.db import models
  
  class Comment(models.Model):
      user = models.ForeignKey(MyProfile)
      post = models.ForeignKey(Post)
      parent = models.ForeignKey("self")
      text = models.TextField()
      path = ...
      ...
  

• Comment Form (forms.py)

  from django import forms
  from .models import Comment
  
  class CommentForm(forms.ModelForm):
  
      class Meta:
          model = Comment
          fields = ('text', 'post_id', 'parent_id')
  
      post_id = forms.HiddenInput()
      parent_id = forms.HiddenInput()
  
      def __init__(self, *args, **kwargs):
          super().__init__(*args, **kwargs)
  
          self.fields['text'].label = _('Comment')
          self.fields['post_id'].value = self.instance.post.id
          self.fields['parent_id'].value = self.instance.parent.id
  
          self.helper = FormHelper()
          self.helper.form_show_labels = False
          self.helper.layout = Layout(
              ManageFieldsWrapper(
                  crispy_fields.Field('text')
              ),
              crispy_fields.SubmitField(submit_label='Leave your thoughts')
          )
  

• Comment form view and api view (views.py)

  from rest_framework.views import APIView
  from rest_framework.response import Response
  from rest_framework import status
  from django.http import HttpResponseRedirect
  from django.views.generic.edit import CreateView
  from .forms import CommentForm
  from .models import Comment
  
  
  class CommentFormView(CreateView):
      form_class = CommentForm
  
  
  class CommentAPISubmitView(APIView):
      def post(self, request, format=None):
          #... Your checks goes here ...
          form = CommentForm(request.POST or None)
          if form.is_valid():
              #... Your saving logic here ..
              return HttpResponseRedirect(redirect_url)
          else:
              return HttpResponseRedirect(origin_path)
  
          return Response(status=status.HTTP_400_BAD_REQUEST)
  

• Finally client side code AJAX/JQuery

  $(document).ready(function() {
      $("#commentForAjax").submit(function( event ) {
          $.ajax({
              type:'POST',
              url:'comment/create/',
              data:{
                  post_id:$('#post_id').val(),
                  origin_path:$('#origin_path').val(),
                  parent_id:$('#parent_id').val(),
                  csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
              },
              success: function(response){
  
              }
          });
          event.preventDefault()
      });
  });