Бесконечный прокрутка ajax не работает в Django

Question

Я пытаюсь использовать бесконечный плагин прокрутки ajax в моем проекте. Я просто следил за официальным сайтом и включал необходимые файлы javascript. Ниже приведен мой код:

<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> 

Так вот страница2.html - это другая страница, и она существует.

Так ли кто-нибудь знает, почему сообщение об ошибке:

(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

У вас есть вопрос Scope. Вы определяете var ias внутри обратного вызова jQuery ready, но пытаетесь ссылаться на переменную ias за пределами этого обратного вызова. Вне этого обратного вызова переменная ias не существует. Кроме того, поскольку обратный вызов является асинхронным, обратный вызов не будет вызываться до полной загрузки DOM. Это означает, что ваши звонки на ias.extension() происходят до того, как страница даже имела возможность загрузить, поэтому в первую очередь возникает обратный вызов ready.

Чтобы исправить это, поместите свои вызовы в ias.extension() внутри обратного вызова, чтобы они все были в той же области, где и jquery и ias были инициализированы.

$(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"})); 
});