Динамическое обновление контента c помощью ajax через GET запрос на Django

Question

Мне нужно, что бы новые сообщения от пользователя обновлялись по мере их поступления, без обновления страницы. Пока получилось добиться только того, что передаваемые данные поступаю просто как string, а не query_set. Ну по крайней мере мне так это видится. Что изменить в коде, что бы все заработало корректно?

utils.py

class ObjectMessageMixin:
    model = None
    modelForm = None
    template = None

    def get(self, request, chat_id):
        try:
            chat = self.model.objects.get(id=chat_id)
            if request.user in chat.members.all():
                chat.message_set.filter(is_read=False).exclude(author=request.user).update(is_read=True)
            else:
                chat = None
        except Chat.DoesNotExist:
            chat = None
        ctx = {}
        ctx['user'] = request.user
        ctx['chat'] = chat
        ctx['form'] = self.modelForm
        user_id_message = self.model.objects.filter(members__username=request.user)
        ctx['unread_chat'] = user_id_message.model.objects.unread_chat(user=request.user).count()
        if request.is_ajax():
            response = HttpResponse(chat)
            response['chat'] = chat
            return response
        return render(request, self.template, ctx)

update_data_message.js

function start() {
    window.unread = window.setInterval(timer, 10000);
}

function timer() {
    $.ajax({
        type: 'GET',
        success: function (data) {
            $('#messages').html(data);
            console.log('complete');
            console.log(data);
        }
    });
}

window.onload = start();

message.html

{% if chat %}
            <div id="messages" class="panel">
                <div id="innerMessages">
                    {% for message in chat.message_set.all %}
                            {% include 'start_page/includes/dialog.html' with message_item=message %}
                    {% endfor %}
                </div>
            </div>
{% endif %}

Вот, что на выходе:

Answer 1

Нашел решение, но в будущем его надо будет доработать.

utils.py

class ObjectMessageMixin:
    model = None
    modelForm = None
    template = None

    def get(self, request, chat_id):
        try:
            chat = self.model.objects.get(id=chat_id)
            if request.user in chat.members.all():
                chat.message_set.filter(is_read=False).exclude(author=request.user).update(is_read=True)
            else:
                chat = None
        except Chat.DoesNotExist:
            chat = None
        ctx = {}
        ctx['user'] = request.user
        ctx['chat'] = chat
        ctx['form'] = self.modelForm
        user_id_message = self.model.objects.filter(members__username=request.user)
        ctx['unread_chat'] = user_id_message.model.objects.unread_chat(user=request.user).count()
        if request.is_ajax():
            ctx['chat'] = chat
            return render(request, 'start_page/includes/dialog.html', ctx)
        return render(request, self.template, ctx)

update_data_message.js

function start() {
    window.unread = window.setInterval(timer, 5000);
}

function timer() {
    $.ajax({
        type: 'GET',
        success: function (data) {
            var messages = document.getElementById('innerMessages');
            messages.innerHTML = data;
            console.log('complete');
            console.log(data);
        }
    });
}

window.onload = start();

немного переделал dialog.html в который и сгружаются данные о сообщениях

{% for message_item in chat.message_set.all %}
    {% with message_id=message_item.id %}
    <div class="list-group-item unreaded" {% if not message_item.is_read %}style="border-color: red"{% endif %}>
        <a href=""><img class="avatar-comment" src=""></a>
        <div class="reply-body">
            <ul class="list-inline">
                <li class="drop-left-padding">
                    <strong class="list-group-item-heading"><a href="">{{ message_item.author.username }}</a></strong>
                </li>
                <li class="pull-right text-muted"><small>{{ message_item.date_pub|utc }}</small></li>
            </ul>
            <div data-message-id="{{ message_id }}" data-message-slug="{{ message_item.slug_message }}" data-chat-id="{{ chat.id }}" class="item-message-id">
                <p id="{{ message_id }}">{{ message_item.message|safe }}</p>
                (...)
    </div>
    {% endwith %}
{% endfor %}

Соответственно с message.html цикл снял, на доработку теперь остается сортировка сообщений, что бы на показ выходили не все, а часть, потому что если их будет например 1млн, то все будет очень плохо =)

БЛОГ НА HUSL

Динамическое обновление контента c помощью ajax через GET запрос на Django

Ответы (1 шт):