django and ajax dropdown based on selected dropdown

Question

I am trying to do a dropdown menu based on the selected dropdown and filter these results.

Here what I did so far:

project_dropdown_options.html:

<option value="">---------</option>
{% for sw in result %}
<option value="{{ sw.pk }}">{{ sw.pk  }}</option>
{% endfor %}

view.py: (I checked the result I am getting values.)

def projects_dropdown(request):
    id = request.GET.get('id')
    print(id)
    result = list(SWTypes.objects.filter(proje=int(id)).values('swtype'))
    return render(request, 'project_dropdown_options.html', {'result': result})

url.py

path('ajax/projects-sw/', views.projects_dropdown, name='ajax_projects_dropdown'),

Ajax script:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script>
    $("#projects").change(function () {
      var url = $("#personForm").attr("projects-drop-url");  
      var id = $(this).val();  // get the selected projectID from the HTML input

      $.ajax({                       // initialize an AJAX request
        url: url,                   
        data: {
          'id': id       // add the project id to the GET parameters
        },
        success: function (data) {   
          $("#sw").html(data);  
        }
      });

    });
  </script>

html page where the dropdown is:

<select name="projects">
 {% for instance in projects%}
 <option value={{ instance.id }}>{{ instance.project_title }}</option>
 {% endfor %}</td>
  <td>
    <form method="post" id="personForm" projects-drop-url="{% url 'ajax_projects_dropdown' %}" novalidate>
    {% csrf_token %}
    <select name="sw" id="sw">
    <option value="">Switch Type</option>
  </td>
  </form>

I think I have error either with Ajax script or the html part where the dropdown menu is.Any idea where I am doing which error ? I am getting no error and I am getting no values at the second dropdowsn menu which is called "sw" and I am getting values of the first dropdown.

Answer 1

You are using values method in your QuerySet and only sending swtype field value in context while rendering project_dropdown_options.html

Either remove the values method

result = SWTypes.objects.filter(proje=int(id))

Or add pk as well to values

result = SWTypes.objects.filter(proje=int(id)).values('pk', 'swtype')

Also, you don't have to convert QuerySet to list, you can loop over Queryset as well in the template

<option value="">---------</option>
{% for sw in result %}
   <option value="{{ sw.pk }}">{{ sw.swtype }}</option>
{% endfor %}

UPDATE

Change your parent HTML as well, replace name attribute of select tag with id, as you have attached JQuery change event on id i.e $("#projects").change

 <td>
   <!-- add id in place of name -->
   <select id="projects">
    {% for instance in projects%}
      <option value={{ instance.id }}>{{ instance.project_title }}</option>
    {% endfor %}
   </select>
 </td>
 <td>
    <form method="post" id="personForm" projects-drop-url="{% url 'ajax_projects_dropdown' %}" novalidate>
      {% csrf_token %}
      <select name="sw" id="sw">
         <option value="">Switch Type</option>
      </select>
    </form>
 </td>

UPDATE 2

Change your ajax call, remove data property and append id to URL itself as a query parameter, and use document on event

$(document).on('change', 'select#projects', function () {
  var url = $("#personForm").attr("projects-drop-url");  
  var id = $(this).val();

  console.log("urls and project_id", url, id);

  $.ajax({
     type: "GET",
     url: url + "?id="+ id,
     success: function (data) {   
        $("#sw").html(data);  
     }
  });

});