CODEWITHSUNDEEP
ajaxdjangofiltermodeldropdown
Tara Sutjarittham
Tara Sutjarittham

Reputation: 376

Django - Filter and display a model based on dropdown selection

I would like to display a table from a model that is filtered based on a dropdown box selection. I created a drop down using form. The values in the dropdown are distinct values of sensor_loc_blg. If the user makes a selection from the dropdown box, then table that filter all rows that have sensor_loc_blg as the selected value will be displayed.

Following is my attempt:

models.py

class SensorsTable(models.Model):
    sensor_uuid = models.CharField(primary_key=True, max_length=32)
    sensor_desc = models.CharField(max_length=256)
    sensor_mid = models.CharField(max_length=256)
    gw_uuid = models.CharField(max_length=32, blank=True, null=True)
    sensor_loc_lat = models.DecimalField(max_digits=11, decimal_places=8, blank=True, null=True)
    sensor_loc_long = models.DecimalField(max_digits=11, decimal_places=8, blank=True, null=True)
    sensor_loc_blg = models.CharField(max_length=100, blank=True, null=True)
    sensor_loc_room = models.CharField(max_length=100, blank=True, null=True)
    sensor_loc_position = models.CharField(max_length=100, blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'sensors_table'

    def __str__(self):
        return self.sensor_uuid

forms.py

from django import forms
from .models import *


class LocationChoiceField(forms.Form):

    locations = forms.ModelChoiceField(
        queryset=SensorsTable.objects.values_list("sensor_loc_blg", flat=True).distinct(),
        #empty_label=None
    )

views.py

from django.http import HttpResponse
from django.template import loader
from django.shortcuts import render
from django.views.generic.edit import CreateView
from .forms import *

from .models import *

#def index(request):
#    return HttpResponse("Smart Uni Analytics Test")


def index(request):

    if request.method =='POST':
        location_list = LocationChoiceField(request.POST)

        if location_list.is_valid():
            selected_location = location_list.cleaned_data['locations']
            query_results = SensorsTable.objects.filter(sensor_loc_blg= selected_location)

        else:
            location_list = LocationChoiceField()
            query_results = SensorsTable.objects.all()

    else:
        location_list = LocationChoiceField()
        query_results = SensorsTable.objects.all()




    context = {
        'query_results': query_results,
        'location_list': location_list,

    }
    return render(request,'analytics/index.html', context)

index.html

<body>

<div class="container">
    <p></p>
    <form method=POST action="">
        {{ location_list }}

    </form>



    <h1>All sensors</h1>
    <table>

        {% for item in query_results %}
        <tr>
            <td>{{ item.sensor_uuid }}</td>
            <td>{{ item.sensor_desc }}</td>
            <td>{{ item.sensor_mid }}</td>
            <td>{{ item.gw_uuid }}</td>
            <td>{{ item.sensor_loc_blg }}</td>
            <td>{{ item.sensor_loc_room }}</td>
            <td>{{ item.sensor_loc_position }}</td>
        </tr>
        {% endfor %}
    </table>
</div>
</body>

I'm very new to this. Can someone please tell me what's going wrong here? Do I need to use Ajax for this ?

Upvotes: 1

Views: 3500

Answers (1)

Tara Sutjarittham
Tara Sutjarittham

Reputation: 376

Solution

views.py

def index(request):


    location_list = LocationChoiceField()

    if request.GET.get('locations'):
        selected_location = request.GET.get('locations')
        query_results = SensorsTable.objects.filter(sensor_loc_blg=selected_location)
    else:
        query_results = SensorsTable.objects.all()


    context = {
        'query_results': query_results,
        'location_list': location_list,

    }
    return render(request,'analytics/index.html', context)

index.html

<body>

<div class="container">
    <p></p>
    <form method="get" action="{% url 'index' %}">
        {{ location_list }}
        <input type="submit" >
    </form>



    <h1>All sensors</h1>
    <table>

        {% for item in query_results %}
        <tr>
            <td>{{ item.sensor_uuid }}</td>
            <td>{{ item.sensor_desc }}</td>
            <td>{{ item.sensor_mid }}</td>
            <td>{{ item.gw_uuid }}</td>
            <td>{{ item.sensor_loc_blg }}</td>
            <td>{{ item.sensor_loc_room }}</td>
            <td>{{ item.sensor_loc_position }}</td>
        </tr>
        {% endfor %}
    </table>
</div>
</body>

Upvotes: 1

Related Questions