title: can't refresh the data in a DIV python Django nor the page after a jquery
body: <p>Let me start by saying I have 2 variables in an HTML template(messages and users) and I have multiple buttons that when one of them is clicked it calls a jquery code that sends a post request to a Django server and it returns an update to a variable(messages)
  however, it's not updating the loop, I also tried to return a new HTML page that contains the new variable updated but the jquery is not updating the whole page with the new HTML</p>
  <p>if I can update the variable alone it would be better and if I can't do that how can I make jquery use the new HTML page
  the python code i used to return the update to the varialbe messages:</p>
  <pre><code>if request.method == 'POST':
          send=Message.objects.filter(from_id=request.POST.get('userId'),to_id=2)
          rec=Message.objects.filter(from_id=2,to_id=request.POST.get('userId'))
          messages=sorted(chain(rec, send),key=lambda instance: instance.id,reverse=True)
          print(messages)
          return HttpResponse(list(messages))
  </code></pre>
  <p>and the code i used to return new HTML template:</p>
  <pre><code>m = Message.objects.filter(to_id=2).order_by('-id')
      users = {}
      for i in m:
          if users.get(i.from_id.username) == None:
              users[i.from_id.username] = User.objects.get(id=i.from_id.id)
      users = list(users.values())
      send=Message.objects.filter(from_id=users[0].id,to_id=2)
      rec=Message.objects.filter(from_id=2,to_id=users[0].id)
      messages=sorted(chain(rec, send),key=lambda instance: instance.id,reverse=True)
      if request.method == 'POST':
          send=Message.objects.filter(from_id=request.POST.get('userId'),to_id=2)
          rec=Message.objects.filter(from_id=2,to_id=request.POST.get('userId'))
          messages=sorted(chain(rec, send),key=lambda instance: instance.id,reverse=True)
          print(messages)
          return render(request,'psych.html',{&quot;users&quot;:users, &quot;messages&quot;:list(messages)})
      return render(request,'psych.html',{&quot;users&quot;:users, &quot;messages&quot;:list(messages)})
  </code></pre>
  <p>the HTML code and jquery code that uses the variable and try to update it</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function newUser(id){
          $.ajax({
            type: 'POST',
            url:'/psych.html/',
            data:{
              userId:id,
            },
            success: function(data){
              console.log(data);// the data returnd are correct and as needed
              //but i cant make it update the messages
              $('#messageDiv').load(document.URL +  ' #messageDiv');
            }
          })
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{% for i in users %}
                    &lt;li class=""&gt;
                      &lt;button type="button" class="btn" onClick="newUser({{i.id}})"&gt;
                      &lt;div class="d-flex bd-highlight"&gt;
                        &lt;div class="img_cont"&gt;
                          &lt;!-- here was an image -----------------------------------------------&gt;
                          
                        &lt;/div&gt;
                        &lt;div class="user_info"&gt;
                          &lt;span&gt;{{i.id}}&lt;/span&gt;
                          
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/button&gt;
                    &lt;/li&gt;
                    
                    {% endfor %}
  &lt;!-- The varialbe that i'm trying to update is called messages bottom --&gt;
  
  {% for o in messages %}
                        {% if o.to_id.id != 2 %}
                          
                          &lt;div class="d-flex justify-content-start mb-4"&gt;
                            &lt;div class="img_cont_msg"&gt;
                            &lt;!-- here was an image--&gt;
                            &lt;/div&gt;
                            &lt;div class="msg_cotainer"&gt;
                              {{o.message}} 
                              &lt;!-- &lt;span class="msg_time"&gt;{{o.time}}&lt;/span&gt; --&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                        {% else %}
                          &lt;div class="d-flex justify-content-end mb-4"&gt;
                            &lt;div class="msg_cotainer_send"&gt;
                              {{o.message}}
                              &lt;!-- &lt;span class="msg_time_send"&gt;{{o.time}}&lt;/span&gt; --&gt;
                            &lt;/div&gt;
                            &lt;div class="img_cont_msg"&gt;
                                              &lt;!-- here was an image--&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
                      {% endif %}
                    {% endfor %}</code></pre>
  </div>
  </div>
  </p>
  <p>if it helps i did it before and updated the messages from jquery but i used form and there was only 1 variable i will add the code to that too</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('submit','#submitMessage', function (e){
          e.preventDefault();
          $.ajax({
            type: 'POST',
            url:'/psych.html/',
            data:{
              message:$('#messageHolder').val(),
              csrfmiddlewaretoken: $('input[message=csrfmiddlewaretoken]').val(),
  
            },
            success: function(data){
            // it work like charm here 
              $('#messageDiv').load(document.URL +  ' #messageDiv');
            }
          })
        })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{% for o in messages %}
    {% if o.to_id.id == 2 %}
      &lt;div class="d-flex justify-content-start mb-4"&gt;
        &lt;div class="img_cont_msg"&gt;
          &lt;!-- here was an image--&gt;
        &lt;/div&gt;
        &lt;div class="msg_cotainer"&gt;
          {{o.message}} 
          &lt;!-- &lt;span class="msg_time"&gt;{{o.time}}&lt;/span&gt; --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    {% else %}
      &lt;div class="d-flex justify-content-end mb-4"&gt;
        &lt;div class="msg_cotainer_send"&gt;
          {{o.message}}
          &lt;!-- &lt;span class="msg_time_send"&gt;{{o.time}}&lt;/span&gt; --&gt;
        &lt;/div&gt;
        &lt;div class="img_cont_msg"&gt;
          &lt;!-- here was an image--&gt;
        &lt;/div&gt;
       &lt;/div&gt;
    {% endif %}
  {% endfor %}
  &lt;form id="submitMessage" &gt;
    {% csrf_token %}
      &lt;div class="card-footer"&gt;
        &lt;div class="input-group"&gt;
          &lt;div class="input-group-append"&gt;&lt;/div&gt;
            &lt;input name="message" class="form-control type_msg" placeholder="Type your message..." id="messageHolder"&gt;
            &lt;div class="input-group-append"&gt;
            &lt;button type="submit" class="btn"&gt;
              &lt;span class="input-group-text send_btn" &gt;&lt;i class="fas fa-location-arrow"&gt;&lt;/i&gt;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>