Dependent Select Box (Part 2)

After spending two weeks learning Javascript, JQuery, and AJAX I at last achieved gained the ability to code a dynamically populated and dependent select box! Let's walk through the process.

I found out, after trying to write the JQuery and such, that I need to learn how to write, get, and parse JSON data. JSON is a complicated, and yet easy at the same time, system to comprehend. What I did was, any time a new item or model in the app was created, Python code would run to write that data to a JSON file. That file could be accessed by the JQuery method $.getJSON.

As I've discussed forms and how to populate the select boxes with Flask in other posts, I will explain the JQuery. It's important to note that Flask will set the select tag with an id (currently I'm not exactly sure where it assigns it from). I only found that by looking at the source code for my site when it was running. It was then easy to assign a variable to that html tag with JQuery. Then the #item_type box could be populated with JQuery that pulled data from the JSON file.

This would be done by looping through the file and appending each option to a string:
'<option value="' + item_type.id + '">' + item_type.name + '</option>'

That string, that ended up being multiple options after the loop, would be added to the html with:
$item_select.html(string of option tags)

Then in a different function would be run when the #item_type box was changed: $item_select.change(function() {}); Inside the change function would run basically the same code to populate the #item_type box option tags. The only differences being it would be for the #item_model box and there would be a conditional block that would add the option only if the model.of_type was the same as the $item_select.val(). Then the string of options would be added to the #item_model box.

Dependent select box achieved!

The only trouble is it would not update in real time. For instance if I would add a new type or model, then go to the page with the select boxes, the new data would not be populated into the box. Through trial and error I found the browser was caching the information and I had to delete the cookies that were being set by (I think) Flask, but the browser could have just been doing that too. After a small Google search I found this little bit of code would set the browser to not cache the cookies:

$.ajaxSetup({

    cache:false

});

Thus ends my journey of the dynamically populated and dependent select box! It seemed like a much higher hill to climb in the beginning but as I'm writing this I wonder how I couldn't figure it all out before.

25 words or less: Better is the end of a matter than its beginning - Solomon

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!