Quiero actualizar la página a ciertos intervalos, por ejemplo, cada 10 segundos, sin recargar la página. Estoy enviando una solicitud de obtención a la API. Mis códigos ajax actualizan bien la página, pero están causando problemas porque carga todos los divs una y otra vez. ¿Cómo puedo hacer que la actualización centrada en div elimine el mismo div anterior al actualizar?

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>

Vista;

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 }
1
altintash 24 nov. 2021 a las 10:59
Comparte tu vista de dashcontrol y su plantilla
 – 
amadou sow
24 nov. 2021 a las 11:02
Actualicé la publicación
 – 
altintash
24 nov. 2021 a las 11:04

1 respuesta

La mejor respuesta

Una de las posibles soluciones para esto es
ocultar la duración predeterminada es de 400 ms y no creo que el usuario se dé cuenta de eso.
crear nueva URL

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

Js

<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 }

Parcialdashcontrol.html (solo que esto no agrega cuerpo o 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>
1
amadou sow 24 nov. 2021 a las 11:34
No funcionó :(
 – 
altintash
24 nov. 2021 a las 11:07
Lo que hay dentro de su dashboard.html actualice su respuesta y compártala.
 – 
amadou sow
24 nov. 2021 a las 11:08
1
Actualicé mi respuesta.
 – 
amadou sow
24 nov. 2021 a las 11:35
1
Feliz de haber podido ayudarte.
 – 
amadou sow
24 nov. 2021 a las 12:24