Django Ajax не работает в бесконечной прокрутке - PullRequest
0 голосов
/ 13 июля 2020

У меня есть страница сообщений с бесконечной прокруткой. Для каждого сообщения есть кнопка «Нравится», которая работает через ajax.

Для первых 3 сообщений кнопка «Нравится» работает (у меня есть 3 сообщения, определенные в параметрах пагинации). Но для другого сообщения, которое загружается с бесконечной прокруткой, кнопка вроде не работает. Я нашел похожие вопросы и ответы, но решения в моем случае не работают. Буду признателен за любые предложения.

Функции просмотра, отображение сообщений пользователя:


    def user_detail(request, pk):
    
        main = Main.objects.get(pk=1)
        user = CustomUser.objects.get(pk=pk,is_active=True)
        posts = user.posts_set.all().order_by('-created_at')
        paginator = Paginator(posts, 3)
    
        page = request.GET.get('page')
    
        supporters = CustomUser.objects.filter(team = user.team)
        
    
        try:
            posts = paginator.page(page)
            context = {'section': 'people','user':user, 'posts':posts, 'main':main,'supporters':supporters}
    
        except PageNotAnInteger:
            # Если переданная страница не является числом, возвращаем первую.
            posts = paginator.page(1)
            context = {'section': 'people','user':user, 'posts':posts, 'main':main,'supporters':supporters}
    
        except EmptyPage:
            if request.is_ajax():
                # Если получили AJAX-запрос с номером страницы, большим, чем их количество,
                # возвращаем пустую страницу.
                return HttpResponse('')
    
            posts = paginator.page(paginator.num_pages) 
            context = {'section': 'people','user':user, 'posts':posts, 'main':main,'supporters':supporters}
    
        if request.is_ajax():
            return render(request, 'users/posts_ajax.html', context)
    
        return render(request, 'users/user-detail2.html', context) 

И код Ajax для бесконечной прокрутки и кнопки Like:

    {% block domready %}
    //infinite scroll code 
    var page = 1;
      var empty_page = false;
      var block_request = false;
    
      $(window).scroll(function() {
        var margin = $(document).height() - $(window).height() - 200;
        if  ($(window).scrollTop() > margin && empty_page == false && block_request == false) {
         block_request = true;
          page += 1;
          $.get('?page=' + page, function(data) {
           if(data == '') {
              empty_page = true;
            }
            else {
              block_request = false;
              $('#image-list').append(data);
            }
          });
        }
      });
      
      //User follow code
       $('a.follow').click(function(e){
        e.preventDefault();
        const $clickedFollowButton = $( this );
        
        $.post('{% url "user_follow" %}',
        
          {
            id: $clickedFollowButton.data('id'),
            action: $clickedFollowButton.data('action')
          },
          function(data){
            if (data['status'] == 'ok') {
              var previous_action = $clickedFollowButton.data('action');
    
              // toggle data-action
              $clickedFollowButton.data('action', previous_action == 'follow' ? 'unfollow' : 'follow');
              
              // toggle link text
              $clickedFollowButton.text(previous_action == 'follow' ? 'Unfollow' : 'Follow');
    
              // update total followers
              const $totalFollowers = $clickedFollowButton.prev('span.count-f').children('.total-f');
              var previous_followers = parseInt(
                $('span.count-f .total-f').text());
              
               $totalFollowers.text(previous_action == 'follow' ? previous_followers + 1 : previous_followers - 1);
            }
          }
        );
      });  
    
      //Like code
      $('a.like').click(function(e){
        e.preventDefault();
        const $clickedButton = $( this );
        $.post('/like/',
          {
            id: $clickedButton.data('id'),
            action: $clickedButton.data('action')
          },
          function(data){
            if (data['status'] == 'ok')
            {
              var previous_action = $clickedButton.data('action');
    
              // toggle data-action
              $clickedButton.data('action', previous_action == 'like' ? 'unlike' : 'like');
              // toggle link text
              $clickedButton.text(previous_action == 'like' ? 'Unlike' : 'Like');
    
              // update total likes
              const $total = $clickedButton.prev('span.count').children('.total');
        var previous_likes = parseInt($total.text());
        $total.text(previous_action == 'like' ? previous_likes + 1 : previous_likes - 1);
            }
          }
        );
      });
    
    {% endblock %}

Очевидно проблема в том, что сообщения после первых 3 загружаются через ajax, а их кнопки ajax «Нравится» еще не готовы.

...