Using Django, how to reload specific button params without reloading the page?-CodePudding

I am creating a method of likes for a social network-type website. Currently, I can update the like count by reloading the entire page every time the user likes it. But as in the rest of the websites, it does not have this effect. I would like to eliminate the reload, but I have not been able to. I tried an asynchronous call, but it only works on the first element, and I would not know how to proceed to eliminate this update method in the likes.

HTML for each card:

<div >
    <div >
        <a href="{% url "users:detail" post.user.username %}">
            <img  height="35" src="{{ post.profile.picture.url }}" alt="{{ post.user.get_full_name }}">
        </a>
        <div >
            <p style="margin-top: 5px;">{{ post.user.get_full_name  }}</p>
        </div>
    </div>

    <img style="width: 100%;" src="{{ post.photo.url }}" alt="{{ post.title }}">

    <p  >
        <a style="color: #000; font-size: 20px;" id="like_heart" data-id="{{ post.pk }}" data-url="{% url 'posts:likes2' %}">
            <i 
             id="success_like"></i>
        </a> <i id="value_like">{{ post.likes_users.count }}</i>
    </p>
    <p >
        <b>{{ post.title }}</b> - <small>{{ post.created }}</small>
    </p>
</div>

AJAX call:

$(document).ready(function(){
    // ajax for call in post
    $("#like_heart").on("click",function(e){
        // e.preventDefault();
        var id = $(this).data("id");
  
        $.ajax({
        //   url: 'posts/likes2/',
          url: $(this).data("url"),
          data: {
            'pk': id
          },
          dataType: 'json',
          success: function (data) {
            if (data['like']) {
                $('#success_like').removeClass("far fa-heart").addClass("fas fa-heart");
            }
            else {
                $('#success_like').removeClass("fas fa-heart").addClass("far fa-heart");
            }
            var body = '<i id="value_like">'   data['value']  '</i>'
            $('#value_like').html( body );
          }
        });
    })
})

View:

def likes_view(request):
    pk = request.GET.get('pk', None)
    post_id = Posts.objects.get(pk=pk)
    likes_users = User.objects.get(username=request.user)

    if post_id.likes_users.filter(username=request.user).exists():
        post_id.likes_users.remove(likes_users)
    else:
        post_id.likes_users.add(likes_users)
    data = {'like': post_id.likes_users.filter(username=request.user).exists(), 'value': post_id.likes_users.count()}
    return JsonResponse(data)

CodePudding user response：

The issue is about multiple DOM elements having the same id, which not only violates HTML spec but gives you no chance to find desired #value_like.

You can fix it like this, template:

    <div >
        <a href="{% url "users:detail" post.user.username %}">
            <img  height="35" src="{{ post.profile.picture.url }}" alt="{{ post.user.get_full_name }}">
        </a>
        <div >
            <p style="margin-top: 5px;">{{ post.user.get_full_name  }}</p>
        </div>
    </div>

    <img style="width: 100%;" src="{{ post.photo.url }}" alt="{{ post.title }}">

    <p  >
        <a style="color: #000; font-size: 20px;"  data-id="{{ post.pk }}" data-url="{% url 'posts:likes2' %}">
            <i  data-id="{{ post.pk }}"></i>
        </a> <i  data-id="{{ post.pk }}">{{ post.likes_users.count }}</i>
    </p>
    <p >
        <b>{{ post.title }}</b> - <small>{{ post.created }}</small>
    </p>

JS:

$(document).ready(function() {
  // ajax for call in post
  $(".like-link").on("click", function(e) {
    // e.preventDefault();
    var id = $(this).data("id");

    $.ajax({
      //   url: 'posts/likes2/',
      url: $(this).data("url"),
      data: {
        'pk': id
      },
      dataType: 'json',
      success: function(data) {
        if (data['like']) {
          $('.like-toggle[data-id='   id   ']').removeClass("far fa-heart").addClass("fas fa-heart");
        } else {
          $('.like-toggle[data-id='   id   ']').removeClass("fas fa-heart").addClass("far fa-heart");
        }
        var body = '<i id="value_like">'   data['value']   '</i>'
        $('.like-count[data-id='   id   ']').html(body);
      }
    });
  })
})

I added data-id attribute to each element that you need to work with. And now I access them using classes and that data-id. Sorry, I couldn't test it myself, but even I had a type, you've got the idea.