I have already asked this question here but none of the answers were working. I have a messaging app in Django where users can send messages each other. I want to refresh the page so that the user can see new messages. But there is one problem if the user is writing a message and I try to reload the page every x-minutes the message that the user was writing will disapear. So how can I avoid this?

```
/*This is one of the solutions that I have tried*/
window.location.reload(true);
history.go(0);
window.location.href=window.location.href;

```

messages.html:

```
{% extends 'profile/base.html' %}
{% load tz %}
{% block title %}
Messages
{% endblock %}
{% block head %}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
          #form {
            position: fixed;
            bottom: 0;
            background-color:#f1f1f1;
          }
.container {
  border: 1px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 5px;
  padding: 1px;
  margin: 1px 0;
}

.container::after {
  content: "";
  clear: both;
  display: table;
}

.darker {
  border-color: #ccc;
  background-color:#ddd;
}

.container img {
  float: left;
  max-width: 40px;
  height:40px;
  width: 100%;
  margin-right: 20px;
  border-radius: 50%;
}

.time-left {
  margin-left:61px;
  color: #999;
}

h4 {
    display:inline;
}
    </style>
{% endblock %}
{% block content %}
{% if not chat %}
    <div class="container">
         Impossible de commencer un chat avec cet utilisateur ou bien vous n'avez pas acces a ce chat.
    </div>
{% else %}
    {% if chat %}
        <div id ='bottom' class="panel">
                {% for message_item in chat.message_set.all %}
                {% url 'profile' message_item.author.pk as the_user_url%}
    {% if message_item.is_readed %}
    <div class="container">
    {% else %}
    <div class="container darker">
    {% endif %}
    <a href="{{ the_user_url }}">

  <img src="{{ message_item.author.profile.avatar.url }}" alt="Avatar" style="width:100%;">
  <h4><a href="{{ the_user_url }}">{{ message_item.author.profile.prenom|title }}</a></h4>
  <p>{{ message_item.message }}</p>
  <span class="time-left">{{ message_item.pub_date|utc }}</span>
  </a>
</div>

                {% endfor %}
                <br><br><br><br>
            </div>
        </div>
    {% endif %}

    <div class='w3-container'>
    <div id='form'>
        <form method="post" action='{% url 'messages' chat.id %}'>
            {% csrf_token %}
            {{ form.as_p }}

            <input type="submit" value='envoyez' />
            </form>
        </div>
        </div>
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script>
        $('document').ready(function() {
           $('html').animate({scrollTop: document.body.scrollHeight},1);
        });
        </script>
{% endif %}
{% endblock %}

```

urls.py:

```
from django.urls import path
from . import views

urlpatterns = [
    path('dialogs/<int:chat_id>/',views.MessagesView.as_view(), name='messages'),
    ]

```