Aquí está mi código jquery
$(document).ready(function () { $('.bar_dropdown').on('change', function() { console.log("dropdown changed") $('#bar_graph_form_id').submit(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) } }) }) }) })Aquí está mi HTML
<form id="bar_graph_form_id" method="post" action="display_bar_graph" name="bar_graph_form"> {% 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>Cuando cambia el valor del menú desplegable, quiero que se envíe el formulario y se active una vista de django. esta es mi vista
def display_bar_graph(request): if request.method == 'POST': user_select = request.POST['bar_graph_dropdown'] if int(user_select) == 1: graph = open('./graphs/bar1.html', 'r').read() if int(user_select) == 2: graph = open('./graphs/bar2.html', 'r').read() context = {'html_data': graph} print('the form was submitted using ajax') return JsonResponse(context) La idea es que se muestre un gráfico plotly en bar_graph_container div cuando cambie el valor desplegable.
Pero noté que este código $('#bar_graph_form_id').submit(function(event) { no funciona. Eliminé la función del envío de la siguiente manera $('#bar_graph_form_id').submit() y funciona bien.
Me pregunto qué estoy haciendo mal.
Cambia tu código así
<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>Dentro de tu javascript agrega esto
<script> $('.bar_dropdown').on('change', function () { $.ajax({ type: "GET", url: '{% url "your_url" %}', data: { 'bar_graph_dropdown': this.value }, success: function (data) { console.log(data) }, error: function (err) { console.log(err) }, }); }) </script>y dentro de su archivo python agregue esto
def display_bar_graph(request): user_select = request.GET.get('bar_graph_dropdown') if user_select: if int(user_select) is 1: graph = open('./graphs/bar1.html', 'r').read() if int(user_select) is 2: graph = open('./graphs/bar2.html', 'r').read() context = {'html_data': graph} print('the form was submitted using ajax') return JsonResponse(context)