Infinite ajax scroll did not working in Django

Question

I am trying to use infinite ajax scroll plugin in my project. I just followed the official website and include the necessary javascript files. Following is my code:

<div class="row">
   <div class="col-lg-4">
       <div class="bootstrap-card">
       <img src="{% static 'images/1.jpg' %}" class="img-responsive img-rounded" alt="card imag">
       <div class="overlay">
       <a class="info" href="#">View Details</a>
       </div>
      </div>
   </div>

    <div class="col-lg-4">
        <div class="bootstrap-card">
        <img src="{% static 'images/1.jpg' %}" class="img-responsive img-rounded" alt="card imag">
        <div class="overlay">
        <a class="info" href="#">View Details</a>
        </div>
        </div>
    </div>

    <div class="col-lg-4">
       <div class="bootstrap-card">
       <img src="{% static 'images/1.jpg' %}" class="img-responsive img-rounded" alt="card imag">
       <div class="overlay">
       <a class="info" href="#">View Details</a>
       </div>
       </div>
    </div>
</div>

<script src="{% static 'hw1/js/callback.js' %}"></script>
<script src="{% static 'hw1/js/jquery-ias.min.js' %}"></script>

<div id="pagination">
    <a href="page2.html" class="next">next</a>
</div>

<script>
    $(document).ready(function() {
      var ias = jQuery.ias({
        container: '.row',
        item: '.col-lg-4',
        pagination: '#pagination',
        next: '.next',
        delay: 1250
      });
    });

    ias.extension(new IASSpinnerExtension());
    ias.extension(new IASTriggerExtension({offset: 2}));
    ias.extension(new IASNoneLeftExtension({text: "You reached the end"}));
</script>

So here page2.html is another page in and it does exist.

So does anybody know why the error message is:

(index):244 Uncaught ReferenceError: ias is not defined(…)(anonymous function) @ (index):244 jquery-3.1.1.min.js:2 jQuery.Deferred exception: jQuery.ias is not a function TypeError: jQuery.ias is not a function at HTMLDocument. (http://localhost:8000/:235:24) at j (http://localhost:8000/static/hw1/js/jquery-3.1.1.min.js:2:29948) at k (http://localhost:8000/static/hw1/js/jquery-3.1.1.min.js:2:30262) undefined

Answer 1

You have a scope issue. You define var ias inside the jQuery ready callback but are trying to reference the ias variable outside of that callback. Outside of that callback, the ias variable doesn't exist. Additionally, because the callback is asynchronous, the callback won't be called until the DOM is fully loaded. This means your calls to ias.extension() are happening before the page has even had a chance to load, which is why the ready callback exists in the first place.

To fix this, put your calls to ias.extension() inside the callback as well so they they're all in the same scope where both jquery and ias have been initialized.

$(document).ready(function() {
  var ias = jQuery.ias({
    container: '.row',
    item: '.col-lg-4',
    pagination: '#pagination',
    next: '.next',
    delay: 1250
  });

  ias.extension(new IASSpinnerExtension());
  ias.extension(new IASTriggerExtension({offset: 2}));
  ias.extension(new IASNoneLeftExtension({text: "You reached the end"}));
});