У меня есть страница сообщений с бесконечной прокруткой. Для каждого сообщения есть кнопка «Нравится», которая работает через 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 «Нравится» еще не готовы.