Как сделать итерацию переменной шаблона django в выбранном элементе jQuery?

Я работаю над системой чата, в которой я могу открыть несколько чатов пользователей (как в facebook). Когда пользователь нажимает на имя пользователя, которое находится в списке контактов, открывается всплывающее окно чата.

Ниже приведен фрагмент из моего models.py,

class ThreadManager(models.Manager):
    def by_user(self, **kwargs):
        user = kwargs.get('user')
        lookup = Q(first_person=user) | Q(second_person=user)
        qs = self.get_queryset().filter(lookup).distinct()
        return qs


class Thread(models.Model):
    first_person = models.ForeignKey(User, on_delete=models.CASCADE, null=True, blank=True, related_name='thread_first_person')
    second_person = models.ForeignKey(User, on_delete=models.CASCADE, null=True, blank=True,
                                     related_name='thread_second_person')
    updated = models.DateTimeField(auto_now=True)
    timestamp = models.DateTimeField(auto_now_add=True)

    objects = ThreadManager()
    class Meta:
        unique_together = ['first_person', 'second_person']


class ChatMessage(models.Model):
    thread = models.ForeignKey(Thread, null=True, blank=True, on_delete=models.CASCADE, related_name='chatmessage_thread')
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    message = models.TextField()
    timestamp = models.DateTimeField(auto_now_add=True)

Ниже приведен запрос, который я передаю из файла views.py в мой html-шаблон,

threads = Thread.objects.by_user(user=request.user).prefetch_related('chatmessage_thread')

Ниже приведен html-код,

<div class="chat_box">
        <div class="chat_header" >
            <h1 class="chat_heading">(6) Contacts</h1>
        </div>
        <hr>
        <div class="chat_content" style="display: none;">
            {% for thread in Threads %}
            <div class="user" id="{{ thread.second_person.id }}" thread-id = "{{thread.id}}" chat-id="chat_{{ thread.id }}">
                <img id="my_img" src="{{user_personal.picture.url}}" class="user_icon">
                {% if thread.first_person == user %}
                <h3 class="username">{{ thread.second_person.first_name }} {{ thread.second_person.last_name }}</h3>
                {% else %}
                <h3 class="username">{{ thread.first_person.first_name }} {{ thread.first_person.last_name }}</h3>
                {% endif %}
                <i class="fa fa-circle"></i>
            </div>
            {% endfor %}
        </div>
    </div>

Ниже приведен код jquery,

    $(".user").click(function(){
        var userID = $(this).attr("id");
        var threadid = $(this).attr("thread-id");
        var username = $(this).children().text();
        profile_pic = $('#my_img').attr('src');
        if ($.inArray(userID, arr) != -1)
         {
          arr.splice($.inArray(userID, arr), 1);
         }
         arr.unshift(userID);

         chatPopup = '<div class="message_box" style="right:290px" rel="'+ userID+'" thread-id="'+threadid+'"><div class="message_header" rel="'+ userID+'">'+
            '<img src="http://127.0.0.1:8000'+profile_p+'"  class="user_icon"><h3 class="username">'+username+'</h3>'+
            '<i class="fa fa-times close" rel="'+ userID+'"></i></div><hr><div class="message_content"><div class="messages" rel="'+ userID+'">'+
            '<div class="chat">'+
            '{% for thread in Threads %}{% for chat_i in thread.chatmessage_thread.all %}'+
            '{% if thread.first_person.id == user.id and thread.second_person.id == 3 %}'+
            '{% if thread.id == chat_i.thread_id %}'+
            '{% if chat_i.user == user %}'+
            '<div class="new_messages p2"><p>{{ chat_i.message }}</p></div>'+
            '{% else %}'+
            '<div class="new_messages p1"><p>{{ chat_i.message }}</p></div>'+
            '{% endif %}{% endif %}{% endif %}{% endfor %}{% endfor %}</div></div><div class="input_box">'+
            '<textarea type="text" class="message_input" rel="'+ userID+'" placeholder="Type Message..."></textarea>'+
            '<i class="fa fa-arrow-circle-right enter" rel="'+ userID+'"></i></div></div></div>';   
            if ( $('[rel="'+userID+'"]').length == 0) {
                $("body").append(  chatPopup  );
                console.log(chatPopup);
                displayChatBox();
            }
        });

Функциональные возможности на стороне клиента работают абсолютно нормально, но я не могу итерировать сообщения чата на основе определенного id потока. Сообщения отображаются на всех всплывающих окнах чата.

Я очень сильно застрял в этом с прошлой недели. Пожалуйста, помогите мне избавиться от этого и спасти мою жизнь. Спасибо.

Вернуться на верх