Обновление на основе AJAX без дублирования данных

Я запутался в запросах AJAX. Я использую функцию load() для обновления определенных элементов на странице. Нежелательное дублирование не происходит, когда на странице есть только один совпадающий элемент.

{% for example in examples %}
<div class="refresh" id="single{{ example.id }}">
    <div class="container">
        <p> Different content </p>
    </div>
</div>
{% endfor %}

Взяв вышеприведенный пример, я хотел бы обновить содержимое container с различным содержимым в нескольких элементах на странице. В данном случае, если элементов 'examples' четыре, то после обновления их будет 8. Я перепробовал все, что смог найти, но пока что данные дублируются.

Ок. Проблема здесь в том, что вы выполняете AJAX запрос дважды. Сначала с помощью $.ajax(..), а затем с помощью ().load().

Вы должны использовать только одну из функций.

Возможно, то, что вы хотите сделать, должно выглядеть следующим образом:

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

Из load документации:

$( "#result" ).load( "ajax/test.html #container" );

При выполнении этого метода извлекается содержимое ajax/test.html, но затем jQuery разбирает возвращенный документ, чтобы найти элемент с идентификатором container. Этот элемент вместе с его содержимым вставляется в элемент с идентификатором result, а остальная часть полученного документа отбрасывается.

Возможно, код не совершенен, но вы можете прочитать больше о .load() здесь.

Так в Django, если у вас есть это в вашем шаблоне:

{% for example in examples %}
<div class="refresh" id="single{{ example.id }}">
    <div class="container">
        <p> Different content </p>
    </div>
</div>
{% endfor %}

тогда он загрузит все существующие примеры в примерах и если вы вставите их с .load() у вас будет дублированный контент.

Вернуться на верх