Querying Django database with Jquery and Ajax

Question

I have a POST request that passes data to my database when the form is submitted.

Photo of what I mean:

home.html

 <script type="text/javascript">
        $(document).ready(function(){
            var postForm = $(".form-post")

            //POSTING DATA INTO DATABASE
            postForm.submit(function(event){
                event.preventDefault();
                var thisForm =$(this)
                var actionEndPoint = thisForm.attr("action");
                var httpMethod = thisForm.attr("method");
                var formData = thisForm.serialize();

                $.ajax({
                    url: actionEndPoint,
                    method: httpMethod,
                    data: formData,
                    success:function(data){
                        console.log(data)
                        $(".form-post")[0].reset();

                        //I WANT TO PASS THE NEWLY ADDED DATA TO DISPLAY WITHOUT REFRESH
                        $.ajax({
                        type: 'GET',
                        url: '{% url "postInfo" %}',
                        dataType : 'json',
                        success: function(cdata){
                            $.each(cdata, function(id,posts){
                            $('#cb').append('<li>' +posts['fields'].title+ '  ' +posts['fields'].body+ '</li>');
                        });
                    }
                    });

                    },
                    error:function(errData){

                    }

                })
            })

        })
    </script>

As it is now it shows multiple of the same posts every time I add a post.

This is my views

views.py

def postInfo(request): # GET REQUEST
    if request.method == 'GET' and request.is_ajax():
        mytitle = Post.objects.all().order_by('-date_posted')
        response = serializers.serialize("json", mytitle)
        return HttpResponse(response, content_type='application/json')



def posting(request):  # POST REQUEST
    if request.method == 'POST' and request.is_ajax():
        title = request.POST.get('postTitle')
        content = request.POST.get('postContent')
        post = Post()
        post.title = title
        post.body = content
        post.author = request.user
        post.save()
        return HttpResponse('') 

models.py

class Post(models.Model):
    title = models.CharField(max_length=50)
    body = models.TextField()
    date_posted = models.DateTimeField(default=timezone.now)
    author = models.ForeignKey(User, on_delete=models.CASCADE)

    def __str__(self):
        return self.title

How can I make it so it just shows the post that I have added + what's in the database without showing multiple of the same posts? Thanks for any help.

Answer 1

You could have the POST view return the serialized instance as follows. It may not be entirely correct as I don't know what you're using for serialization, but it should give you an idea.

If you don't like that, you could inject the id's of the post as a data-post-id attribute in html, then only append it to $('#cb') if it doesn't exist.

def posting(request):  # POST REQUEST
    if request.method == 'POST' and request.is_ajax():
        title = request.POST.get('postTitle')
        content = request.POST.get('postContent')
        post = Post()
        post.title = title
        post.body = content
        post.author = request.user
        post.save()
        response = serializers.serialize("json", post)
        return HttpResponse(response, content_type='application/json')

$.ajax({
    url: actionEndPoint,
    method: httpMethod,
    data: formData,
    success:function(data){
        console.log(data)
        $(".form-post")[0].reset();
        $('#cb').append('<li>' +data['fields'].title+ '  ' +data['fields'].body+ '</li>');
    }
    });

    },
    error:function(errData){

    }

})

Answer 2

You are getting multiples because you are asking for every post in the database to be sent upon the success of the POST request.

Assuming cdata is an array, you could do something like

let innerHtml;
cdata.forEach(function(obj) {
    innerHtml.append(`<li>${data['fields'].title} ${data['fields'].body}</li>`);
});

$('#cb').html(innerHtml);

$('#cb').html(...) will replace the HTML content of the element rather than add to it so you will not get any duplicate entries. Also using a template literal in the append method can make things a little cleaner.

Or you could simply send only the post you have just created in your posting view in it's HttpResponse. This will also be faster as you reduce the number of requests made when the form is submitted.

views.py

# Other endpoints
...

def posting(request):  # POST REQUEST
    if request.method == 'POST' and request.is_ajax():
        title = request.POST.get('postTitle')
        content = request.POST.get('postContent')
        post = Post()
        post.title = title
        post.body = content
        post.author = request.user
        post.save()

        # Send new post as response
        response = serializers.serialize('json', post)
        return HttpResponse(response, content_type='application/json') 

home.html

<script type="text/javascript">
  $(document).ready(function(){
    var postForm = $(".form-post");

    // POSTING DATA INTO DATABASE
    postForm.submit(function(event){
      event.preventDefault();
      var thisForm = $(this);
      var actionEndPoint = thisForm.attr("action");
      var httpMethod = thisForm.attr("method");
      var formData = thisForm.serialize();

      $.ajax({
        url: actionEndPoint,
        method: httpMethod,
        data: formData,
        success: function(data) {
          console.log(data);
          $(".form-post")[0].reset();

          // Add the new post to $('#cb')
          $('#cb')
            .append(`<li>${data['fields'].title} ${data['fields'].body}</li>`);         
        },
        error: function(errData){
          // Do something
        }
      })
    })

  })
</script>