Dependent Select Box (Part 1)

Recently I was asked by a friend who works in the IT department of a medical supply company to make a web app where he could keep track of IT inventory. I accepted and he emailed me the data models and how he wanted the app to work. Thus I got to work on my first real project.

Doing a little research I read a few negative things about PHP so I decided to go with Python as the language to construct the backend for the app. To satisfy the needs however I had to learn a plethora of new skills. That is one reason I started learning the Flask library. I eventually ran into a dilemma.

Dynamically populate a select box

If I try to populate a select box in forms.py file the box will not update concurrently with the database. One would have to stop the app from running and start it again to populate the site with any new information. Thus the choices (for the form's class in forms.py) had to be populated in the app.py file. That is how the choices would be populated dynamically and in real time with any update to the database.

Dependent select box

Then came the real trouble. I would like to dynamically populate data in one select box dependent on a selection from another select box. Ideally there will be three select boxes. The first select box has manufacturers listed. When a manufacturer is selected the second box populates with types of equipment that particular manufacturer makes. When a certain type of product is selected a third box is populated with different models of that type of equipment. For example, from the first select box you could select "HP". That would populate the second select box with types of products HP makes such as "keyboards" or "computers". When you select a type, like keyboard, the different models of keyboard made by HP will populate the third select box. Then with text fields and such the user can update data on that particular model, such as adjust inventory.

This led me into countless Google searches and StackOverflow inquiries. After searching in beast mode for longer than I should have I came to the conclusion I needed to learn how to use some different tools, most notably JQuery and AJAX. To use JQuery I first needed to study up on how to use Javascript. I took the Javascript Basics course on Treehouse. I went through that rather quickly because it was essentially just learning different syntax and how to put Javascript into HTML. Much of the topics and principles covered I had already known from learning Python, PHP, and HTML.

Then some new ideas were presented in the JQuery course. This was a pleasantly significant change and quite mentally stimulating. Learning how to add, remove, and manipulate HTML elements will prove to be very useful. I can already visualize being able to change data in a select field. Possibly by adding an id tag to the form and using JQuery to update the child (or next) element so that it populates data based on another select box. This then led me to the next stage that the earlier Googling seemed to point.

Time for AJAX

I started the AJAX Basics course on Treehouse. I learned a little AJAX and how to 'GET' data from a JSON file. Then how to json.parse() the data to a variable so the data can be accessed by some Javascript code. Not sure of exact terminology but, I would like to know how to make an AJAX request to a Python file or write a Python file that gives information to an AJAX request in a format that can be understood by Javascript. Right now I will just have to learn how to have Python write JSON data with information from a database and access the JSON file from the browser.

To conclude (or continue / reiterate)

This is where I currently am in my progress. Still unable to create a dynamically populated dependent select box, but I feel I am so much closer to that goal! I can somewhat visualize how it can be done, I just have to comprehend how to create a JSON file with data from a database created in Python. Then I can write the AJAX commands to access and parse that data to populate the other select boxes in the form. I think I can do it but I feel it would be beneficial to finish this AJAX Basics course first. Only a little bit left. I can't wait to write the post where I successfully write it!

25 words or less: Everything someone else does with code that seems impossible at first is absolutely possible to learn and write yourself in time. Just keep learning!