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