Django refresh page without reload whole page-CodePudding

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="" >
<div > 
</div>
<br>
<div  style="float: top; margin-bottom: 2%;">
  <div  style="text-align: center;"> <span style="font-size: 30px; color: white;">DASHBOARD CHECK</span></div>
  <form  action="dashcontrol" method="POST">
    {% csrf_token %}
    {% load humanize %}
                   <!---->   
  </form> 
  </div>
  <!-- Modal -->
  <section >
    <div >
        <div >
            <div >
            </div>
        </div>
        <!-- Pricing Table starts -->
        <div id="testdiv" >
      <div >
          {%if testtt > 1000 %}<div >{%else%}<div >{%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 }

CodePudding user response：

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>