5

I am trying to filter and display data in Django based on the selection made by the user from drop down box. I'm using ajax call to send a request to Django views. When a user selects, for example, Airline A, then Ajax will send the 'value' of that selection which is an integer to Django backend to filter data and send it back to frontend. Here is my code:

HTML:

<form method="GET">
    <select id="airline-selected">
        {% for airline in airline_list %}
            <option value="{{ airline.id }}">
            {{ airline.name }}
            </option>
        {% endfor %}
    </select>
    <input type="button" value="Update" id="selection-button" method="GET">
</form>

Ajax:

<script>
        $( "#selection-button" ).click(function(event) {
            event.preventDefault();
            var airlineSelected = $('#airline-selected').find(":selected").val();

            $.ajax({
                url: "{% url 'charts_data' %}",
                method: 'GET',
                filter_category: parseInt(airlineSelected),
                success: function(data){
                console.log(data)
         },
                error: function(error_data){
                console.log("error")
                console.log(error_data)
         }
            })
        });
    </script>

Views.py:

class ChartData(generics.ListAPIView):
    serializer_class = FinancialDataSerializer

    def get_queryset(self, *args, **kwargs):
        filter_category = self.request.GET.get("filter_category")
        queryset = FinancialData.objects.filter(airline_id=filter_category)
        queryset_filtered = queryset.filter()
        return queryset_filtered

My console.log(data) is showing an empty Array which means views are not getting filtered. How can I filter and display the data based on the selection made by the user?

Hannan
  • 1,171
  • 6
  • 20
  • 39
  • have you checked if you are getting the correct value of `filter_category` in your view. if not add a `print(self.request.GET.get("filter_category"))` statement. – badiya Aug 05 '17 at 04:40
  • @sasuke Yes its printed None on the terminal which means its not passing the correct value. Any idea why? I cant get my head around this. – Hannan Aug 05 '17 at 13:54
  • see my answer if it helps. – badiya Aug 05 '17 at 13:55

1 Answers1

7

try to modify your ajax code to add a data variable.

$.ajax({
     url: "{% url 'charts_data' %}",
     method: 'GET',
     data : {
             filter_category: parseInt(airlineSelected)
     }
     success: function(data){
         console.log(data)
     },
     error: function(xhr, errmsg, err){
         console.log("error")
         console.log(error_data)
     }
});
badiya
  • 2,247
  • 13
  • 23
  • Yes the code worked. Just for my info, why filter_category: parseInt(airlineSelected) didnt work and the variable you recommended worked? Thx a lot for your man, you saved my day. – Hannan Aug 05 '17 at 14:11
  • glad I could help. please select the small tick and mark it as correct answer so that it can be helpful for others with same problem – badiya Aug 05 '17 at 14:12
  • any data you want to send with your ajax request you need to specify it as dictionary named `data`. https://datatables.net/reference/option/ajax.data – badiya Aug 05 '17 at 14:14