Ajax в Django создает дубликаты элементов

У меня есть форма, которая при отправке создает график с помощью Plotly. Я пытаюсь использовать Ajax для отправки формы без обновления страницы. Хотя форма успешно отправляется, div формы дублируется на экране. Я не знаю, как решить эту проблему. Я использую веб-фреймворк Django. Вот мой код

шаблон

<form action="{% url 'home' %}" method='post' id='year-form'>
    {% csrf_token %}

    <select class="form-select form-select-lg mb-3 dropdown-btn" aria-label="Default select example"
        name="year">
        <option selected>Select Year</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
    </select>

    <div class="d-grid gap-2">
        <button class="btn btn-primary btn-lg" type="submit">Button</button>
    </div>
</form>
<div id="message"></div>

<div class="graph center" id='graph'>
    {% if graph %}
    {{ graph.0|safe }}
    {% else %}
    <p>No graph was provided.</p>
    {% endif %}
</div>

ajax jQuery

<script type="text/javascript">
    var frm = $('#year-form');
    frm.submit(function () {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: $(this).serialize(),
            success: function (data) {
                $("#graph").html(data);
            },
            error: function (data) {
                $("#message").html("Something went wrong!");
            }
        });
        return false;
    });
</script>

Вот как выглядит страница перед отправкой формы

enter image description here

<

enter image description here

Я думаю, что я не передаю правильные данные в success части вызова Ajax.

Вам следует использовать другую конечную точку/вид для возврата шаблона графика. В данный момент вы получаете текущую страницу и загружаете ее снова, но на этот раз с графиком.

Ваш домашний шаблон должен быть:

<form action="{% url 'home' %}" method='post' id='year-form'>
    {% csrf_token %}

    <select class="form-select form-select-lg mb-3 dropdown-btn" aria-label="Default select example"
        name="year">
        <option selected>Select Year</option>
        <option value="2017">2017</option>
        <option value="2018">2018</option>
        <option value="2019">2019</option>
        <option value="2020">2020</option>
    </select>

    <div class="d-grid gap-2">
        <button class="btn btn-primary btn-lg" type="submit">Button</button>
    </div>
</form>
<div id="message"></div>

<div class="graph center" id='graph'>
    <p>No graph was provided.</p>
</div>

Затем у вас есть второй шаблон, используемый в другом представлении, который вы получаете через ajax для получения графика, как например: 

{% if graph %}
    {{ graph.0|safe }}
{% else %}
    <p>No graph was provided.</p>
{% endif %}
Вернуться на верх