Как отобразить график plotly при отправке формы в django
У меня есть форма в шаблоне django следующего вида
<div class="container">
<div class="bar_graph_container">
<form id="bar_graph_form" method="post" action="display_bar_graph">
{% csrf_token %}
<select class="form-select bar_dropdown" aria-label="Default select example" name="bar_graph_dropdown">
<option selected>Select data to visualise</option>
<option value="1">By category</option>
<option value="2">By language</option>
</select>
</form>
<div class="bar_graph_container">
</div>
</div>
</div>
При изменении значения выпадающего списка я хочу, чтобы форма отправлялась и отображала график в div.bar_graph_container
Для достижения этой цели я попробовал следующее
js файл
$(document).ready(function () {
$('.bar_dropdown').change(function (event) {
event.preventDefault();
var data = new FormData($('#bar_graph_form').get(0));
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
data: data,
cache: false,
processData: false,
contentType: false,
success: function (data) {
console.log('form submitted successfully')
console.log(data)
}
})
})
})
views.py
def display_bar_graph(request):
if request.method == 'POST':
user_select = request.POST['bar_graph_dropdown']
if int(user_select) == 1:
graph = plotly_helper.make_bar_graph('category', 'count', 'category', 'count', None)
if int(user_select) == 2:
graph = plotly_helper.make_bar_graph('language', 'count', 'language', 'count', None)
# context = {'graph': graph}
print('the form was submitted using ajax')
return JsonResponse(graph, safe=False)
Пока что-то происходит, это просто возвращает весь HTML-контент страницы в переменной data.
Печать в views.py не печатается, что заставляет меня думать, что представление даже не запущено.
Я не уверен, что я делаю неправильно
Ссылки, по которым я перешел
- how to submit form on dropdown change
- display plotly chart with top_html
- submit form with ajax when dropdown change