Waypoint.Infinite is not a constructor

Question

Hi everbody i have a problem about django infinite scroll paginations. I cant solve it.

home.html

 <div class="infinite-container">
    {% for post_display in post_data %}
    <div class="card infinite-item">
        <div class="card-body">
            {{ post_display }}
        </div>
    </div>
</div>
<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'js/infinite.min.js' %}"></script>

<script>
 var infinite = new Waypoint.Infinite({
 element: $('.infinite-container')[0],
 handler: function(direction) {

 },
offset: 'bottom-in-view',

onBeforePageLoad: function () {
$('.spinner-border').show();
},
onAfterPageLoad: function () {
$('.spinner-border').hide();
}
});

view.py

class HomeClassView(ListView):
    model = EssahDisplayModel
    paginate_by = 2
    template_name = "authenticated/home.html"
    context_object_name = 'post_data'

Bu i get this error on console:

(index):458 Uncaught TypeError: Waypoint.Infinite is not a constructor at (index):458 it the line 458 start: var infinite = new Waypoint.Infinite({....

Someone knows it ? thans

Answer 1

I'm actually stuck on the same problem, but I think yours has another issue. You don't close the Django for loop.

<div class="infinite-container">
    {% for post_display in post_data %}
        <div class="card infinite-item">
           <div class="card-body">
             {{ post_display }}
           </div>
        </div>
    **{% endfor %}**
</div>

Answer 2

Recommended to use jquery-2.2.4.min.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>-->

Answer 3

<div class="col infinite-container">
  {% for post in posts %}
    <article class="media content-section infinite-item">
      <div class=" col-md-2">
        <img class= "rounded-circle article-img" src="{{ post.author.profile.image.url}}">
      </div>
      <div class="media-body">
        <div class="article-metadata">
          <a class="mr-2" href="{% url 'user-posts' post.author.username %}">@{{ post.author }}</a>
          <small class="text-muted">{{ post.data_posted }}</small>
          </div>
          <div class="col-md-3">
            <h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ post.title }}</a></h2>
            <p class="article-content">{{ post.content }}</p>
          </div>
        <div class="col-md-7">
          {% if post.header_image%}
            <img src="{{ post.header_image.url }}">
          {%endif%}
        </div>
    </article>
  {% endfor %}
  {%if page_obj.has_next %}
    <a class= "infinite-more-link" href="?page={{ page_obj.next_page_number }}"></a>
  <!--<a class= "btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>-->
  {%endif%}
</div>

<script src="{% static 'blog/jquery.waypoints.min.js' %}"></script>
<script src="{% static 'blog/infinite.min.js' %}"></script>

<script>
  var infinite = new Waypoint.Infinite({
      element: $('.infinite-container')[0],

      offset: 'bottom-in-view',
      onBeforePageLoad: function(){

      },
      onAfterPageLoad:function(){

      }

  })
</script>

Answer 4

You Should use the Infinite cdn in your code

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/shortcuts/infinite.js"></script>