nicholaskajoh · November 27, 2023 10:01 · May 21, 2020 · Jan 3, 2019 · Jan 3, 2019 · Jan 3, 2019
diff --git a/script.js b/script.js
@@ -20,7 +20,7 @@
           link.hide();
         }
         // append html to the posts div
-        $('#div').append(data.posts_html);
+        $('#posts').append(data.posts_html);
       },
       error: function(xhr, status, error) {
         // shit happens friends!

diff --git a/index.html b/index.html
@@ -1,8 +1,8 @@
 <html>
   <head>
     <script type="text/javascript">
-      // needed when making post requests in Django
-      // we'll use this for the ajax request in script.js
+      // A CSRF token is required when making post requests in Django
+      // To be used for making AJAX requests in script.js
       window.CSRF_TOKEN = "{{ csrf_token }}";
     </script>
   </head>

diff --git a/views.py b/views.py
@@ -5,7 +5,7 @@
 from django.http import JsonResponse
 
 def index(request):
-	posts = Post.objects.all()[:5]
+    posts = Post.objects.all()[:5]
     return render(request, 'myapp/index.html', {'posts': posts})
 
 def lazy_load_posts(request):

diff --git a/models.py b/models.py
@@ -2,6 +2,5 @@
 from django.db import models
 
 class Post(models.Model):
-  # Gonna pass on this one. You know what to do...
-  # https://docs.djangoproject.com/en/dev/topics/db/models/
-  pass
+    title = models.CharField()
+    content = models.TextField()
diff --git a/urls.py b/urls.py
@@ -1,6 +1,6 @@
 from myapp import views
 
 urlpatterns = [
-  url(r'^$', views.index, name='index'),
-  url(r'^lazy_load_posts/$', views.lazy_load_posts, name='lazy_load_posts'),
+    url(r'^$', views.index, name='index'),
+    url(r'^lazy_load_posts/$', views.lazy_load_posts, name='lazy_load_posts'),
 ]
diff --git a/views.py b/views.py
@@ -5,27 +5,27 @@
 from django.http import JsonResponse
 
 def index(request):
-  posts = Post.objects.all()[:5]
-  return render(request, 'myapp/index.html', {'posts': posts})
+	posts = Post.objects.all()[:5]
+    return render(request, 'myapp/index.html', {'posts': posts})
 
 def lazy_load_posts(request):
-  page = request.POST.get('page')
-  posts = Post.objects.all()
+    page = request.POST.get('page')
+    posts = Post.objects.all()
 
-  # use Django's pagination
-  # https://docs.djangoproject.com/en/dev/topics/pagination/
-  results_per_page = 5
-  paginator = Paginator(posts, results_per_page)
-  try:
-    posts = paginator.page(page)
-  except PageNotAnInteger:
-    posts = paginator.page(2)
-  except EmptyPage:
-    posts = paginator.page(paginator.num_pages)
-		
-  # build a html posts list with the paginated posts
-  posts_html = loader.render_to_string('myapp/posts.html', {'posts': posts})
-  
-  # package output data and return it as a JSON object
-  output_data = {'posts_html': posts_html, 'has_next': posts.has_next()}
-  return JsonResponse(output_data)
+    # use Django's pagination
+    # https://docs.djangoproject.com/en/dev/topics/pagination/
+    results_per_page = 5
+    paginator = Paginator(posts, results_per_page)
+    try:
+        posts = paginator.page(page)
+    except PageNotAnInteger:
+        posts = paginator.page(2)
+    except EmptyPage:
+        posts = paginator.page(paginator.num_pages)
+
+    # build a html posts list with the paginated posts
+    posts_html = loader.render_to_string('myapp/posts.html', {'posts': posts})
+
+    # package output data and return it as a JSON object
+    output_data = {'posts_html': posts_html, 'has_next': posts.has_next()}
+    return JsonResponse(output_data)
diff --git a/views.py b/views.py
@@ -10,7 +10,7 @@ def index(request):
 
 def lazy_load_posts(request):
   page = request.POST.get('page')
-  posts = Post.objects.all()[:5] # get just 5 posts
+  posts = Post.objects.all()
 
   # use Django's pagination
   # https://docs.djangoproject.com/en/dev/topics/pagination/

diff --git a/script.js b/script.js
@@ -21,7 +21,7 @@
         }
         // append html to the posts div
         $('#div').append(data.posts_html);
-	    },
+      },
       error: function(xhr, status, error) {
         // shit happens friends!
       }

diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
       // needed when making post requests in Django
       // we'll use this for the ajax request in script.js
       window.CSRF_TOKEN = "{{ csrf_token }}";
-	  </script>
+    </script>
   </head>
   <body>
     <h2>My Blog Posts</h2>

diff --git a/script.js b/script.js
@@ -9,8 +9,8 @@
       data: {
         'page': page,
         'csrfmiddlewaretoken': window.CSRF_TOKEN // from index.html
-	    },
-	    success: function(data) {
+      },
+      success: function(data) {
         // if there are still more pages to load,
         // add 1 to the "Load More Posts" link's page data attribute
         // else hide the link

diff --git a/urls.py b/urls.py
@@ -1,6 +1,6 @@
 from myapp import views
 
 urlpatterns = [
-	url(r'^$', views.index, name='index'),
-	url(r'^lazy_load_posts/$', views.lazy_load_posts, name='lazy_load_posts'),
+  url(r'^$', views.index, name='index'),
+  url(r'^lazy_load_posts/$', views.lazy_load_posts, name='lazy_load_posts'),
 ]
diff --git a/views.py b/views.py
@@ -5,7 +5,7 @@
 from django.http import JsonResponse
 
 def index(request):
-	posts = Post.objects.all()[:5]
+  posts = Post.objects.all()[:5]
   return render(request, 'myapp/index.html', {'posts': posts})
 
 def lazy_load_posts(request):
@@ -16,12 +16,12 @@ def lazy_load_posts(request):
   # https://docs.djangoproject.com/en/dev/topics/pagination/
   results_per_page = 5
   paginator = Paginator(posts, results_per_page)
-	try:
-		posts = paginator.page(page)
-	except PageNotAnInteger:
-		posts = paginator.page(2)
-	except EmptyPage:
-		posts = paginator.page(paginator.num_pages)
+  try:
+    posts = paginator.page(page)
+  except PageNotAnInteger:
+    posts = paginator.page(2)
+  except EmptyPage:
+    posts = paginator.page(paginator.num_pages)
 
   # build a html posts list with the paginated posts
   posts_html = loader.render_to_string('myapp/posts.html', {'posts': posts})

diff --git a/views.py b/views.py
@@ -1,6 +1,7 @@
 from django.shortcuts import render
 from myapp.models import Post
 from django.template import loader
+from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
 from django.http import JsonResponse
 
 def index(request):

diff --git a/urls.py b/urls.py
@@ -2,5 +2,5 @@
 
 urlpatterns = [
 	url(r'^$', views.index, name='index'),
-  url(r'^lazy_load_posts/$', views.lazy_load_posts, name='lazy_load_posts'),
+	url(r'^lazy_load_posts/$', views.lazy_load_posts, name='lazy_load_posts'),
 ]
diff --git a/views.py b/views.py
@@ -4,7 +4,8 @@
 from django.http import JsonResponse
 
 def index(request):
-  return render(request, 'myapp/index.html')
+	posts = Post.objects.all()[:5]
+  return render(request, 'myapp/index.html', {'posts': posts})
 
 def lazy_load_posts(request):
   page = request.POST.get('page')
@@ -20,7 +21,7 @@ def lazy_load_posts(request):
 		posts = paginator.page(2)
 	except EmptyPage:
 		posts = paginator.page(paginator.num_pages)
-    
+		
   # build a html posts list with the paginated posts
   posts_html = loader.render_to_string('myapp/posts.html', {'posts': posts})
 

diff --git a/views.py b/views.py
@@ -8,7 +8,7 @@ def index(request):
 
 def lazy_load_posts(request):
   page = request.POST.get('page')
-  posts = Post.objects.all()
+  posts = Post.objects.all()[:5] # get just 5 posts
 
   # use Django's pagination
   # https://docs.djangoproject.com/en/dev/topics/pagination/

diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <script type="text/javascript">
+      // needed when making post requests in Django
+      // we'll use this for the ajax request in script.js
+      window.CSRF_TOKEN = "{{ csrf_token }}";
+	  </script>
+  </head>
+  <body>
+    <h2>My Blog Posts</h2>
+    <div id="posts">
+      {% include 'myapp/posts.html' %}
+    </div>
+
+    <div><a id="lazyLoadLink" href="javascript:void(0);" data-page="2">Load More Posts</a></div>
+  </body>
+</html>
diff --git a/models.py b/models.py
@@ -0,0 +1,7 @@
+from __future__ import unicode_literals
+from django.db import models
+
+class Post(models.Model):
+  # Gonna pass on this one. You know what to do...
+  # https://docs.djangoproject.com/en/dev/topics/db/models/
+  pass
diff --git a/posts.html b/posts.html
@@ -0,0 +1,6 @@
+{% for post in posts %}
+<div>
+  <h4>{{ post.title }}</h4>
+  <p>{{ post.content }}</p>
+</div>
+{% endfor %}
diff --git a/script.js b/script.js
@@ -0,0 +1,30 @@
+(function($) {
+  $('#lazyLoadLink').on('click', function() {
+    var link = $(this);
+    var page = link.data('page');
+
+    $.ajax({
+      type: 'post',
+      url: '/lazy_load_posts/',
+      data: {
+        'page': page,
+        'csrfmiddlewaretoken': window.CSRF_TOKEN // from index.html
+	    },
+	    success: function(data) {
+        // if there are still more pages to load,
+        // add 1 to the "Load More Posts" link's page data attribute
+        // else hide the link
+        if (data.has_next) {
+            link.data('page', page+1);
+        } else {
+          link.hide();
+        }
+        // append html to the posts div
+        $('#div').append(data.posts_html);
+	    },
+      error: function(xhr, status, error) {
+        // shit happens friends!
+      }
+    });
+  });
+}(jQuery));
diff --git a/urls.py b/urls.py
@@ -0,0 +1,6 @@
+from myapp import views
+
+urlpatterns = [
+	url(r'^$', views.index, name='index'),
+  url(r'^lazy_load_posts/$', views.lazy_load_posts, name='lazy_load_posts'),
+]
diff --git a/views.py b/views.py
@@ -0,0 +1,29 @@
+from django.shortcuts import render
+from myapp.models import Post
+from django.template import loader
+from django.http import JsonResponse
+
+def index(request):
+  return render(request, 'myapp/index.html')
+
+def lazy_load_posts(request):
+  page = request.POST.get('page')
+  posts = Post.objects.all()
+
+  # use Django's pagination
+  # https://docs.djangoproject.com/en/dev/topics/pagination/
+  results_per_page = 5
+  paginator = Paginator(posts, results_per_page)
+	try:
+		posts = paginator.page(page)
+	except PageNotAnInteger:
+		posts = paginator.page(2)
+	except EmptyPage:
+		posts = paginator.page(paginator.num_pages)
+
+  # build a html posts list with the paginated posts
+  posts_html = loader.render_to_string('myapp/posts.html', {'posts': posts})
+
+  # package output data and return it as a JSON object
+  output_data = {'posts_html': posts_html, 'has_next': posts.has_next()}
+  return JsonResponse(output_data)