django-el-pagination: Pagination on scroll don't work after AJAX update?

I use pagination on scroll in my project.

I show list of documents to user. Every such document has edit button. When user click to edit button he can see edit form. After successful editing I update list by AJAX. Problem is that after AJAX update the list pagination don’t work anymore. In browser console I notice this error: TypeError: fragment.trim is not a function | el-pagination.js:72:50

Usually I see such url in pagination on scroll: GET /documents/?page=2&querystring_key=page HTTP/1.1" 200 95118

But when I try to scroll in updated list I see in terminal next url: GET /documents/2225/edit/?page=2&querystring_key=page HTTP/1.1" 200 6230

It seems to me that I need to update/refresh pagination script in crud.js file. I put activatePagination function inside crud.js file but it didn’t help me. Can you help me to fix this problem?

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;
    };
});

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (5 by maintainers)

Most upvoted comments

Maybe it can helps:

<div id="documents" class="dd">
    <div class="dd-list">
        <div class="list-group-item">
            <div class="document" id="doc-1">
                <h2 class="document-title">Blah-blah 1</h2>
                <button class="document-edit" type="button">Edit</button>
            </div>
        </div>
        <div class="list-group-item">
            <div class="document" id="doc-2">
                <h2 class="document-title">Blah-blah 2</h2>
                <button class="document-edit" type="button">Edit</button>
            </div>
        </div>
        <div class="list-group-item">
            <div class="document" id="doc-3">
                <h2 class="document-title">Blah-blah 3</h2>
                <button class="document-edit" type="button">Edit</button>
            </div>
        </div>
        <div class="list-group-item">
            <div class="document" id="doc-4">
                <h2 class="document-title">Blah-blah 4</h2>
                <button class="document-edit" type="button">Edit</button>
            </div>
        </div>
        <div class="list-group-item">
            <div class="document" id="doc-5">
                <h2 class="document-title">Blah-blah 5</h2>
                <button class="document-edit" type="button">Edit</button>
            </div>
        </div>

        <a href="?page=2" class="show-more">Moar!</a> <!-- {% show_more %} -->
    </div>
</div>

<div class="modal-edit">
    <button class="modal-close" type="button">x</button>

    <form class="modal-form" action="/edit/" method="post">
        {% csrf_token %}
        <input type="hidden" name="id">

        <label for="title">Document title</label>
        <input type="text" name="title" id="title">

        <button class="modal-save" type="submit">Save</button>
    </form>
</div>

<div class="modal-success">
    <button class="modal-close" type="button">x</button>

    <h2 class="modal-title">Successfully updated</h2>
</div>

<div class="modal-failure">
    <button class="modal-close" type="button">x</button>

    <h2 class="modal-title">Error!</h2>
    <p class="modal-text"></p>
</div>

<script>
    (function () {
        $(function () {

            function showSuccess () {
                var $modalSuccess = $('.modal-success');

                $modalSuccess.show();

                setTimeout(function () {
                    $modalSuccess.hide();
                }, 2000);
            }

            function showFailure (descriptionText) {
                var $modalFailure = $('.modal-failure');

                $modalFailure.find('.modal-text').text(descriptionText);

                $modalFailure.show();

                setTimeout(function () {
                    $modalFailure.hide();
                }, 2000);
            }

            function editDocument ($document) {

                var documentID = $document.attr('id');
                var $documentTitle = $document.find('document-title');
                var documentTitleText = $documentTitle.text();

                var $modalEdit = $('.modal-edit');

                var $modalEditForm = $modalEdit.find('form');
                var $fieldID = $modalEditForm.find('[name="id"]');
                var $fieldTitle = $modalEditForm.find('[name="title"]');

                $fieldID.val(documentID);
                $fieldTitle.val(documentTitleText);

                $modal.show();

                $modalEditForm.on('submit', function (ev) {
                    ev.preventDefault();

                    $.ajax({
                        url: $modalEditForm.attr('action'),
                        type: $modalEditForm.attr('method'),
                        data: new FormData($modalEditForm.get(0)),
                        dataType: 'json',
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (resp) {
                            if (resp && resp.success) {
                                $documentTitle.text($fieldTitle.val()); // view new title

                                $modalEdit.hide(); // hide form

                                showSuccess();
                            } else {
                                showFailure('Some error occurred. Try later.');
                            }
                        },
                        error: function (error) {
                            showFailure(error.status + ': ' + error.statusText);
                        }
                    })
                });
            }

            $('.document-edit').on('click', function (ev) {
                ev.preventDefault();
                var $document = $(this).closest('.document');

                editDocument($document);
            });

        });//doc ready
    }(jQuery));
</script>

toptalo on Feb 6, 2018

I also thought about it. Could you describe your idea in more detail? That idea seems great but I don’t know how to realize it. I mean how for example to know current page / documents of current page. I would be very grateful if you show your idea with some code or some advises how to reorganize my views.py file in this case 😉

By the way I think it would be better to to set id of document like this in template: <div class="list-group-item" data-id="{{document.id}}">{{document.title}}</div>

nurzhannogerbek on Feb 6, 2018