Optimizing Django Admin
How to populate select options depending on another select
Managing data from the Django administration interface should be fast and easy, especially when we have a lot of data to manage.
To improve that process and to make it easier for you to understand, we’re going to work here with a real scenario that I worked through in one of my projects.
Scenario
The scenario is adding products from Django administration for an ecommerce website.
We have three tables: Category, Subcategory, and Product.
Each product is related to one category and to one subcategory, which is also related to one category. You can see the models of all three tables below.
The product has these fields to fill: Name, Slug, Category, subcategory (which should be related to one category), and Description.
While inserting a new product, there are two select dropdown fields (Category and Subcategory).
The problem here is: When I fill the name and the slug and then select the category of the product that I want to add, I get all the items in the dropdown of the subcategory, even the items that don’t belong to the category selected. So I need to populate the items in the dropdown subcategory which are related to the category selected.
Preview of the Result
Now I will show you the right solution that I found to solve that problem. It’s so easy to implement — just follow these three steps carefully. But first, this is my setup:
Python →3.7
Django →2.2.4
JQuery →3.2.1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>And here are the models of the three tables.
Model for category table
Model for subcategory table
Model for product table
Solution
1. Create view
To fill in the items in the dropdown of the subcategory field, you have to create a view that will respond with JSONdata.
views.py:
2. Add pattern
At urls.py, you need to add a pattern to reach the view:
3. Add JavaScript code
Now you have to override change_form.html of Django admin for your product app to add some JavaScript code to do the magic.
The location of this file is not important. You can put it inside your app and it will still work. As long as its location can be discovered by Django. What’s more important is the name of the HTML file change_form.htmlhas to be the same as the original HTML file name provided by Django.
change_form.html:
Conclusion
And just like that, now the items in the list of items in the dropdown select subcategory are related to the category selected.
If you have another solution to this problem, feel free to suggest it down below to increase our skills together with the Django framework, especially to make the Django administration interface a more powerful tool to work with.
