Estoy confundido acerca de las solicitudes de AJAX. Estoy usando la función load() para actualizar elementos específicos en la página. La duplicación no deseada no ocurre cuando solo hay un elemento coincidente en la página.
{% for example in examples %} <div class="refresh" id="single{{ example.id }}"> <div class="container"> <p> Different content </p> </div> </div> {% endfor %} Asumiendo el ejemplo anterior, me gustaría actualizar el contenido de un container con diferentes contenidos en varios elementos de la página. En este caso, si los elementos de 'examples' son cuatro, habrá 8 después de la actualización. He intentado todo lo que puedo encontrar, pero hasta ahora los datos están duplicados.
#1 ACTUALIZACIÓN
El script se coloca en la plantilla base , envuelto en $(document).ready(function() . AJAX de tipo GET en caso de éxito, la función $( ".class-to-refresh" ).load(" .class-to-refresh") se llama.
PD: el servidor muestra una solicitud redundante, pero no duplica los datos cuando solo hay un elemento con la clase class-to-refresh en la página. De lo contrario, los elementos se duplican o superponen.
#2 ACTUALIZAR
A continuación, proporciono un código simplificado que contiene los problemas (versión en línea ).
<!DOCTYPE html> <html lang="en"> <head> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"> </script> <script> $(document).ready(function(){ setInterval(function() { $.ajax({ url: location.href, type: 'GET', success: function(data) { $( ".content" ).load(" .content" ); } }); }, 3000) }); </script> </head> <body> <div class="content" id="content1"> Content </div> <div class="content" id="content2"> Different content </div> </body> </html>Está bien. El problema aquí es que está haciendo su solicitud AJAX dos veces. Primero con $.ajax(..) y luego con ().load() .
Solo debe utilizar una de las funciones.
Tal vez lo que quieras hacer debería verse así:
<!DOCTYPE html> <html lang="en"> <head> <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"> </script> <script> $(document).ready(function(){ setInterval(function() { $( ".content" ).load("ajax/url/file.html .content" ); }, 3000) }); </script> </head> <body> <div class="content" id="content1"> Content </div> <div class="content" id="content2"> Different content </div> </body> </html> De la documentación de load :
$( "#result" ).load( "ajax/test.html #container" );Cuando se ejecuta este método, recupera el contenido de ajax/test.html, pero luego jQuery analiza el documento devuelto para encontrar el elemento con una ID de contenedor. Este elemento, junto con su contenido, se inserta en el elemento con un ID de resultado y el resto del documento recuperado se descarta.
Probablemente el código no sea perfecto, pero puedes leer más sobre .load() aquí .
Entonces, en Django, si tienes esto en tu plantilla:
{% for example in examples %} <div class="refresh" id="single{{ example.id }}"> <div class="container"> <p> Different content </p> </div> </div> {% endfor %} luego cargará todos los ejemplos existentes en ejemplos y si los certifica con .load() tendrá contenido duplicado.