Question

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?

Answer 1

Here’s how I’d do it. But note that there will be no right answer to this question.

Lets call the page where you click on foods, index.php.

On index, I’d have all the foods that could be clicked, as well as an empty div with the id “ingredients” — eg. <div id="ingredients"></div>

When foods were clicked, they’d call jQuery handlers in main.js.

The onClick handlers would:

• Keep track of the currently selected foods
• Send a json or otherwise formatted list to a get_ingredients.php page via AJAX.
• (This page would return the HTML I’d want to display in the “Ingedients” section)
• Set the content of the ingredients div with the html returned by the AJAX call.

More explicitly, get_ingredients.php would:

• Parse the GET/POST list of foods that was sent (via AJAX) by index
• Query the database to see what ingredients were necessary for the selected foods
• Construct HTML corresponding to the query results that should be put into the “ingredients” div on the user-facing page.
• “display it” via echo/print/printf/etc, this isn’t really displayed with AJAX, but rather sent as the AJAX response.

This way, you only have to keep track of the selected foods, and not deal with adding/subtracting individual ingredient quantities when foods are selected and deselected.

This has the downside of re-transmitting things “you already know”, namely the ingredients of foods that were previously selected, however it eliminates a lot of the work that would otherwise be required.