Ajax с Django создает дублированный контент
Я задавал предыдущий вопрос, но ответа оказалось недостаточно. Я пытаюсь вывести графики в шаблоне Django, используя изменение выпадающего списка с помощью Ajax. Но это создает дублирующееся содержимое в пользовательском интерфейсе. Я не уверен, почему это происходит. Вот мой код
Django view
def home(request):
if request.method=='POST':
year = request.POST['year']
df, cus_dict = generate_df(year)
year_choro = createStormDataGraph(year, cus_dict)
context = {'graph': year_choro, 'year': year}
return render(request, 'index.html', context=context)
default1 = default()
context = {'default': default1}
return render(request, 'index.html', context=context)
def ajax(request):
return render(request, 'ajax.html')
шаблон дома
<form action="{% url 'home' %}" method='post' class='center' id='year-form'>
{% csrf_token %}
<div class="line-break"></div>
<select class="form-select form-select-lg mb-3 dropdown-btn" aria-label="Default select example"
name="year" id='dropdown-btn'>
<option value="none" selected disabled hidden>
Select a year
</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</form>
<div id="message"></div>
<div class="graph center" id='graph'>
</div>
ajax шаблон
<body>
{% if graph %}
{{ graph.0|safe }}
{% else %}
no graph was provided
{% endif %}
</body>
javascript
<script type="text/javascript">
$('#dropdown-btn').on('change', function () {
var frm = $('#year-form');
$.ajax({
type: frm.attr('method'),
url: "{% url 'home' %}",
data: frm.serialize(),
success: function (data) {
console.log('success')
$(graph).html(data)
},
error: function (data) {
$("#message").html("Something went wrong!");
}
});
});
</script>