Как загружать данные в фоновом режиме через AJAX?

Question

[nurzhannogerbek]

Здравствуйте, посоветуйте пожалуйста в каком направлении копать...

Есть дерево, которое в своем Django проекте отображаю в шаблоне следующим образом. Во вьюхе формирую документы верхнего уровня, то есть документы у которых нет предков. Далее посылаю эти документы в шаблон, проверяю каждый документ на наличие у него детей и так рекурсивно повторяется. Само дерево строится правильно и при открытии страницы все ветки закрыты изначально. Проблема в том что данных много и страница открывается 4-6 секунд пока все не подгрузится, что не совсем хорошо. В терминале вижу что основная нагрузка происходит когда проверяю есть ли дети.

ВОПРОС: Возможно ли как-то в фоновом режиме через AJAX или еще как-то подгружать/вставлять детей в блок который выделил (см. ниже)?!

main.html:

<ol class="dd-list">
{% for document in documens %}
    {% include "tree_template.html" %}
{% endfor %}
</ol>

tree_template.html:

<li class="dd-item dd3-item" data-id="{{document.id}}">
    <div class="dd-handle dd3-handle"></div>
    <div class="dd-content dd3-content">***</div>

    {% if document.get_children %}
    <ol class="dd-list">
        
        <!-- START: Блок который хочется подгружать в фоновом режиме -->
        {% for child in document.get_children %}
            {% with document=child template_name="tree_template.html" %}
                {% include template_name %}
            {% endwith %}
        {% endfor %}
        <!-- END: Блок который хочется подгружать в фоновом режиме -->
    
    </ol>
    {% endif %}
</li>

Comments

[Animkim]

Не вариант одним запросом собрать все документы вместе с детьми и отдать в шаблон уже готовое дерево?
Насколько понимаю get_children делает новый запрос.

[nurzhannogerbek]

Animkim, Здравстуйте! :) Было бы круто так сделать, подскажите если есть идеи. Есть модель данных Document с полем parent, в которой хранится информация о предке. Так же есть поле position, с помощью которой определяется в какой последовательности должны стоять документы. Да, вы правы, get_children делает запрос к базе данных.

models.py:

class Document(models.Model):
    parent = models.ForeignKey('self', related_name='children', blank=True, null=True)
    position = models.PositiveIntegerField(blank=True, null=True)

[Animkim]

NogerbekNurzhan,
Не люблю писать за кого-то код бесплатно, но так и быть.

def search_child(documents, parent):
    childs = {}
    for document in documents:
        if parent.id == document.parent_id:
            childs.update({document: search_child(documents, document)})
    return childs

documents = list(Document.objects.all())
tree = {document: search_child(documents, document) for document in documents if not document.parent_id}

Без сортировки по позиции и код можно улучшить, не проверял его, но идея думаю понятна. Если нужна сортировка и определенный порядок логичнее сделать то же самое на списках, кортежах, OrderedDict.

[nurzhannogerbek]

Animkim, здравствуйте! Все конечно выглядит круто, но данный код по факту возвращает лишь элементы верхнего уровня без каких либо детей. Например:

{
<Document: Title>: {},
<Document: Title>: {},
 *** и так далее ***
}

К тому же даже если получу весь список документов, не совсем понятно как это все рендорить в шаблоне. На данный момент использую плагин Nestable2 для дерева на Frontend-e. Данный плагин дает возможность создать дерево c помощью JSON данных. Но это уже другая история.

В любом случаи, спасибо за пищу для размышлений! :)

[Animkim]

NogerbekNurzhan, Было бы желание, отладить код не сложно.
if parent.id == document.parent_id:
Не срабатывает видимо.

Answer 1

[Igor Fedun]

вот неплохая статья как формировать Ajax запросы
https://simpleisbetterthancomplex.com/tutorial/201...

Вот пример из реального проекта. Тут идет удаление элементов из DOM. Аналогично можно сделать и добавление.
$(".remove-from-basket").click( function () {
$.ajax( {
headers: { "X-CSRFToken": getCookie("csrftoken") },
type: "post",
url: "{% url 'basket_widget_delete_object' %}",
dataType: "json",
data: {"remove_object_id": $(this).attr("id")},
success: function(data) {
var element = "#basket-content-table tr#" + data.removed_id;
$(element).remove();
}
});
})