I am looking to implement a page refresh at specific intervals, such as every 10 seconds, without reloading the page. Currently, I am sending a GET request to an API. While my AJAX code successfully refreshes the page, it reloads all the divs each time causing issues. How can I modify the refresh to only update the specific div without duplicating it?
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();
$("#testdiv").html(data);
});
}, 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 }