Quiero agregar un div a mi página usando una variable de javascript. Este div debe tomar una clase a la derecha o a la izquierda, pero mi condición if no funciona en esta variable, y funciona si lo intento sin javascript.
Esta es mi vista:
def chat(request,sender_id,receiver_id): if request.user.is_authenticated: if request.user.profile == 'C' or request.user.profile == 'A': user = User.objects.filter(id=request.user.id).get() receiver_user = User.objects.filter(id=receiver_id).get() if request.user.profile == 'A': chat = Chat.objects.filter(Q(sender_id=sender_id) | Q(receiver_id=sender_id)).all() elif request.user.profile == 'C': chat = Chat.objects.filter(Q(sender_id=sender_id,receiver_id=receiver_id) | Q(sender_id=receiver_id,receiver_id=sender_id)) context = { 'user': user, 'chat': chat, 'receiver_user': receiver_user, } return render(request,'chat/chat.html',context) return render(request, 'Login/logout.html')
Y este es mi javascript:
$(document).ready(function(){ setInterval(function(){ $.ajax({ type: 'GET', url : "{% url 'getMessages' request.user.id receiver_user.id %}", success: function(response){ console.log(response); $("#display").empty(); for (var key in response.chat) { var temp='<div class="msg-box {% if request.user.id == chat.sender_id %} right {% else %} left {% endif %}">\ <div class="details">\ <p class="msg">'+response.chat[key].message+'</p>\ <p class="date">'+response.chat[key].msg_time+'</p></div></div>'; $("#display").append(temp); } }, error: function(response){ console.log('An error occured') } }); },100); });
Y este es mi models.py:
class Chat(models.Model): message = models.TextField(max_length=100000) sender = models.ForeignKey(User,on_delete=models.CASCADE,related_name='sender') receiver = models.ForeignKey(User,on_delete=models.CASCADE,related_name='receiver') msg_time = models.DateTimeField(auto_now_add=True) class Meta: ordering = ['msg_time']
No soy tan bueno en js, así que usaré html parcial para responder a su pregunta.
en su plantilla, cree un archivo html (partial_msg.html):
def getMessages(request, sender_id, receiver_id): if request.user.profile == 'A': chat = Chat.objects.filter(Q(sender_id=sender_id) | Q(receiver_id=sender_id)).all() elif request.user.profile == 'C': chat = Chat.objects.filter(Q(sender_id=sender_id,receiver_id=receiver_id) | Q(sender_id=receiver_id,receiver_id=sender_id)) return render(request,'partial_msg.html',{'chats':chat}) #new
2)partial_msg.html (solo esto sin la cabeza)
{% for chat in chats %} <div class="msg-box {% if request.user.id == chat.sender_id %} right {% else %} left {% endif %}"> <div class="details"> <p class="msg">{{ chat.message }}</p> <p class="date">{{ chat.msg_time }}</p> </div> </div> {% endfor %}
llama a tu javascript
$(document).ready(function(){ setInterval(function(){ $.ajax({ type: 'GET', url : "{% url 'getMessages' request.user.id receiver_user.id %}", success: function(response){ $("#display").empty(); $("#display").append(response); }, error: function(response){ console.log('An error occured') } }); },1000); });
Nota: Esta es solo una idea de cómo puede lograrlo usando django.