After creating a blog pot using Ajax I cannot make any other Ajax calls and JsonResponse return empty string

Question

I have built a website where users can post. After using Ajax to create the post object it seems that I cannot like it. Basically my django view returns an empty JsonData. So I need to refresh the page for it to work. Below are what I'm using to submit my ajax calls.

for creating a post:

var SaveForm =  function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    var form = new FormData(this);
    $.ajax({
        url: $(this).attr('data-url'),
        type: $(this).attr('method'),
        data: form,
        cache: false,
        processData: false,
        contentType: false,
        dataType: 'json',
        success: function(data){
            if(data.form_is_valid){
                $('#post-list div').html(data.posts);
                $('#modal-post').modal('hide');
            } else {
                $('#modal-post .modal-content').html(data.html_form)
            }
            $('.post-like-form').on("click", ".likeBtn", function (e) {
                var like_count = $(".input-like-count", this).val();
                $(".like-count-d").text(like_count);
                e.preventDefault();
                if($(this).find("i").hasClass("fa-thumbs-up")){
                    like_count++;
                    $(".input-like-count", this).val(like_count);
                    $("i", this).removeClass("fa-thumbs-up").addClass("fa-thumbs-down")
                    $(".like-count", this).text(like_count);
                    $(".like-count-d").text(like_count);
                } else {
                    like_count--;
                    $(".input-like-count", this).val(like_count);
                    $("i", this).removeClass("fa-thumbs-down").addClass("fa-thumbs-up")
                    $(".like-count", this).text(like_count);
                    $(".like-count-d").text(like_count);
                }
                var tk = $(this).attr("data-token");
                var pg = $(this).attr('value');
                $.ajax({
                    type: "POST",
                    url: $(this).attr("data-url"),
                    dataType: 'json',
                    data: {'guid_url': pg, 'csrfmiddlewaretoken':tk },
                    success: function (data){
                        var like_count = parseInt($(".like-count", this).text());
                        if($(this).find("i").hasClass("fa-thumbs-up")){
                            like_count++;
                            $(".input-like-count", this).val(like_count);
                            $("i", this).removeClass("fa-thumbs-up").addClass("fa-thumbs-down")
                            $(".like-count", this).text(like_count);
                        } else {
                            like_count--;
                            $(".input-like-count", this).val(like_count);
                            $("i", this).removeClass("fa-thumbs-down").addClass("fa-thumbs-up")
                            $(".like-count", this).text(like_count);
                        }
                        $("#post-detail-container div").html(data.post_detail)
                    },
                    error: function(rs, e){
                        console.log(rs.responeText);
                    },
                });
            });
        }
    })
    return false;
}

Which successuly creates the post object (It takes a lot of time basically my Ajax request takes way to long to be created). After the post is created I cannot like the posts anymore unless I refresh the page!

Here is my like js ajax call (Which I believe it's not causing the issue as it does work if you refersh the page:

$(document).ready(function (e) {
    $('.post-like-form').on("click", ".likeBtn", function (e) {
        var like_count = $(".input-like-count", this).val();
        $(".like-count-d").text(like_count);
        e.preventDefault();
        if($(this).find("i").hasClass("fa-thumbs-up")){
            like_count++;
            $(".input-like-count", this).val(like_count);
            $("i", this).removeClass("fa-thumbs-up").addClass("fa-thumbs-down")
            $(".like-count", this).text(like_count);
            $(".like-count-d").text(like_count);
        } else {
            like_count--;
            $(".input-like-count", this).val(like_count);
            $("i", this).removeClass("fa-thumbs-down").addClass("fa-thumbs-up")
            $(".like-count", this).text(like_count);
            $(".like-count-d").text(like_count);
        }
        var tk = $(this).attr("data-token");
        var pg = $(this).attr('value');
        $.ajax({
            type: "POST",
            url: $(this).attr("data-url"),
            dataType: 'json',
            data: {'guid_url': pg, 'csrfmiddlewaretoken':tk },
            success: function (data){
                var like_count = parseInt($(".like-count", this).text());
                if($(this).find("i").hasClass("fa-thumbs-up")){
                    like_count++;
                    $(".input-like-count", this).val(like_count);
                    $("i", this).removeClass("fa-thumbs-up").addClass("fa-thumbs-down")
                    $(".like-count", this).text(like_count);
                } else {
                    like_count--;
                    $(".input-like-count", this).val(like_count);
                    $("i", this).removeClass("fa-thumbs-down").addClass("fa-thumbs-up")
                    $(".like-count", this).text(like_count);
                }
                $("#post-detail-container div").html(data.post_detail)
            },
            error: function(rs, e){
                console.log(rs.responeText);
            },
        });
    });
})

These are my views for liking and creating a post:

@login_required
def post_create(request):
    data = dict()
    if request.method == 'POST':
        form = PostForm(request.POST)
        if form.is_valid():  
            post = form.save(False)
            post.author = request.user
            post.save()
            if request.FILES is not None:
                added = []
                images = request.FILES.getlist('images[]')
                for i in images:
                    if i not in added:
                        print(i)
                        image_instance = Images.objects.create(image=i,post=post)
                        image_instance.save()
                        added.append(i)
            data['form_is_valid'] = True
            posts = Post.objects.all()
            posts = Post.objects.order_by('-last_edited')
            data['posts'] = render_to_string('home/posts/home_post.html',{'posts':posts},request=request)
        else:
            data['form_is_valid'] = False
    else:
        form = PostForm      
    context = {
    'form':form,
    }
    data['html_form'] = render_to_string('home/posts/post_create.html',context,request=request)
    return JsonResponse(data) 

@login_required
def post_like(request,guid_url):
    data = dict()
    post = get_object_or_404(Post, guid_url=guid_url)
    user = request.user
    if post.likes.filter(id=user.id).exists():
        post.likes.remove(user)
    else:
        post.likes.add(user)
    #posts = Post.objects.all()
    #posts = Post.objects.order_by('-last_edited')
    #data['posts'] = render_to_string('home/posts/home_post.html',{'posts':posts},request=request)
    if request.is_ajax():
        guid_url = post.guid_url
        data['post_detail'] = render_to_string('home/posts/post_detail.html',{'post':post,'guid_url':guid_url},request=request)
        return JsonResponse(data)

what happens is that after posting when I like a post it goes to the post_like url instead of just liking the post. I do not know what is causing this issue as I get no errors in either console or terminal.

I appreciate all the help in advance!

Answer 1

just notice that it need a semicolon with a line in inner ajax.

data['posts'] = render_to_string('home/posts/home_post.html',{'posts':posts},request=request);