Django refresh page without reload whole page

I want to refresh the page at certain intervals, for example, every 10 seconds, without reloading the page. I’m sending get request to api. My ajax codes refreshes the page well but it’s causing problems because it loads all the divs again and again. How can I make the div-focused refresh delete the same previous div when refreshing?

hmtl;

{% extends 'elements/sidebar.html' %}
{% load static %}
{% block content %}
<!---->
<img src="{% static '/images/techops.png' %}" alt="" class="responsive">
<div class="p text-center bg-light"> 
</div>
<br>
<div class="containerdashcontrol" style="float: top; margin-bottom: 2%;">
  <div class="dashbaslik" style="text-align: center;"> <span style="font-size: 30px; color: white;">DASHBOARD CHECK</span></div>
  <form class="form-horizontal" action="dashcontrol" method="POST">
    {% csrf_token %}
    {% load humanize %}
                   <!---->   
  </form> 
  </div>
  <!-- Modal -->
  <section class="pricing-section">
    <div class="container">
        <div class="row justify-content-md-center">
            <div class="col-xl-5 col-lg-6 col-md-8">
            </div>
        </div>
        <!-- Pricing Table starts -->
        <div id="testdiv" class="row">
      <div class="col-md-4">
          {%if testtt > 1000 %}<div class="dashcontrol2 featured">{%else%}<div class="dashcontrol featured">{%endif%}
          <h4>{%if testtt > 1000 %}<span style="color: red;">XX</span><box-icon type='solid' name='badge' color="red"></box-icon>{%else%}<span style="color: green;">XX</span><box-icon type='solid' name='badge-check' color="green"></box-icon>{%endif%} </box-icon></h4>
          <h4>{{testtt|intcomma}}</h4>
         <a target="_blank" href="XX"><h6>KIBANA</h6></a>
        </ul>
       </div>
      </div>
</section>
            </div>
    <script>
       setInterval(function() { 
      $.get("/dashcontrol", function(data, status){ 
        $("#testdiv").hide(); //hide the page
        $("#testdiv").append(data); // and after you hide that data append it.
    });  
}, 5000);
    </script>
    {% endblock content %}
    {% block scripts %}
  
    {% endblock scripts %}

url.py;

url(r'^dashcontrol$', views.dashcontrol, name='dashcontrol'),

ajax;

<script>
          
    setInterval(function() { 
      $.get("/dashcontrol", function(data, status){ 
        $("body").html(data); 
    });  
}, 15000);
    </script>

view;

def dashcontrol(request):
        url = "http://XX/XX*/_search"
        headers = {'Content-type': 'application/json'}
        params = {XX}
        print('OK')
        response = requests.get(url=url, json=params, headers=headers)
        data = response.json()
        testtt = data['hits']['total']
        print(data['hits']['total'])
        print('OK')
        return render(request, 'dashcontrol.html', {'testtt ':testtt }

Answer

one of the possible solution for this is
hide default duration is 400ms and i do not think the user will notice that.
create new url

url(r'^dashcontrol$', views.dashcontrol, name='dashcontrol'),
url(r'^updatadashcontrol$', views.updatedashcontrol, name='updatedashcontrol'),

<script>
          
    setInterval(function() { 
      $.get("{% url 'updatedashcontrol' %}", function(data, status){ 
        $("#testdiv").empty(); //hide the page
        $("#testdiv").append(data); // and after you hide that data append it.
    });  
}, 15000);
    </script>

views.py

def dashcontrol(request):
        url = "http://XX/XX*/_search"
        headers = {'Content-type': 'application/json'}
        params = {XX}
        print('OK')
        response = requests.get(url=url, json=params, headers=headers)
        data = response.json()
        testtt = data['hits']['total']
        print(data['hits']['total'])
        print('OK')
        return render(request, 'dashcontrol.html', {'testtt ':testtt }

def updatedashcontrol(request):
        url = "http://XX/XX*/_search"
        headers = {'Content-type': 'application/json'}
        params = {XX}
        print('OK')
        response = requests.get(url=url, json=params, headers=headers)
        data = response.json()
        testtt = data['hits']['total']
        print(data['hits']['total'])
        print('OK')
        return render(request, 'partialdashcontrol.html', {'testtt ':testtt }

partialdashcontrol.html(just this do not add body or html)

<div class="col-md-4">
          {%if testtt > 1000 %}<div class="dashcontrol2 featured">{%else%}<div class="dashcontrol featured">{%endif%}
          <h4>{%if testtt > 1000 %}<span style="color: red;">XX</span><box-icon type='solid' name='badge' color="red"></box-icon>{%else%}<span style="color: green;">XX</span><box-icon type='solid' name='badge-check' 

    color="green"></box-icon>{%endif%} </box-icon></h4>
              <h4>{{testtt|intcomma}}</h4>
             <a target="_blank" href="XX"><h6>KIBANA</h6></a>
            </ul>
           </div>

Advertisement

Answer