Problems in infinity scrolling of tree

[nurzhannogerbek]

First of all THANK YOU for this wonderful library! :)

I use Nestable2 to render the tree in my Django project. There are a lot of data in tree so I decided to use infinity scrolling by Waypoints plugin. I have next problem.

Let me explain it by example. I have next tree structure in database:

A
 - A1
 - A2
B
 - B1
 - B2
C
 - C1
 - C2

Thats what happens in browser:

A        |
 - A1   |
 - A2   | PAGE 1
B         | First Part
 - B1    | Show tree correct
 - B2    |

loading by ajax

C1      | PAGE 2
C        | Second Part
C2      | Show tree incorrect

As you can see second part which was load by ajax (Waypoints plugin) show second part of tree incorrect. Can someone say how to fix this problem please?! It seems like I need refresh Nestable2, isn't it? Cause DOM changed...

P.S. If I set in url ?page=2 is show me second part correctly by the way.

document_content.html:

<div class="dd">
    {% include 'documents/documents.html' %}
</div>

<div class="infinite-loading">
    <i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
</div>

{% if page_obj.has_next %}
    <a class="infinite-more-link" href="?page={{ page_obj.next_page_number }}"></a>
{% endif %}

documents.html:

<ol class="dd-list infinite-container">
  {% for node in documents %}
    {% include "documents/tree_view_template.html" %}
  {% endfor %}
</ol>

tree_view_template.html:

<li class="dd-item infinite-item" data-id="{{node.id}}">
  <div class="dd-content">
    <span>{{ node.title|truncatechars:200 }}</span>
  </div>
  {% if node.get_children %}
  <ol class="dd-list">
    {% for ch in node.get_children %}
      {% with node=ch template_name="documents/tree_view_template.html" %}
        {% include template_name %}
      {% endwith %}
    {% endfor %}
  </ol>
  {% endif %}
</li>

js:

// Create Tree
$('.dd').nestable({maxDepth: 6}).nestable('collapseAll');

// Create infinity scrolling
var infinite = new Waypoint.Infinite({
    element: $('.infinite-container')[0],
    onBeforePageLoad: function () {
        $('.infinite-loading').show();
    },
    onAfterPageLoad: function ($items) {
        $('.infinite-loading').hide();
        $('.dd').nestable({maxDepth: 6}).nestable('collapseAll'); // DON'T WORK
    },
});

[pjona]

@NogerbekNurzhan can you try for test replace this line:

$('.dd').nestable({maxDepth: 6}).nestable('collapseAll');

with this:

$('.dd').nestable('destroy');
$('.dd').nestable({maxDepth: 6}).nestable('collapseAll');

Can you compare in Google Developer Tool (Network tab), the difference between ajax call and when you call it by ?page=2? It looks like ajax call has some problems, it returning elements in wrong order. In your case, I will also suggest using JSON format instant of building HTML structure, then you can use functions like:

$('.dd').nestable('add', {"id":1,"children":[{"id":4}]});

to add new elements from the second page.

[nurzhannogerbek]

I tried your code but it didn't help me. I think problem with Waypoints plugin. So I decided to use other library which work with Nestable2 correctly but with some problems. I close this topic. Thank you for advice about JSON by the way! :)