Creating shopping list web application
@jedwards' comment is correct. Instead of loading everything for every item at the beginning(which could cause slow initial page loads). You should do an on-click event in jquery that does an ajax call back to the server and passes the name or id of the object in your db and returns its ingredients, then you populate the div that would contain the ingredients with them.
I'm learning Python, Django, Javascript and jQuery by trying to build a simple shopping list web application. I'd like to hear from experienced developers if my approach is correct:
Functionality:
Web page will display a list of foods. When I click on a certain food I want a list of ingredients to get displayed (this will be my shopping list). Clicking another food will add more ingredients to the shopping list.
My approach:
I have built a simple page with django. I'm able to display a list of all foods that have been entered to the database. What I need now is to start building a list of ingredients as I click on food items.
I was thinking I would load a list of ingredients from the database on the first page load but hide them with css. When I click on a food item I would un-hide the ingredients associated with the food item by using jquery/css.
This approach seems quite clumsy to me. Could you give me some advice how I could create my shopping list application using the technologies mentioned above? Is my approach correct?