├── myproject
    ├── __init__.py
    ├── core
    │   ├── __init__.py
    │   ├── migrations
    │   │   ├── __init__.py
    │   │   ├── 0004_auto_20181006_0419.py
    │   │   ├── 0003_person_district.py
    │   │   ├── 0001_initial.py
    │   │   └── 0002_city_district.py
    │   ├── tests.py
    │   ├── apps.py
    │   ├── templates
    │   │   ├── includes
    │   │   │   ├── _cities_choices.html
    │   │   │   ├── _districts_choices.html
    │   │   │   ├── _districts.html
    │   │   │   └── _cities.html
    │   │   ├── nav.html
    │   │   ├── base.html
    │   │   ├── index.html
    │   │   ├── filter_dropdown2.html
    │   │   ├── filter_list.html
    │   │   └── filter_dropdown.html
    │   ├── static
    │   │   └── js
    │   │   │   └── data.js
    │   ├── admin.py
    │   ├── urls.py
    │   ├── forms.py
    │   ├── models.py
    │   └── views.py
    ├── urls.py
    ├── wsgi.py
    └── settings.py
├── requirements.txt
├── fix
    ├── cities.csv
    └── districts.csv
├── manage.py
├── contrib
    └── env_gen.py
├── import_data.py
├── .gitignore
└── README.md


/myproject/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/myproject/core/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/myproject/core/migrations/__init__.py:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/myproject/core/tests.py:
--------------------------------------------------------------------------------
1 | from django.test import TestCase
2 | 
3 | # Create your tests here.
4 | 


--------------------------------------------------------------------------------
/myproject/core/apps.py:
--------------------------------------------------------------------------------
1 | from django.apps import AppConfig
2 | 
3 | 
4 | class CoreConfig(AppConfig):
5 |     name = 'core'
6 | 


--------------------------------------------------------------------------------
/myproject/core/templates/includes/_cities_choices.html:
--------------------------------------------------------------------------------
1 | <option value="">---------------------</option>
2 | {% for city in cities %}
3 |   <option value="{{ city.pk }}">{{ city.name }}</option>
4 | {% endfor %}


--------------------------------------------------------------------------------
/myproject/urls.py:
--------------------------------------------------------------------------------
1 | from django.contrib import admin
2 | from django.urls import include, path
3 | 
4 | urlpatterns = [
5 |     path('', include('myproject.core.urls')),
6 |     path('admin/', admin.site.urls),
7 | ]
8 | 


--------------------------------------------------------------------------------
/myproject/core/templates/includes/_districts_choices.html:
--------------------------------------------------------------------------------
1 | <option value="">---------------------</option>
2 | {% for district in districts %}
3 |   <option value="{{ district.pk }}">{{ district.name }}</option>
4 | {% endfor %}


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
 1 | dj-database-url==0.5.0
 2 | Django==2.1.2
 3 | django-extensions==2.1.3
 4 | django-localflavor==2.1
 5 | django-widget-tweaks==1.4.3
 6 | names==0.3.0
 7 | python-decouple==3.1
 8 | pytz==2018.5
 9 | six==1.11.0
10 | 


--------------------------------------------------------------------------------
/myproject/core/static/js/data.js:
--------------------------------------------------------------------------------
 1 | $(document).ready( function () {
 2 |   $('#myTable1').DataTable();
 3 | 
 4 |   $('#myTable2').DataTable({
 5 |     "ajax": "/person/json/",
 6 |     "columns": [
 7 |       {"data": "name"},
 8 |       {"data": "email"},
 9 |       {"data": "phone"},
10 |       {"data": "gender"}
11 |     ]
12 |   });
13 | });
14 | 


--------------------------------------------------------------------------------
/fix/cities.csv:
--------------------------------------------------------------------------------
 1 | name,uf
 2 | Belo Horizonte,MG
 3 | Contagem,MG
 4 | Juiz De Fora,MG
 5 | Montes Claros,MG
 6 | Uberlândia,MG
 7 | Campinas,SP
 8 | Guarulhos,SP
 9 | Osasco,SP
10 | São Bernardo Do Campo,SP
11 | São Paulo,SP
12 | Búzios,RJ
13 | Niterói,RJ
14 | Paraty,RJ
15 | Petrópolis,RJ
16 | Rio De Janeiro,RJ
17 | Cascavel,PR
18 | Curitiba,PR
19 | Londrina,PR
20 | Maringá,PR
21 | São José Dos Pinhais,PR
22 | 


--------------------------------------------------------------------------------
/myproject/core/templates/includes/_districts.html:
--------------------------------------------------------------------------------
 1 | <table class="table">
 2 |   <thead>
 3 |     <tr>
 4 |       <th>Bairro</th>
 5 |       <th>Cidade</th>
 6 |       <th>UF</th>
 7 |     </tr>
 8 |   </thead>
 9 |   <tbody>
10 |     {% for district in districts %}
11 |       <tr>
12 |         <td>{{ district.name }}</td>
13 |         <td>{{ district.city }}</td>
14 |         <td>{{ district.city.uf }}</td>
15 |       </tr>
16 |     {% endfor %}
17 |   </tbody>
18 | </table>
19 | 


--------------------------------------------------------------------------------
/myproject/wsgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | WSGI config for myproject project.
 3 | 
 4 | It exposes the WSGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/2.1/howto/deployment/wsgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.wsgi import get_wsgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings')
15 | 
16 | application = get_wsgi_application()
17 | 


--------------------------------------------------------------------------------
/myproject/core/migrations/0004_auto_20181006_0419.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 2.1.2 on 2018-10-06 07:19
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('core', '0003_person_district'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.AlterField(
14 |             model_name='person',
15 |             name='phone',
16 |             field=models.CharField(blank=True, max_length=15, null=True, verbose_name='telefone'),
17 |         ),
18 |     ]
19 | 


--------------------------------------------------------------------------------
/myproject/core/templates/includes/_cities.html:
--------------------------------------------------------------------------------
 1 | <table class="table">
 2 |   <thead>
 3 |     <tr>
 4 |       <th>Cidade</th>
 5 |       <th>UF</th>
 6 |     </tr>
 7 |   </thead>
 8 |   <tbody>
 9 |     {% for city in cities %}
10 |       <tr>
11 |         <td>
12 |           <a href="" 
13 |              class="city" 
14 |              data-url="{% url 'core:districts_ajax' %}?city={{ city.pk }}" 
15 |              data-uf="{{ city.pk }}"
16 |              >{{ city.name }}</a>
17 |         </td>
18 |         <td>{{ city.uf }}</td>
19 |       </tr>
20 |     {% endfor %}
21 |   </tbody>
22 | </table>
23 | 


--------------------------------------------------------------------------------
/manage.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env python
 2 | import os
 3 | import sys
 4 | 
 5 | if __name__ == '__main__':
 6 |     os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings')
 7 |     try:
 8 |         from django.core.management import execute_from_command_line
 9 |     except ImportError as exc:
10 |         raise ImportError(
11 |             "Couldn't import Django. Are you sure it's installed and "
12 |             "available on your PYTHONPATH environment variable? Did you "
13 |             "forget to activate a virtual environment?"
14 |         ) from exc
15 |     execute_from_command_line(sys.argv)
16 | 


--------------------------------------------------------------------------------
/myproject/core/migrations/0003_person_district.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 2.1.2 on 2018-10-06 07:18
 2 | 
 3 | from django.db import migrations, models
 4 | import django.db.models.deletion
 5 | 
 6 | 
 7 | class Migration(migrations.Migration):
 8 | 
 9 |     dependencies = [
10 |         ('core', '0002_city_district'),
11 |     ]
12 | 
13 |     operations = [
14 |         migrations.AddField(
15 |             model_name='person',
16 |             name='district',
17 |             field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, to='core.District', verbose_name='bairro'),
18 |         ),
19 |     ]
20 | 


--------------------------------------------------------------------------------
/myproject/core/admin.py:
--------------------------------------------------------------------------------
 1 | from django.contrib import admin
 2 | from .models import Person, City, District
 3 | 
 4 | 
 5 | @admin.register(Person)
 6 | class PersonAdmin(admin.ModelAdmin):
 7 |     list_display = ('__str__', 'email', 'phone')
 8 |     search_fields = ('name', 'email')
 9 |     list_filter = ('gender',)
10 | 
11 | 
12 | @admin.register(City)
13 | class CityAdmin(admin.ModelAdmin):
14 |     list_display = ('__str__', 'uf')
15 |     search_fields = ('name', )
16 |     list_filter = ('uf',)
17 | 
18 | 
19 | @admin.register(District)
20 | class DistrictAdmin(admin.ModelAdmin):
21 |     list_display = ('__str__', 'city')
22 |     search_fields = ('name', 'city__name')
23 |     list_filter = ('city',)
24 | 


--------------------------------------------------------------------------------
/contrib/env_gen.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env python
 2 | 
 3 | """
 4 | Django SECRET_KEY generator.
 5 | """
 6 | from django.utils.crypto import get_random_string
 7 | 
 8 | 
 9 | chars = 'abcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*(-_=+)'
10 | 
11 | CONFIG_STRING = """
12 | DEBUG=True
13 | SECRET_KEY=%s
14 | ALLOWED_HOSTS=127.0.0.1, .localhost
15 | #DATABASE_URL=postgres://USER:PASSWORD@HOST:PORT/NAME
16 | #DEFAULT_FROM_EMAIL=
17 | #EMAIL_BACKEND=django.core.mail.backends.smtp.EmailBackend
18 | #EMAIL_HOST=
19 | #EMAIL_PORT=
20 | #EMAIL_USE_TLS=
21 | #EMAIL_HOST_USER=
22 | #EMAIL_HOST_PASSWORD=
23 | """.strip() % get_random_string(50, chars)
24 | 
25 | # Writing our configuration file to '.env'
26 | with open('.env', 'w') as configfile:
27 |     configfile.write(CONFIG_STRING)
28 | 


--------------------------------------------------------------------------------
/myproject/core/urls.py:
--------------------------------------------------------------------------------
 1 | from django.urls import path
 2 | from myproject.core import views as v
 3 | 
 4 | app_name = 'core'
 5 | 
 6 | urlpatterns = [
 7 |     path('', v.index, name='index'),
 8 |     path('person/json/', v.person_json, name='person_json'),
 9 |     path('filter_list/', v.filter_list, name='filter_list'),
10 |     path('filter_dropdown/', v.filter_dropdown, name='filter_dropdown'),
11 |     path('filter_dropdown2/', v.filter_dropdown2, name='filter_dropdown2'),
12 |     path('cities/ajax/', v.cities_ajax, name='cities_ajax'),
13 |     path(
14 |         'cities/choices/ajax/',
15 |         v.cities_choices_ajax,
16 |         name='cities_choices_ajax'
17 |     ),
18 |     path('districts/ajax/', v.districts_ajax, name='districts_ajax'),
19 |     path(
20 |         'districts/choices/ajax/',
21 |         v.districts_choices_ajax,
22 |         name='districts_choices_ajax'
23 |     ),
24 | ]
25 | 


--------------------------------------------------------------------------------
/myproject/core/forms.py:
--------------------------------------------------------------------------------
 1 | from django import forms
 2 | from localflavor.br.br_states import STATE_CHOICES
 3 | from .models import City, District
 4 | 
 5 | 
 6 | class StateForm(forms.Form):
 7 |     state = forms.ChoiceField(
 8 |         choices=STATE_CHOICES,
 9 |         label='Estado',
10 |         # widget=forms.Select(
11 |         #     attrs={'class': 'form-control'}
12 |         # )
13 |     )
14 |     city = forms.ModelChoiceField(
15 |         queryset=City.objects.none(),
16 |         required=False
17 |     )
18 |     district = forms.ModelChoiceField(
19 |         queryset=District.objects.none(),
20 |         required=False
21 |     )
22 | 
23 |     class Meta:
24 |         fields = ('state', 'city', 'district')
25 | 
26 |     def __init__(self, state=None, city=None, *args, **kwargs):
27 |         super().__init__(*args, **kwargs)
28 |         self.fields['city'].queryset = City.objects.filter(uf=state)
29 |         if city:
30 |             self.fields['district'].queryset = District.objects.filter(
31 |                 city=city)
32 | 


--------------------------------------------------------------------------------
/myproject/core/migrations/0001_initial.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 2.1.2 on 2018-10-03 22:55
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     initial = True
 9 | 
10 |     dependencies = [
11 |     ]
12 | 
13 |     operations = [
14 |         migrations.CreateModel(
15 |             name='Person',
16 |             fields=[
17 |                 ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
18 |                 ('name', models.CharField(max_length=100, verbose_name='nome')),
19 |                 ('email', models.EmailField(blank=True, max_length=254, null=True)),
20 |                 ('phone', models.CharField(blank=True, max_length=11, null=True, verbose_name='telefone')),
21 |                 ('gender', models.CharField(choices=[('0', ''), ('man', 'homem'), ('woman', 'mulher')], default='0', max_length=5, verbose_name='sexo')),
22 |             ],
23 |             options={
24 |                 'verbose_name': 'Contato',
25 |                 'verbose_name_plural': 'Contatos',
26 |                 'ordering': ('name',),
27 |             },
28 |         ),
29 |     ]
30 | 


--------------------------------------------------------------------------------
/import_data.py:
--------------------------------------------------------------------------------
 1 | import csv
 2 | import django
 3 | import os
 4 | 
 5 | os.environ.setdefault("DJANGO_SETTINGS_MODULE", "myproject.settings")
 6 | django.setup()
 7 | 
 8 | import names
 9 | import string
10 | from random import choice
11 | from django.utils.text import slugify
12 | from myproject.core.models import Person, City, District
13 | 
14 | 
15 | City.objects.all().delete()
16 | District.objects.all().delete()
17 | 
18 | cities = []
19 | with open('fix/cities.csv') as csvfile:
20 |     rows = csv.DictReader(csvfile)
21 |     for row in rows:
22 |         city = City(name=row['name'], uf=row['uf'])
23 |         cities.append(city)
24 | 
25 | City.objects.bulk_create(cities)
26 | 
27 | 
28 | districts = []
29 | with open('fix/districts.csv') as csvfile:
30 |     rows = csv.DictReader(csvfile)
31 |     for row in rows:
32 |         city = City.objects.get(name=row['city'])
33 |         district = District(name=row['name'], city=city)
34 |         districts.append(district)
35 | 
36 | District.objects.bulk_create(districts)
37 | 
38 | 
39 | def gen_digits(max_length):
40 |     return str(''.join(choice(string.digits) for i in range(max_length)))
41 | 
42 | 
43 | districts = District.objects.all()
44 | districts_list = []
45 | 
46 | for district in districts:
47 |     for _ in range(7):
48 |         name = names.get_full_name()
49 |         email = slugify(name) + '@email.com'
50 |         phone = gen_digits(11)
51 |         data = dict(name=name, email=email, phone=phone, district=district)
52 |         districts_list.append(Person(**data))
53 |         print(Person(**data))
54 | 
55 | Person.objects.bulk_create(districts_list)
56 | 


--------------------------------------------------------------------------------
/myproject/core/templates/nav.html:
--------------------------------------------------------------------------------
 1 | <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
 2 |   <a class="navbar-brand" href="#">Exemplo</a>
 3 |   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
 4 |     <span class="navbar-toggler-icon"></span>
 5 |   </button>
 6 | 
 7 |   <div class="collapse navbar-collapse" id="navbarsExampleDefault">
 8 |     <ul class="navbar-nav mr-auto">
 9 |       <li class="nav-item active">
10 |         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
11 |       </li>
12 |       <li class="nav-item">
13 |         <a class="nav-link" href="{% url 'core:filter_list' %}">Filtrando lista</a>
14 |       </li>
15 |       <li class="nav-item">
16 |         <a class="nav-link" href="{% url 'core:filter_dropdown' %}">Filtrando com dropdown</a>
17 |       </li>
18 |       <li class="nav-item">
19 |         <a class="nav-link" href="{% url 'core:filter_dropdown2' %}">Filtrando com dropdown com Django Forms</a>
20 |       </li>
21 |       <!-- <li class="nav-item dropdown">
22 |         <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
23 |         <div class="dropdown-menu" aria-labelledby="dropdown01">
24 |           <a class="dropdown-item" href="#">Action</a>
25 |           <a class="dropdown-item" href="#">Another action</a>
26 |           <a class="dropdown-item" href="#">Something else here</a>
27 |         </div>
28 |       </li> -->
29 |     </ul>
30 |   </div>
31 | </nav>


--------------------------------------------------------------------------------
/myproject/core/templates/base.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <!-- Required meta tags -->
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 7 |   <meta name="description" content="">
 8 |   <meta name="author" content="">
 9 |   <link rel="icon" href="https://www.djangoproject.com/s/img/icon-touch.e4872c4da341.png">
10 | 
11 |   <!-- Bootstrap CSS -->
12 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
13 | 
14 |   <!-- Font-awesome -->
15 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
16 | 
17 |   <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
18 | 
19 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
20 | 
21 |   <title>Chained Dropdown</title>
22 | 
23 |   <style>
24 |     body {
25 |       padding-top: 3.5rem;
26 |     }
27 |   </style>
28 | </head>
29 | <body>
30 | 
31 |     {% include "nav.html" %}
32 | 
33 |     <main role="main">
34 | 
35 |     {% block content %}{% endblock content %}
36 | 
37 |     </main>
38 | 
39 |     <footer class="container">
40 |       <p>&copy; Company 2018</p>
41 |     </footer>
42 | 
43 |   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
44 |   <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
45 |   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
46 |   <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
47 | 
48 |   {% block js %}{% endblock js %}
49 | </body>
50 | </html>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Byte-compiled / optimized / DLL files
  2 | __pycache__/
  3 | *.py[cod]
  4 | *$py.class
  5 | 
  6 | # C extensions
  7 | *.so
  8 | 
  9 | # Distribution / packaging
 10 | .Python
 11 | build/
 12 | develop-eggs/
 13 | dist/
 14 | downloads/
 15 | eggs/
 16 | .eggs/
 17 | lib/
 18 | lib64/
 19 | parts/
 20 | sdist/
 21 | var/
 22 | wheels/
 23 | *.egg-info/
 24 | .installed.cfg
 25 | *.egg
 26 | MANIFEST
 27 | 
 28 | # PyInstaller
 29 | #  Usually these files are written by a python script from a template
 30 | #  before PyInstaller builds the exe, so as to inject date/other infos into it.
 31 | *.manifest
 32 | *.spec
 33 | 
 34 | # Installer logs
 35 | pip-log.txt
 36 | pip-delete-this-directory.txt
 37 | 
 38 | # Unit test / coverage reports
 39 | htmlcov/
 40 | .tox/
 41 | .coverage
 42 | .coverage.*
 43 | .cache
 44 | nosetests.xml
 45 | coverage.xml
 46 | *.cover
 47 | .hypothesis/
 48 | .pytest_cache/
 49 | 
 50 | # Translations
 51 | *.mo
 52 | *.pot
 53 | 
 54 | # Django stuff:
 55 | *.log
 56 | local_settings.py
 57 | db.sqlite3
 58 | 
 59 | # Flask stuff:
 60 | instance/
 61 | .webassets-cache
 62 | 
 63 | # Scrapy stuff:
 64 | .scrapy
 65 | 
 66 | # Sphinx documentation
 67 | docs/_build/
 68 | 
 69 | # PyBuilder
 70 | target/
 71 | 
 72 | # Jupyter Notebook
 73 | .ipynb_checkpoints
 74 | 
 75 | # pyenv
 76 | .python-version
 77 | 
 78 | # celery beat schedule file
 79 | celerybeat-schedule
 80 | 
 81 | # SageMath parsed files
 82 | *.sage.py
 83 | 
 84 | # Environments
 85 | .env
 86 | .venv
 87 | env/
 88 | venv/
 89 | ENV/
 90 | env.bak/
 91 | venv.bak/
 92 | 
 93 | # Spyder project settings
 94 | .spyderproject
 95 | .spyproject
 96 | 
 97 | # Rope project settings
 98 | .ropeproject
 99 | 
100 | # mkdocs documentation
101 | /site
102 | 
103 | # mypy
104 | .mypy_cache/
105 | 


--------------------------------------------------------------------------------
/myproject/core/templates/index.html:
--------------------------------------------------------------------------------
 1 | {% extends "base.html" %}
 2 | {% load static %}
 3 | 
 4 | {% block content %}
 5 | 
 6 | <!-- Main jumbotron for a primary marketing message or call to action -->
 7 | <div class="jumbotron">
 8 |   <div class="container">
 9 |     <h2>Exemplo do uso de <a href="https://datatables.net/" target="_blank">DataTables</a></h2>
10 |     <p>Exemplo do uso de DataTables com Django.</p>
11 |     <!-- <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p> -->
12 |   </div>
13 | </div>
14 | 
15 | <div class="container">
16 |   <!-- Example row of columns -->
17 |   <div class="row">
18 |     <div class="col-md-6">
19 |       <h2>Contatos</h2>
20 |       <table id="myTable1" class="table">
21 |         <thead>
22 |           <tr>
23 |             <th>Nome</th>
24 |             <th>E-mail</th>
25 |             <th>Telefone</th>
26 |             <th>Gênero</th>
27 |           </tr>
28 |         </thead>
29 |         <tbody>
30 |           {% for person in person_list %}
31 |             <tr>
32 |               <td>{{ person.name }}</td>
33 |               <td>{{ person.email }}</td>
34 |               <td>{{ person.phone }}</td>
35 |               <td>{{ person.get_gender_display }}</td>
36 |             </tr>
37 |           {% endfor %}
38 |         </tbody>
39 |       </table>
40 |     </div>
41 |     <div class="col-md-6">
42 |       <h2>Contatos via JSON</h2>
43 |       <table id="myTable2" class="table">
44 |         <thead>
45 |           <tr>
46 |             <th>Nome</th>
47 |             <th>E-mail</th>
48 |             <th>Telefone</th>
49 |             <th>Gênero</th>
50 |           </tr>
51 |         </thead>
52 |       </table>
53 |     </div>
54 |   </div>
55 | 
56 |   <hr>
57 | 
58 | </div> <!-- /container -->
59 | 
60 | {% endblock content %}
61 | 
62 | {% block js %}
63 | 
64 | <script src="{% static 'js/data.js' %}"></script>
65 | 
66 | {% endblock js %}
67 | 


--------------------------------------------------------------------------------
/myproject/core/models.py:
--------------------------------------------------------------------------------
 1 | from django.db import models
 2 | from localflavor.br.br_states import STATE_CHOICES
 3 | 
 4 | 
 5 | class Person(models.Model):
 6 |     name = models.CharField('nome', max_length=100)
 7 |     email = models.EmailField(null=True, blank=True)
 8 |     phone = models.CharField('telefone', max_length=15, null=True, blank=True)
 9 |     GENDER = (
10 |         ('0', ''),
11 |         ('man', 'homem'),
12 |         ('woman', 'mulher'),
13 |     )
14 |     gender = models.CharField(
15 |         'sexo',
16 |         max_length=5,
17 |         choices=GENDER,
18 |         default='0'
19 |     )
20 |     district = models.ForeignKey(
21 |         'District',
22 |         verbose_name='bairro',
23 |         on_delete=models.CASCADE,
24 |         null=True,
25 |         blank=True
26 |     )
27 | 
28 |     class Meta:
29 |         ordering = ('name',)
30 |         verbose_name = 'Contato'
31 |         verbose_name_plural = 'Contatos'
32 | 
33 |     def __str__(self):
34 |         return self.name
35 | 
36 |     def to_dict_json(self):
37 |         return {
38 |             'pk': self.pk,
39 |             'name': self.name,
40 |             'email': self.email,
41 |             'phone': self.phone,
42 |             'gender': self.get_gender_display(),
43 |         }
44 | 
45 | 
46 | class City(models.Model):
47 |     name = models.CharField('cidade', max_length=100)
48 |     uf = models.CharField('UF', max_length=2, choices=STATE_CHOICES)
49 | 
50 |     def __str__(self):
51 |         return self.name
52 | 
53 |     class Meta:
54 |         ordering = ('name',)
55 |         verbose_name = 'cidade'
56 |         verbose_name_plural = 'cidades'
57 | 
58 | 
59 | class District(models.Model):
60 |     name = models.CharField('distrito', max_length=100)
61 |     city = models.ForeignKey(
62 |         'City',
63 |         verbose_name='cidade',
64 |         on_delete=models.CASCADE,
65 |     )
66 | 
67 |     def __str__(self):
68 |         return self.name
69 | 
70 |     class Meta:
71 |         ordering = ('name',)
72 |         verbose_name = 'distrito'
73 |         verbose_name_plural = 'distritos'
74 | 


--------------------------------------------------------------------------------
/myproject/core/migrations/0002_city_district.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 2.1.2 on 2018-10-06 05:02
 2 | 
 3 | from django.db import migrations, models
 4 | import django.db.models.deletion
 5 | 
 6 | 
 7 | class Migration(migrations.Migration):
 8 | 
 9 |     dependencies = [
10 |         ('core', '0001_initial'),
11 |     ]
12 | 
13 |     operations = [
14 |         migrations.CreateModel(
15 |             name='City',
16 |             fields=[
17 |                 ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
18 |                 ('name', models.CharField(max_length=100, verbose_name='cidade')),
19 |                 ('uf', models.CharField(choices=[('AC', 'Acre'), ('AL', 'Alagoas'), ('AP', 'Amapá'), ('AM', 'Amazonas'), ('BA', 'Bahia'), ('CE', 'Ceará'), ('DF', 'Distrito Federal'), ('ES', 'Espírito Santo'), ('GO', 'Goiás'), ('MA', 'Maranhão'), ('MT', 'Mato Grosso'), ('MS', 'Mato Grosso do Sul'), ('MG', 'Minas Gerais'), ('PA', 'Pará'), ('PB', 'Paraíba'), ('PR', 'Paraná'), ('PE', 'Pernambuco'), ('PI', 'Piauí'), ('RJ', 'Rio de Janeiro'), ('RN', 'Rio Grande do Norte'), ('RS', 'Rio Grande do Sul'), ('RO', 'Rondônia'), ('RR', 'Roraima'), ('SC', 'Santa Catarina'), ('SP', 'São Paulo'), ('SE', 'Sergipe'), ('TO', 'Tocantins')], max_length=2, verbose_name='UF')),
20 |             ],
21 |             options={
22 |                 'verbose_name': 'cidade',
23 |                 'verbose_name_plural': 'cidades',
24 |                 'ordering': ('name',),
25 |             },
26 |         ),
27 |         migrations.CreateModel(
28 |             name='District',
29 |             fields=[
30 |                 ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
31 |                 ('name', models.CharField(max_length=100, verbose_name='distrito')),
32 |                 ('city', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='core.City', verbose_name='cidade')),
33 |             ],
34 |             options={
35 |                 'verbose_name': 'distrito',
36 |                 'verbose_name_plural': 'distritos',
37 |                 'ordering': ('name',),
38 |             },
39 |         ),
40 |     ]
41 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # django-chained-dropdown-experiment
 2 | 
 3 | Experiment chained dropdown list with Django.
 4 | 
 5 | Video no [YouTube](https://youtu.be/ZOQwyFEFmS4)
 6 | 
 7 | ## Como rodar este projeto?
 8 | 
 9 | * Clone esse repositório.
10 | * Crie um virtualenv com Python 3.
11 | * Ative o virtualenv.
12 | * Instale as dependências.
13 | * Rode as migrações.
14 | 
15 | ```
16 | git clone https://github.com/rg3915/django-chained-dropdown-experiment.git
17 | cd django-chained-dropdown-experiment
18 | python3 -m venv .venv
19 | source .venv/bin/activate
20 | pip install -r requirements.txt
21 | python contrib/env_gen.py
22 | python manage.py migrate
23 | ```
24 | 
25 | ## Tutorial
26 | 
27 | Vamos começar com base no projeto [django-datatables-experiment](https://github.com/rg3915/django-datatables-experiment).
28 | 
29 | ```
30 | git clone https://github.com/rg3915/django-datatables-experiment.git
31 | ```
32 | 
33 | A partir dai assista o video no [YouTube](https://youtu.be/ZOQwyFEFmS4).
34 | 
35 | ### Anotações mostradas no video:
36 | 
37 | #### Copiando arquivos
38 | 
39 | ```
40 | cp -r django-datatables-experiment/contrib/ .
41 | cp -r django-datatables-experiment/myproject/ .
42 | cp django-datatables-experiment/manage.py .
43 | cp django-datatables-experiment/requirements.txt .
44 | cp django-datatables-experiment/.gitignore .
45 | rm -rf django-datatables-experiment/
46 | ```
47 | 
48 | #### Iniciando o projeto
49 | 
50 | ```
51 | python -V
52 | python -m venv .venv
53 | source .venv/bin/activate
54 | pip install -U pip
55 | pip install -r requirements.txt
56 | python contrib/env_gen.py
57 | python manage.py migrate
58 | python manage.py createsuperuser --username='admin'
59 | ```
60 | 
61 | #### Resetando a senha
62 | 
63 | ```python
64 | python manage.py shell_plus
65 | user = User.objects.get(username='admin')
66 | user.set_password('d')
67 | user.save()
68 | exit()
69 | ```
70 | 
71 | #### Importando os dados
72 | 
73 | ```
74 | mkdir fix
75 | cd fix
76 | wget https://raw.githubusercontent.com/rg3915/django-chained-dropdown-experiment/master/fix/cities.csv
77 | wget https://raw.githubusercontent.com/rg3915/django-chained-dropdown-experiment/master/fix/districts.csv
78 | cd ..
79 | python import_data.py
80 | ```
81 | 
82 | #### Lendo os dados
83 | 
84 | ```python
85 | python manage.py shell_plus
86 | City.objects.all()
87 | City.objects.all().count()
88 | Distric.objects.last()
89 | Distric.objects.all().count()
90 | ```
91 | 
92 | 
93 | ### Referências
94 | 
95 | [How to Implement Dependent/Chained Dropdown List with Django](https://simpleisbetterthancomplex.com/tutorial/2018/01/29/how-to-implement-dependent-or-chained-dropdown-list-with-django.html)
96 | 
97 | https://django-localflavor.readthedocs.io/en/latest/localflavor/br/
98 | 


--------------------------------------------------------------------------------
/myproject/core/views.py:
--------------------------------------------------------------------------------
 1 | from django.http import JsonResponse
 2 | from django.shortcuts import render
 3 | from localflavor.br.br_states import STATE_CHOICES
 4 | from .forms import StateForm
 5 | from .models import Person, City, District
 6 | 
 7 | 
 8 | def index(request):
 9 |     context = {}
10 |     person_list = Person.objects.all()
11 |     context['person_list'] = person_list
12 |     return render(request, 'index.html', context)
13 | 
14 | 
15 | def person_json(request):
16 |     persons = Person.objects.all()
17 |     data = [person.to_dict_json() for person in persons]
18 |     response = {'data': data}
19 |     return JsonResponse(response)
20 | 
21 | 
22 | def filter_list(request):
23 |     context = {}
24 |     cities = City.objects.all()
25 |     districts = District.objects.all()
26 |     # context['states'] = STATE_CHOICES
27 |     context['states'] = (
28 |         ('MG', 'Minas Gerais'),
29 |         ('PR', 'Paraná'),
30 |         ('RJ', 'Rio de Janeiro'),
31 |         ('SP', 'São Paulo'),
32 |     )
33 |     context['cities'] = cities
34 |     context['districts'] = districts
35 |     return render(request, 'filter_list.html', context)
36 | 
37 | 
38 | def filter_dropdown(request):
39 |     context = {}
40 |     context['form'] = StateForm
41 |     # Filtro
42 |     q = request.GET.get('district')
43 |     if q:
44 |         q = q.replace('.', '')
45 |         persons = Person.objects.filter(district=str(q))
46 |         context['persons'] = persons
47 |     return render(request, 'filter_dropdown.html', context)
48 | 
49 | 
50 | def filter_dropdown2(request):
51 |     context = {}
52 |     state = request.GET.get('state')
53 |     city = request.GET.get('city')
54 |     context['form'] = StateForm(state, city)
55 |     # Filtro
56 |     q = request.GET.get('district')
57 |     if q:
58 |         q = q.replace('.', '')
59 |         persons = Person.objects.filter(district=str(q))
60 |         context['persons'] = persons
61 |     return render(request, 'filter_dropdown2.html', context)
62 | 
63 | 
64 | def cities_ajax(request):
65 |     uf = request.GET.get('uf')
66 |     cities = City.objects.filter(uf=uf)
67 |     context = {'cities': cities}
68 |     return render(request, 'includes/_cities.html', context)
69 | 
70 | 
71 | def cities_choices_ajax(request):
72 |     uf = request.GET.get('uf')
73 |     cities = City.objects.filter(uf=uf)
74 |     context = {'cities': cities}
75 |     return render(request, 'includes/_cities_choices.html', context)
76 | 
77 | 
78 | def districts_ajax(request):
79 |     city = request.GET.get('city')
80 |     districts = District.objects.filter(city=city)
81 |     context = {'districts': districts}
82 |     return render(request, 'includes/_districts.html', context)
83 | 
84 | 
85 | def districts_choices_ajax(request):
86 |     city = request.GET.get('city')
87 |     districts = District.objects.filter(city=city)
88 |     context = {'districts': districts}
89 |     return render(request, 'includes/_districts_choices.html', context)
90 | 


--------------------------------------------------------------------------------
/myproject/core/templates/filter_dropdown2.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | {% load static %}
  3 | {% load widget_tweaks %}
  4 | 
  5 | {% block content %}
  6 | 
  7 | <style>
  8 |   label {
  9 |     padding: 10px;
 10 |   }
 11 | </style>
 12 | 
 13 | <div class="jumbotron">
 14 |   <div class="container">
 15 |     <h2>Exemplo do uso de um filtro com dropdowns dependentes.</h2>
 16 |     <p><i>Segundo choice filtrado a partir do primeiro choice.</i></p>
 17 | 
 18 |     <div style="border: dashed 1px grey;">
 19 |       <form id="myForm"
 20 |             method="GET"
 21 |             class="form-inline"
 22 |             data-state="{{ request.GET.state }}"
 23 |             data-city="{{ request.GET.city }}"
 24 |             data-district="{{ request.GET.district }}"
 25 |             >
 26 |         <div class="form-group">
 27 |           <label for="stateSelect">Estado</label>
 28 |           {% render_field form.state title="Estados" class="form-control" %}
 29 |         </div>
 30 | 
 31 |         <div class="form-group">
 32 |           <label for="citySelect">Cidade</label>
 33 |           {% render_field form.city title="Cidades" class="form-control" %}
 34 |         </div>
 35 | 
 36 |         <div class="form-group">
 37 |           <label for="districtSelect">Bairro</label>
 38 |           {% render_field form.district title="Bairro" class="form-control" %}
 39 |         </div>
 40 | 
 41 |         <div class="form-group">
 42 |           <button id="btnSubmit" class="btn btn-success" type="submit">Filtrar</button>
 43 |         </div>
 44 |       </form>
 45 |     </div>
 46 | 
 47 |   </div>
 48 | </div>
 49 | 
 50 | <div class="container">
 51 |   <!-- Example row of columns -->
 52 |   <div class="row">
 53 |     <div class="col">
 54 |       <table class="table">
 55 |         <thead>
 56 |           <tr>
 57 |             <th>Nome</th>
 58 |             <th>E-mail</th>
 59 |             <th>Telefone</th>
 60 |             <th>Bairro</th>
 61 |             <th>Cidade</th>
 62 |             <th>UF</th>
 63 |           </tr>
 64 |         </thead>
 65 |         <tbody>
 66 |           {% for person in persons %}
 67 |             <tr>
 68 |               <td>{{ person.name }}</td>
 69 |               <td>{{ person.email }}</td>
 70 |               <td>{{ person.phone }}</td>
 71 |               <td>{{ person.district }}</td>
 72 |               <td>{{ person.district.city }}</td>
 73 |               <td>{{ person.district.city.uf }}</td>
 74 |             </tr>
 75 |           {% endfor %}
 76 |         </tbody>
 77 |       </table>
 78 |     </div>
 79 |   </div>
 80 | </div>
 81 | 
 82 |   <hr>
 83 | 
 84 | </div> <!-- /container -->
 85 | 
 86 | {% endblock content %}
 87 | 
 88 | {% block js %}
 89 |   <script>
 90 |     $(document).ready(function() {
 91 |       let state = $('#myForm').data('state')
 92 |       let city = $('#myForm').data('city')
 93 |       let district = $('#myForm').data('district')
 94 |       if (state) {
 95 |         $('#id_state option[value='+state+']').attr('selected', 'selected');
 96 |       }
 97 |       if (city) {
 98 |         $('#id_city option[value='+city+']').attr('selected', 'selected');
 99 |       }
100 |       if (district) {
101 |         $('#id_district option[value='+district+']').attr('selected', 'selected');
102 |       }
103 |     });
104 | 
105 |     $('#id_state').on('change', function() {
106 |       $('#btnSubmit').click();
107 |     });
108 | 
109 |     $('#id_city').on('change', function() {
110 |       $('#btnSubmit').click();
111 |     });
112 |   </script>
113 | {% endblock js %}


--------------------------------------------------------------------------------
/myproject/settings.py:
--------------------------------------------------------------------------------
  1 | import os
  2 | from decouple import config, Csv
  3 | from dj_database_url import parse as dburl
  4 | 
  5 | # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
  6 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
  7 | 
  8 | 
  9 | # Quick-start development settings - unsuitable for production
 10 | # See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/
 11 | 
 12 | # SECURITY WARNING: keep the secret key used in production secret!
 13 | SECRET_KEY = config('SECRET_KEY')
 14 | 
 15 | # SECURITY WARNING: don't run with debug turned on in production!
 16 | DEBUG = config('DEBUG', default=False, cast=bool)
 17 | 
 18 | ALLOWED_HOSTS = config('ALLOWED_HOSTS', default=[], cast=Csv())
 19 | 
 20 | 
 21 | # Application definition
 22 | 
 23 | INSTALLED_APPS = [
 24 |     'django.contrib.admin',
 25 |     'django.contrib.auth',
 26 |     'django.contrib.contenttypes',
 27 |     'django.contrib.sessions',
 28 |     'django.contrib.messages',
 29 |     'django.contrib.staticfiles',
 30 |     'django_extensions',
 31 |     'widget_tweaks',
 32 |     'myproject.core',
 33 | ]
 34 | 
 35 | MIDDLEWARE = [
 36 |     'django.middleware.security.SecurityMiddleware',
 37 |     'django.contrib.sessions.middleware.SessionMiddleware',
 38 |     'django.middleware.common.CommonMiddleware',
 39 |     'django.middleware.csrf.CsrfViewMiddleware',
 40 |     'django.contrib.auth.middleware.AuthenticationMiddleware',
 41 |     'django.contrib.messages.middleware.MessageMiddleware',
 42 |     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 43 | ]
 44 | 
 45 | ROOT_URLCONF = 'myproject.urls'
 46 | 
 47 | TEMPLATES = [
 48 |     {
 49 |         'BACKEND': 'django.template.backends.django.DjangoTemplates',
 50 |         'DIRS': [],
 51 |         'APP_DIRS': True,
 52 |         'OPTIONS': {
 53 |             'context_processors': [
 54 |                 'django.template.context_processors.debug',
 55 |                 'django.template.context_processors.request',
 56 |                 'django.contrib.auth.context_processors.auth',
 57 |                 'django.contrib.messages.context_processors.messages',
 58 |             ],
 59 |         },
 60 |     },
 61 | ]
 62 | 
 63 | WSGI_APPLICATION = 'myproject.wsgi.application'
 64 | 
 65 | 
 66 | # Database
 67 | # https://docs.djangoproject.com/en/2.1/ref/settings/#databases
 68 | 
 69 | default_dburl = 'sqlite:///' + os.path.join(BASE_DIR, 'db.sqlite3')
 70 | DATABASES = {
 71 |     'default': config('DATABASE_URL', default=default_dburl, cast=dburl),
 72 | }
 73 | 
 74 | 
 75 | # Password validation
 76 | # https://docs.djangoproject.com/en/2.1/ref/settings/#auth-password-validators
 77 | 
 78 | AUTH_PASSWORD_VALIDATORS = [
 79 |     {
 80 |         'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
 81 |     },
 82 |     {
 83 |         'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
 84 |     },
 85 |     {
 86 |         'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
 87 |     },
 88 |     {
 89 |         'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
 90 |     },
 91 | ]
 92 | 
 93 | 
 94 | # Internationalization
 95 | # https://docs.djangoproject.com/en/2.1/topics/i18n/
 96 | 
 97 | LANGUAGE_CODE = 'pt-br'
 98 | 
 99 | TIME_ZONE = 'America/Sao_Paulo'
100 | 
101 | USE_I18N = True
102 | 
103 | USE_L10N = True
104 | 
105 | USE_TZ = True
106 | 
107 | USE_THOUSAND_SEPARATOR = True
108 | 
109 | 
110 | # Static files (CSS, JavaScript, Images)
111 | # https://docs.djangoproject.com/en/2.1/howto/static-files/
112 | 
113 | STATIC_URL = '/static/'
114 | STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
115 | 


--------------------------------------------------------------------------------
/myproject/core/templates/filter_list.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | {% load static %}
  3 | {% load widget_tweaks %}
  4 | 
  5 | {% block content %}
  6 | 
  7 | <style>
  8 |   label {
  9 |     padding: 10px;
 10 |   }
 11 | </style>
 12 | 
 13 | <div class="jumbotron">
 14 |   <div class="container">
 15 |     <h2>Exemplo de como filtrar várias listas.</h2>
 16 |   </div>
 17 | </div>
 18 | 
 19 | <div class="container">
 20 |   <!-- Example row of columns -->
 21 |   <div class="row">
 22 |     <div class="col">
 23 |       <h5>Estados</h5>
 24 |       <table class="table">
 25 |         <thead>
 26 |           <tr>
 27 |             <th>Estado</th>
 28 |             <th>UF</th>
 29 |           </tr>
 30 |         </thead>
 31 |         <tbody>
 32 |           {% for state in states %}
 33 |             <tr>
 34 |               <td>
 35 |                 <a href="" 
 36 |                    class="state" 
 37 |                    data-url="{% url 'core:cities_ajax' %}?uf={{ state.0 }}" 
 38 |                    data-uf="{{ state.0 }}"
 39 |                    >{{ state.1 }}</a>
 40 |               </td>
 41 |               <td>{{ state.0 }}</td>
 42 |             </tr>
 43 |           {% endfor %}
 44 |         </tbody>
 45 |       </table>
 46 |     </div>
 47 |     <div class="col">
 48 |       <!-- <table class="table">
 49 |         <thead>
 50 |           <tr>
 51 |             <th>Cidade</th>
 52 |             <th>UF</th>
 53 |           </tr>
 54 |         </thead>
 55 |         <tbody>
 56 |           {% for city in cities %}
 57 |             <tr>
 58 |               <td>{{ city.name }}</td>
 59 |               <td>{{ city.uf }}</td>
 60 |             </tr>
 61 |           {% endfor %}
 62 |         </tbody>
 63 |       </table> -->
 64 |       <div class="cities">
 65 |         <h5>Cidades</h5>
 66 |         <div id="id_cities"></div>
 67 |       </div>
 68 |     </div>
 69 |     <div class="col">
 70 |       <!-- <table class="table">
 71 |         <thead>
 72 |           <tr>
 73 |             <th>Bairro</th>
 74 |             <th>Cidade</th>
 75 |             <th>UF</th>
 76 |           </tr>
 77 |         </thead>
 78 |         <tbody>
 79 |           {% for district in districts %}
 80 |             <tr>
 81 |               <td>{{ district.name }}</td>
 82 |               <td>{{ district.city }}</td>
 83 |               <td>{{ district.city.uf }}</td>
 84 |             </tr>
 85 |           {% endfor %}
 86 |         </tbody>
 87 |       </table> -->
 88 |       <div class="districts">
 89 |         <h5>Bairros</h5>
 90 |         <div id="id_districts"></div>
 91 |       </div>
 92 |     </div>
 93 |   </div>
 94 | </div>
 95 | 
 96 |   <hr>
 97 | 
 98 | </div> <!-- /container -->
 99 | 
100 | {% endblock content %}
101 | 
102 | {% block js %}
103 | 
104 |   <script>
105 |     $('.state').on('click', function(event) {
106 |       let url = $(this).data('url');
107 |       let uf = $(this).data('uf');
108 |       console.log(url);
109 | 
110 |       $.ajax({
111 |         url: url,
112 |         data: {
113 |           uf: uf
114 |         },
115 |         success: function(response) {
116 |           $('#id_cities').html(response);
117 |           $('#id_districts').html('');
118 |         }
119 |       })
120 |       event.preventDefault();
121 |     });
122 | 
123 |     $(document).on('click', '.city', function(event) {
124 |       let url = $(this).data('url');
125 |       let uf = $(this).data('uf');
126 |       console.log(url);
127 | 
128 |       $.ajax({
129 |         url: url,
130 |         data: {
131 |           uf: uf
132 |         },
133 |         success: function(response) {
134 |           $('#id_districts').html(response);
135 |         }
136 |       })
137 |       event.preventDefault();
138 |     });
139 |   </script>
140 | 
141 | {% endblock js %}


--------------------------------------------------------------------------------
/myproject/core/templates/filter_dropdown.html:
--------------------------------------------------------------------------------
  1 | {% extends "base.html" %}
  2 | {% load static %}
  3 | {% load widget_tweaks %}
  4 | 
  5 | {% block content %}
  6 | 
  7 | <style>
  8 |   label {
  9 |     padding: 10px;
 10 |   }
 11 | </style>
 12 | 
 13 | <div class="jumbotron">
 14 |   <div class="container">
 15 |     <h2>Exemplo do uso de um filtro com dropdowns dependentes.</h2>
 16 |     <p><i>Segundo choice filtrado a partir do primeiro choice.</i></p>
 17 |     <p><a href="https://simpleisbetterthancomplex.com/tutorial/2018/01/29/how-to-implement-dependent-or-chained-dropdown-list-with-django.html" target="_blank">How to Implement Dependent/Chained Dropdown List with Django</a></p>
 18 | 
 19 |     <div style="border: dashed 1px grey;">
 20 |       <form id="myForm"
 21 |             method="GET"
 22 |             class="form-inline"
 23 |             data-urlcities="{% url 'core:cities_choices_ajax' %}"
 24 |             data-urldistricts="{% url 'core:districts_choices_ajax' %}"
 25 |             >
 26 |         <div class="form-group">
 27 |           <label for="stateSelect">Estado</label>
 28 |           {% render_field form.state title="Estados" class="form-control" %}
 29 |         </div>
 30 | 
 31 |         <div class="form-group" style="padding:10px;">
 32 |           <label for="citySelect">Cidade</label>
 33 |           <select class="form-control" id="citySelect">
 34 |             <option>---------------------</option>
 35 |           </select>
 36 |         </div>
 37 | 
 38 |         <div class="form-group" style="padding:10px;">
 39 |           <label for="districtSelect">Bairro</label>
 40 |           <select class="form-control" id="districtSelect" name="district">
 41 |             <option>---------------------</option>
 42 |           </select>
 43 |         </div>
 44 | 
 45 |         <div class="form-group">
 46 |           <button class="btn btn-success" type="submit">Filtrar</button>
 47 |         </div>
 48 |       </form>
 49 |     </div>
 50 | 
 51 |   </div>
 52 | </div>
 53 | 
 54 | <div class="container">
 55 |   <!-- Example row of columns -->
 56 |   <div class="row">
 57 |     <div class="col">
 58 |       <table class="table">
 59 |         <thead>
 60 |           <tr>
 61 |             <th>Nome</th>
 62 |             <th>E-mail</th>
 63 |             <th>Telefone</th>
 64 |             <th>Bairro</th>
 65 |             <th>Cidade</th>
 66 |             <th>UF</th>
 67 |           </tr>
 68 |         </thead>
 69 |         <tbody>
 70 |           {% for person in persons %}
 71 |             <tr>
 72 |               <td>{{ person.name }}</td>
 73 |               <td>{{ person.email }}</td>
 74 |               <td>{{ person.phone }}</td>
 75 |               <td>{{ person.district }}</td>
 76 |               <td>{{ person.district.city }}</td>
 77 |               <td>{{ person.district.city.uf }}</td>
 78 |             </tr>
 79 |           {% endfor %}
 80 |         </tbody>
 81 |       </table>
 82 |     </div>
 83 |   </div>
 84 | </div>
 85 | 
 86 |   <hr>
 87 | 
 88 | </div> <!-- /container -->
 89 | 
 90 | {% endblock content %}
 91 | 
 92 | {% block js %}
 93 | 
 94 |   <script>
 95 |     $('#id_state').change(function() {
 96 |       let urlCities = $('#myForm').data('urlcities');
 97 |       let ufIdCity = $(this).val();
 98 |       // console.log(ufIdCity);
 99 |       // console.log(urlCities);
100 | 
101 |       $.ajax({
102 |         url: urlCities,
103 |         data: {
104 |           uf: ufIdCity
105 |         },
106 |         success: function(response) {
107 |           $('#citySelect').html(response);
108 |           $('#districtSelect').html('<option value="">---------------------</option>');
109 |         }
110 |       })
111 |     });
112 | 
113 |     $('#citySelect').change(function() {
114 |       let urlDistricts = $('#myForm').data('urldistricts');
115 |       let cityIdDistrict = $(this).val();
116 |       console.log(urlDistricts);
117 |       console.log(cityIdDistrict);
118 | 
119 |       $.ajax({
120 |         url: urlDistricts,
121 |         data: {
122 |           city: cityIdDistrict
123 |         },
124 |         success: function(response) {
125 |           $('#districtSelect').html(response);
126 |         }
127 |       })
128 |     });
129 |   </script>
130 | 
131 | {% endblock js %}


--------------------------------------------------------------------------------
/fix/districts.csv:
--------------------------------------------------------------------------------
  1 | city,name
  2 | Belo Horizonte,Cristo Redentor
  3 | Belo Horizonte,Diamante
  4 | Belo Horizonte,Conjunto Esperança
  5 | Belo Horizonte,Flávio Marques Lisboa
  6 | Belo Horizonte,Conjunto Flávio de Oliveira
  7 | Belo Horizonte,Vila Formosa
  8 | Belo Horizonte,Independência
  9 | Belo Horizonte,Itaipu
 10 | Belo Horizonte,Vila Jardim do Vale
 11 | Belo Horizonte,Jatobá
 12 | Belo Horizonte,Jatobá IV
 13 | Belo Horizonte,Lindéia
 14 | Contagem,Água Branca
 15 | Contagem,Alvorada
 16 | Contagem,Arvoredo
 17 | Contagem,Amazonas
 18 | Contagem,Arcádia
 19 | Contagem,Bandeirantes
 20 | Contagem,Beija-flor
 21 | Contagem,Bernardo Monteiro
 22 | Contagem,Bom Jesus
 23 | Contagem,Braúnas
 24 | Contagem,Buganville
 25 | Contagem,Cabral
 26 | Contagem,Caiapós
 27 | Contagem,Camilo Alves
 28 | Contagem,Campina Verde
 29 | Contagem,Campo Alto
 30 | Contagem,Canadá
 31 | Contagem,Cândida Ferreira
 32 | Contagem,Carajás
 33 | Contagem,Chácara
 34 | Contagem,Chácara Boa Vista
 35 | Contagem,Chácaras Cotia
 36 | Contagem,Chácaras Del Rey
 37 | Contagem,Chácaras Novo Horizonte
 38 | Contagem,Chácara São Geraldo
 39 | Contagem,Chácaras Califórnia
 40 | Contagem,Cidade Industrial
 41 | Contagem,Cidade Jardim
 42 | Contagem,Cinco
 43 | Juiz De Fora,Alto dos Passos
 44 | Juiz De Fora,Boa Vista
 45 | Juiz De Fora,Bom Pastor
 46 | Juiz De Fora,Centro
 47 | Juiz De Fora,Costa Carvalho
 48 | Juiz De Fora,Dom Bosco
 49 | Juiz De Fora,Fábrica
 50 | Juiz De Fora,Granbery
 51 | Juiz De Fora,Jardim Glória
 52 | Juiz De Fora,Jardim Paineiras
 53 | Juiz De Fora,Jardim Santa Helena
 54 | Juiz De Fora,Morro da Glória
 55 | Juiz De Fora,Mundo Novo
 56 | Juiz De Fora,Poço Rico
 57 | Juiz De Fora,Santa Catarina
 58 | Juiz De Fora,Santa Cecília
 59 | Juiz De Fora,São Mateus
 60 | Juiz De Fora,Vale do Ipê
 61 | Juiz De Fora,Vila Ozanan
 62 | Juiz De Fora,Vila Ideal
 63 | Montes Claros,Antônio Pimenta
 64 | Montes Claros,Bela Paisagem
 65 | Montes Claros,Camilo Prates
 66 | Montes Claros,Carmelo
 67 | Montes Claros,Chiquinho Guimaraes
 68 | Montes Claros,Cidade Cristo Rei
 69 | Montes Claros,Cidade Industrial
 70 | Montes Claros,Cintra
 71 | Montes Claros,Cj Joaquim Costa
 72 | Montes Claros,Delfino Magalhaes
 73 | Montes Claros,Distrito d Aparecid
 74 | Montes Claros,Eldorado
 75 | Montes Claros,Ibituruna
 76 | Montes Claros,Independência
 77 | Montes Claros,Jaragua II
 78 | Montes Claros,José Carlos d Lima
 79 | Montes Claros,José Correa Machado
 80 | Montes Claros,Major Prates
 81 | Montes Claros,Maracana
 82 | Montes Claros,Monte Carmelo II
 83 | Montes Claros,Morrinhos
 84 | Montes Claros,Nossa Senhora d Lou
 85 | Montes Claros,Planalto
 86 | Montes Claros,Renascenca
 87 | Montes Claros,Santa Lucia
 88 | Montes Claros,Santa Rafaela
 89 | Montes Claros,Santa Rosa d Lima
 90 | Montes Claros,Santo Antônio I
 91 | Montes Claros,Santo Antônio II
 92 | Montes Claros,Santo Inacio
 93 | Montes Claros,Santos Reis
 94 | Montes Claros,São Geraldo
 95 | Montes Claros,Vera Cruz
 96 | Montes Claros,Vilaa Analia
 97 | Montes Claros,Vilaa Atlantida
 98 | Montes Claros,Vilaa Campos
 99 | Montes Claros,Vilaa Mauriceia
100 | Montes Claros,Vilaa Nova d Minas
101 | Montes Claros,Vilaa Telma
102 | Montes Claros,Vilaage do Lago II
103 | Montes Claros,Vilaage do Lago
104 | Montes Claros,Vilalage do Lago
105 | Uberlândia,Centro
106 | Uberlândia,Fundinho
107 | Uberlândia,Nossa Senhora Aparecida
108 | Uberlândia,Martins
109 | Uberlândia,Osvaldo Rezende
110 | Uberlândia,Bom Jesus
111 | Uberlândia,Brasil
112 | Uberlândia,Cazeca
113 | Uberlândia,Lídice
114 | Uberlândia,Daniel Fonseca
115 | Uberlândia,Tabajaras
116 | Campinas,Bosque
117 | Campinas,Botafogo
118 | Campinas,Cambuí
119 | Campinas,Centro
120 | Campinas,Guanabara
121 | Campinas,Vila Itapura
122 | Campinas,Vila Industrial
123 | Guarulhos,Água Azul
124 | Guarulhos,Bananal
125 | Guarulhos,Bela Vista
126 | Guarulhos,Bonsucesso
127 | Guarulhos,Continental
128 | Guarulhos,Capelinha
129 | Guarulhos,Cocaia
130 | Guarulhos,Cumbica
131 | Osasco,Ayrosa
132 | Osasco,Bandeiras
133 | Osasco,Baronesa
134 | Osasco,Bonança
135 | Osasco,Cidade das Flores
136 | Osasco,Cipava
137 | Osasco,Conceição
138 | Osasco,Mutinga
139 | Osasco,Piratininga
140 | Osasco,Jardim Roberto
141 | São Bernardo Do Campo,Alvarenga
142 | São Bernardo Do Campo,Alves Dias
143 | São Bernardo Do Campo,Anchieta
144 | São Bernardo Do Campo,Assunção
145 | São Bernardo Do Campo,Baeta Neves
146 | São Bernardo Do Campo,Bairro dos Casa
147 | São Bernardo Do Campo,Batistini
148 | São Bernardo Do Campo,Botujuru
149 | São Bernardo Do Campo,Centro
150 | São Bernardo Do Campo,Cooperativa
151 | São Bernardo Do Campo,Demarchi
152 | São Bernardo Do Campo,Ferrazópolis
153 | São Bernardo Do Campo,Independência
154 | São Bernardo Do Campo,Jordanópolis
155 | São Bernardo Do Campo,Montanhão
156 | São Bernardo Do Campo,Nova Petrópolis
157 | São Bernardo Do Campo,Paulicéia
158 | São Bernardo Do Campo,Planalto
159 | São Bernardo Do Campo,Rudge Ramos
160 | São Bernardo Do Campo,Santa Terezinha
161 | São Bernardo Do Campo,Taboão
162 | São Paulo,Centro
163 | São Paulo,Cerqueira Cesar
164 | São Paulo,Consolação
165 | São Paulo,Bela Vista
166 | São Paulo,Vila Mariana
167 | São Paulo,Santo Amaro
168 | São Paulo,Morumbi
169 | São Paulo,Butantã
170 | São Paulo,Mooca
171 | São Paulo,Barra Funda
172 | São Paulo,Lapa
173 | São Paulo,Brás
174 | São Paulo,Liberdade
175 | São Paulo,Saúde
176 | São Paulo,São Judas
177 | São Paulo,Tucuruvi
178 | Búzios,Portal Da Ferradura
179 | Búzios,São Jose
180 | Búzios,Tartaruga
181 | Búzios,Brava
182 | Búzios,Cabo Frio
183 | Niterói,Bairro de Fátima
184 | Niterói,Boa Viagem
185 | Niterói,Cachoeiras
186 | Niterói,Centro
187 | Niterói,Charitas
188 | Niterói,Gragoatá
189 | Niterói,Icaraí
190 | Niterói,Ingá
191 | Niterói,Jurujuba
192 | Niterói,Morro do Estado
193 | Niterói,Pé Pequeno
194 | Niterói,Ponta D'areia
195 | Niterói,Santa Rosa
196 | Niterói,São Domingos
197 | Niterói,São Francisco
198 | Niterói,Viradouro
199 | Niterói,Vital Brazil 
200 | Niterói,Baldeador
201 | Niterói,Barreto
202 | Niterói,Caramujo
203 | Niterói,Cubango
204 | Niterói,Engenhoca
205 | Niterói,Fonseca
206 | Niterói,Ilha Da Conceição
207 | Niterói,Santa Bárbara
208 | Niterói,Santana
209 | Niterói,São Lourenço
210 | Niterói,Tenente Jardim
211 | Niterói,Viçoso Jardim 
212 | Niterói,Cafubá
213 | Niterói,Camboinhas
214 | Niterói,Engenho do Mato
215 | Niterói,Itacoatiara
216 | Niterói,Itaipu
217 | Niterói,Jacaré
218 | Niterói,Jardim Imbuí
219 | Niterói,Maravista
220 | Niterói,Piratininga
221 | Niterói,Santo Antônio
222 | Niterói,Serra Grande 
223 | Niterói,Badu
224 | Niterói,Cantagalo
225 | Niterói,Ititioca
226 | Niterói,Largo Da Batalha
227 | Niterói,Maceió
228 | Niterói,Maria Paula
229 | Niterói,Matapaca
230 | Niterói,Sapê
231 | Niterói,Vila Progresso 
232 | Niterói,Muriqui
233 | Niterói,Rio do Ouro
234 | Niterói,Várzea das Moças
235 | Paraty,Bairro de Fátima
236 | Paraty,Barra Grande
237 | Paraty,Boa Vista
238 | Paraty,Caboclo
239 | Paraty,Caborê
240 | Paraty,Cabral
241 | Paraty,Campinho Da Independência
242 | Paraty,Centro
243 | Paraty,Chácara
244 | Paraty,Chácara Da Saudade
245 | Paraty,Colônia
246 | Paraty,Condado
247 | Paraty,Coriscão
248 | Paraty,Corisco
249 | Petrópolis,Alto Da Serra
250 | Petrópolis,Araras
251 | Petrópolis,Bingen
252 | Petrópolis,Bonsucesso
253 | Petrópolis,Capela
254 | Petrópolis,Cascatinha
255 | Petrópolis,Duchas
256 | Petrópolis,Fazenda Inglesa
257 | Petrópolis,Glória
258 | Petrópolis,Itaipava
259 | Petrópolis,Itamarati
260 | Petrópolis,Nogueira
261 | Petrópolis,Posse
262 | Petrópolis,Quitandinha
263 | Petrópolis,Saldanha Marinho
264 | Petrópolis,Samambaia
265 | Petrópolis,Taquara
266 | Rio De Janeiro,Bairro Imperial de São Cristóvão
267 | Rio De Janeiro,Benfica
268 | Rio De Janeiro,Caju
269 | Rio De Janeiro,Catumbi
270 | Rio De Janeiro,Centro
271 | Rio De Janeiro,Cidade Nova
272 | Rio De Janeiro,Estácio
273 | Rio De Janeiro,Gamboa
274 | Rio De Janeiro,Mangueira
275 | Rio De Janeiro,Paquetá
276 | Rio De Janeiro,Rio Comprido
277 | Rio De Janeiro,Santa Teresa
278 | Rio De Janeiro,Santo Cristo
279 | Rio De Janeiro,Saúde
280 | Rio De Janeiro,Vasco Da Gama
281 | Cascavel,Alto Alegre
282 | Cascavel,Brasília
283 | Cascavel,Brasmadeira
284 | Cascavel,Canadá
285 | Cascavel,Cancelli
286 | Cascavel,Cascavel Velho
287 | Cascavel,Cataratas
288 | Cascavel,Centro
289 | Cascavel,Coqueiral
290 | Cascavel,Country
291 | Cascavel,Esmeralda
292 | Cascavel,Floresta
293 | Cascavel,Guarujá
294 | Cascavel,Interlagos
295 | Cascavel,Maria Luiza
296 | Cascavel,Morumbi
297 | Cascavel,Neva
298 | Cascavel,Pacaembu
299 | Cascavel,Parque São Paulo
300 | Cascavel,Parque Verde
301 | Cascavel,Periolo
302 | Cascavel,Pioneiros Catarinenses
303 | Cascavel,Recanto Tropical
304 | Cascavel,Região do Lago
305 | Cascavel,Santa Cruz
306 | Cascavel,Santa Felicidade
307 | Cascavel,Santo Onofre
308 | Cascavel,Santos Dumont
309 | Cascavel,São Cristóvão
310 | Cascavel,Universitário
311 | Curitiba,Bairro Novo
312 | Curitiba,Boa Vista
313 | Curitiba,Boqueirão
314 | Curitiba,Cajuru
315 | Curitiba,Cidade Industrial de Curitiba (cic)
316 | Curitiba,Fazendinha-portão
317 | Curitiba,Matriz
318 | Curitiba,Pinheirinho
319 | Curitiba,Santa Felicidade
320 | Londrina,Centro Histórico
321 | Londrina,Jardim Higienópolis
322 | Londrina,Jardim Petrópolis
323 | Londrina,Jardim Quebec
324 | Londrina,Vila Brasil
325 | Londrina,Vila Casoni
326 | Londrina,Vila Ipiranga
327 | Londrina,Vila Nova
328 | Londrina,Vila Recreio
329 | Londrina,Aeroporto
330 | Londrina,Cidade Industrial 2
331 | Londrina,Conjunto Ernani Moura Lima
332 | Londrina,Gleba Lindoia
333 | Londrina,HU
334 | Londrina,Jardim Antares
335 | Londrina,Jardim Brasília
336 | Londrina,Jardim Califórnia
337 | Londrina,Jardim Ideal
338 | Londrina,Jardim Interlagos
339 | Londrina,Lon Rita
340 | Londrina,Parque das Indústrias Leves
341 | Londrina,Vila Fraternidade
342 | Londrina,Cidade Industrial 1
343 | Londrina,Cinco Conjuntos
344 | Londrina,Conjunto Parigot de Souza
345 | Londrina,Conjunto Vivi Xavier
346 | Londrina,Jardim Coliseu
347 | Londrina,Jardim dos Alpes
348 | Maringá,Oásis
349 | Maringá,Olímpico
350 | Maringá,Ouro Cola Bertioga
351 | Maringá,Borba Gato
352 | Maringá,Cidade Monções
353 | Maringá,Cidade Nova
354 | Maringá,Dias
355 | Maringá,Grevíleas Hermann Moraes de Barros
356 | Maringá,Iguaçu
357 | Maringá,Jardim Alvorada
358 | Maringá,Jardim Diamante
359 | Maringá,Jardim Industrial
360 | Maringá,Laranjeiras
361 | Maringá,Parque Avenida
362 | Maringá,Pinheiros
363 | Maringá,Recanto dos Magnatas
364 | São José Dos Pinhais,Alphaville Graciosa
365 | São José Dos Pinhais,Alto Tarumã
366 | São José Dos Pinhais,Atuba
367 | São José Dos Pinhais,Centro
368 | São José Dos Pinhais,Emiliano Perneta
369 | São José Dos Pinhais,Estância Pinhais
370 | São José Dos Pinhais,Jardim Amélia
371 | São José Dos Pinhais,Jardim Cláudia
372 | São José Dos Pinhais,Jardim Karla
373 | São José Dos Pinhais,Maria Antonieta
374 | São José Dos Pinhais,Parque das Águas
375 | São José Dos Pinhais,Parque das Nascentes
376 | São José Dos Pinhais,Pineville
377 | São José Dos Pinhais,Vargem Grande
378 | São José Dos Pinhais,Weissópolis
379 | 


--------------------------------------------------------------------------------