I am confused about AJAX requests. I am using the load() function to refresh specific elements on the page. Unwanted duplication does not occur when there is only one matched element on the page.
{% for example in examples %}
<div class="refresh" id="single{{ example.id }}">
<div class="container">
<p> Different content </p>
</div>
</div>
{% endfor %}
Assuming the above example, I would like to refresh the contents of a container with different contents in multiple elements on the page. In this case, if the 'examples' elements are four, there will be 8 after the refresh. I've tried everything I can find, but so far the data is duplicated.
#1 UPDATE
The script is placed in the base template, wrapped in $(document).ready(function(). AJAX of type GET on success the function $( ".class-to-refresh" ).load(" .class-to-refresh") is called.
PS The server displays a redundant request, but it does not duplicate data when there is only one item with the class class-to-refresh on the page. Otherwise, elements duplicate or overlap.
#2 UPDATE
Below I provide a simplified code containing the troubles (online version).
<!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>
Ok. The issue here is that you are doing your AJAX request twice.
First with $.ajax(..) and then with ().load().
You should only use one of the functions.
Maybe what you want to do should look like this:
<!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>
From the load documentation:
$( "#result" ).load( "ajax/test.html #container" );
When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.
Probably the code isnt perfect but you can read more about .load() here.
So in Django if you have this in your template:
{% for example in examples %}
<div class="refresh" id="single{{ example.id }}">
<div class="container">
<p> Different content </p>
</div>
</div>
{% endfor %}
then it will load all the existing example in examples and if you incert them with .load() you will have duplicated content.