Django Endlesss pagination breaks buttons genereated by endlesss pagination - django

Question

I have endless pagination working on my site for posts.
Each post has a like and dislike button which works using ajax.
The first set of posts have working buttons but all posts delivered with pagination don't have working buttons. When clicking the buttons they don't even run the ajax to send a query to my views.py file but the first set of posts have working ones.
urls.py
path("likepost/", user_views.like_post_view, name='like_post'),
path("dislikepost/", user_views.dislike_post_view, name='dislike_post'),
views.py file
sort = request.GET.get("sort")
if sort=="newest":
posts = Post.objects.filter(deleted=False).order_by('-date_posted')
sort_type = "newest"
if sort=="oldest":
posts = Post.objects.filter(deleted=False).order_by('date_posted')
sort_type = "oldest"
if sort=="top-alltime":
posts = Post.objects.filter(deleted=False).annotate(like_count=(Count('like_post')-Count("dislike_post"))).order_by('-like_count')
sort_type = "top-alltime"
if sort==None or sort=="top-today":
today = datetime.now().date()
today_start = datetime.combine(today, time())
posts = Post.objects.filter(deleted=False, date_posted__gte=today_start).annotate(like_count=(Count('like_post')-Count("dislike_post"))).order_by('-like_count')
sort_type = "top-today"
if sort=="top-week":
current_week = date.today().isocalendar()[1]
posts = Post.objects.filter(deleted=False, date_posted__week=current_week).annotate(like_count=(Count('like_post')-Count("dislike_post"))).order_by('-like_count')
sort_type = "top-week"
page = request.GET.get('page', 1)
paginator = Paginator(posts, 4)
trending_tags = Post.tags.most_common()[:5]
try:
posts_given = paginator.page(page)
except PageNotAnInteger:
posts_given = paginator.page(1)
except EmptyPage:
posts_given = paginator.page(paginator.num_pages)
context = {
"trending_tags": trending_tags,
"posts_given": posts_given,
"sort": sort_type
}
return render(request, "users/index.html", context)
#login_required
#require_GET
def like_post_view(request):
print("LIKE REQUESTED!!!!!!!!!!!!!")
if request.method == 'GET':
user = request.user
user = User.objects.get(username=user)
post_id = request.GET.get('post_id', None)
post = Post.objects.get(id=post_id)
if like_post.objects.filter(user=user, post=post).exists():
# user has already liked this post
# remove like/user
like_post.objects.filter(user=user, post=post).delete()
#return -1
return HttpResponse(-1)
else:
# add a new like for the post
like_post.objects.create(post=post, user=user)
if dislike_post.objects.filter(user=user, post=post).exists():
dislike_post.objects.filter(user=user, post=post).delete()
return HttpResponse(+2)
return HttpResponse(+1)
#login_required
#require_GET
def dislike_post_view(request):
print("DISLIKE REQUESTED!!!!!!!!!!!!!")
if request.method == 'GET':
user = request.user
user = User.objects.get(username=user)
post_id = request.GET.get('post_id', None)
post = Post.objects.get(id=post_id)
if dislike_post.objects.filter(user=user, post=post).exists():
# user has already disliked this post
# remove dislike/user
dislike_post.objects.filter(user=user, post=post).delete()
return HttpResponse(+1)
else:
# add a new dislike for the post
dislike_post.objects.create(post=post, user=user)
if like_post.objects.filter(user=user, post=post).exists():
like_post.objects.filter(user=user, post=post).delete()
return HttpResponse(-2)
return HttpResponse(-1)
template
{% load static %}
{% block content %}
<h1>Homepage</h1>
<div class="infinite-container" id="infinite-container" style="max-width:700px;width:100%;margin-left:auto;margin-right:auto;">
<form action="/action_page.php">
{% csrf_token %}
<div style="display:inline-block;">
<h5 style="margin-left:10px;">Sort by</h5>
<select name="sort" class="sort_by" id="sort_by" style="margin-left:10px;">
<option value="newest">Newest</option>
<option value="top-today" selected="selected">Top Today</option>
<option value="top-week">Top This Week</option>
<option value="top-alltime">Top All Time</option>
<option value="oldest">Oldest</option>
</select>
</div>
</form>
{% for post in posts_given %}
<div class="post infinite-item" style="background-color:#494a4d;border-radius: 8px; color: white;padding:10px;margin:10px;">
<h2>{{ post.title }}<h2>
<hr>
<img src="/uploads/{{ post.image }}" alt="{{ post.image }}" style="max-width:100%; max-height:500px;">
<hr>
<div class="row-post">
<div class="column-post-left">
<h4 style="text-align: left;">by {{ post.user.username }} | {{ post.date_posted | timesince }} ago {% if request.user.is_authenticated and post.user == request.user %} | edit{% else %} | report{% endif %}</h4>
<h5 style="word-wrap: break-word;word-break: break-word;">{% for tag in post.tags.all %} #{{ tag }}{% endfor %}</h5>
<h5>{{ post.comment_count }} comments</h5>
</div>
<div class="column-post-right">
<input src="{% static "memeplaza/rocket_white.png" %}" type="image" style="max-width:50px;max-height:50px;" class="like" name="{{ post.id }}" value="Like"/>
<p style="font-size:22px;" id="{{ post.id }}">{{ post.like_count }}</p>
<input src="{% static "memeplaza/flash_white.png" %}" style="max-width:50px;max-height:50px;" type="image" class="dislike" name="{{ post.id }}" value="Dislike" />
</div>
</div>
</div>
{% endfor %}
</div>
{% if posts_given.has_next %}
<a class="infinite-more-link" href="?sort={{ sort }}&page={{ posts_given.next_page_number }}"></a>
{% endif %}
<script>
var infinite = new Waypoint.Infinite({element: $('.infinite-container')[0]});
$('.sort_by').change(function(){
var sort_type = $('#sort_by :selected').val();
window.location = "/?sort="+sort_type;
})
$('.like').click(function(){
var id = $(this).attr('name');
console.log("Like button pressed!");
$.ajax({
type: "GET",
url: "{% url 'like_post' %}",
data: {'post_id': $(this).attr('name'), 'csrfmiddlewaretoken': '{{ csrf_token }}'},
dataType: "json",
success: function(response){
var score = $("#" + id).text();
score = score.split(" ")[0];
score = parseInt(score) + parseInt(response);
$("#" + id).text(score);
}
});
})
$('.dislike').click(function(){
var id = $(this).attr('name');
console.log("disLike button pressed!");
$.ajax({
type: "GET",
url: "{% url 'dislike_post' %}",
data: {'post_id': $(this).attr('name'), 'csrfmiddlewaretoken': '{{ csrf_token }}'},
dataType: "json",
success: function(response){
var score = $("#" + id).text();
score = score.split(" ")[0];
score = parseInt(score) + parseInt(response);
$("#" + id).text(score);
}
});
})
</script>
{% if sort is not empty %}
<script>
$(document).ready(function(){
$("#sort_by").val("{{ sort }}");
});
</script>
{% endif %}
{% endblock content %}```

Answer 1

You should use $('selector').on for binding events to elements that do not exist yet
$('#infinite-container').on('click', '.like', function() {
...
})
$('#infinite-container').on('click', '.dislike', function() {
...
})
Using $('.like').click will only bind the event handler to elements that currently exist on the page