@nurzhannogerbek

Бесконечный сколлинг не работает после обновления AJAX?

Здравствуйте, помогите пожалуйста разобраться.

Использую приложение django-el-pagination для бесконечного скролинга (pagination on scroll). Пользователю показывается список документов. У каждого такого документа есть кнопка для редактирования, по нажатию которой открывается форма редактирования. После успешного редактирования обновляется список документов. Проблема в том что после того как cписок обновился через AJAX бесконечный скролинг не работает. Новые документы не подгружаются. Как решить данную проблему?

Обычно при скролинге посылается запрос по такому url:
GET /documents/?page=2&querystring_key=page HTTP/1.1" 200 95118


Но при попытки сколить в обновленном списке в терминале вижу такой url:
GET /documents/2225/edit/?page=2&querystring_key=page HTTP/1.1" 200 6230


Так же в консоли браузера вижу следующее:
TypeError: fragment.trim is not a function
el-pagination.js:72:50


main_template.html:
<div id="documents" class="dd">
        <ol class="dd-list">
            {% include page_template %}
        </ol>
    </div>

   {% block script %}
    {# START: AJAX request to endless pagination #}
    <script type="text/javascript">
        function activatePagination(){
            $.endlessPaginate({
                paginateOnScroll: true,
                onCompleted: function(context, fragment) {
                    activateTooltip();
                }
            });
        }
        activatePagination();
    </script>
    {# END: AJAX request to endless pagination #}

   <script src="{% static 'js/documents/crud.js'%}"></script> {# CRUD JS #}
   {% endblock %}


crud.js:
$(function () {
    $("#document-modal").on("submit", ".document-edit-form", function(e) {e.preventDefault(); saveForm.call(this, "Data successfully updated");});

    var saveForm = function(success_message) {
        var form = $(this);
        var formData = new FormData(form[0]);
        $.ajax({
            url: form.attr("action"),
            data: formData,
            type: form.attr("method"),
            dataType: 'json',
            success: function (data) {
                if (data.form_is_valid) {
                    // Update list of documents
                    $("#documents ol.dd-list").html(data.html_documents);

                    activatePagination();

                    // Hide modal
                    $("#document-modal").modal("hide");

                    // Show message to user
                    $("#user-action-message").fadeIn("slow");
                    setTimeout(function() {$("#user-action-message").fadeOut("slow");}, 2000);
                }
            },
            cache: false,
            contentType: false,
            processData: false,
        });
        return false;
    };
});
  • Вопрос задан
  • 87 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы