Ajax pagination with class based view - python-3.x

Question

I am trying apply ajax with pagination on my app .Using Class based Listview
#views.py
class HomePage(ListView):
model = Video
template_name = 'index.html'
def get_context_data(self, **kwargs):
context = super(HomePage, self).get_context_data(**kwargs)
videos = Video.objects.filter(category='sub')
paginator = Paginator(videos, 5)
page = self.request.GET.get('page2')
try:
videos = paginator.page(page)
except PageNotAnInteger:
videos = paginator.page(1)
except EmptyPage:
videos = paginator.page(paginator.num_pages)
context['videos'] = videos
if self.request.is_ajax():
html = render_to_string('videos/index.html', context, request=self.request)
print(html)
return JsonResponse({'form' : html })
The Home template script
<script type="text/javascript">
$(document).ready(function(event){
$(document).on('click', '.page-link', function(event){
event.preventDefault();
var page = $(this).attr('href');
console.log(page)
$.ajax({
type: 'GET',
url: ,
data: {'page':'{{ page.number }}'},
dataType: 'json',
success: function(response){
$('#ajax_page_template').html(response['form'])
console.log("success")
},
error: function(rs, e){
console.log(rs.responseText);
},
});
});
});
</script>
1.The current error is in views.py local variable 'html' referenced before assignment
2.And what should I put in ajax --url: I tried to put url:page but that return url to 127.0.0.1:8000/?page=2/?page=2.

Answer 1

I had the same problem and got it working:
In views.py add "paginate_by = 4" and def get_template_names:
class HomePage(ListView):
...
paginate_by = 4
def get_template_names(self):
template_name = 'list.html'
if self.request.is_ajax():
template_name = 'list_ajax.html'
return template_name
Use 2 templates:
New list_ajax.html with the for loop:
{% for video in video_list %}
...
{% endfor %}
Existing template list.html:
<div id="image-list">
{% include 'list_ajax.html' %}
</div>
In the script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie#2.2.1/src/js.cookie.min.js"></script>
<script>
var csrftoken = Cookies.get('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
$(document).ready(function(){
var page = 1;
var empty_page = false;
var block_request = false;
var num_pages=parseInt('{{ page_obj.paginator.num_pages }}')
$(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;
if(num_pages-page >= 0) {
$.get('?page=' + page, function(data) {
block_request = false;
console.log(data)
$('#image-list').append(data);
}
);
}}
});
});
</script>

Answer 2

You have to declare the html variable before you use it. Like this:
html = ""
if self.request.is_ajax():
html = render_to_string('videos/index.html', context, request=self.request)
And the url you should put in the ajax call is the one corresponding to the relevant view (HomePage).
And change the following line:
return JsonResponse({'form' : html })
To:
render(request,'videos/index.html',JsonResponse(html))