...
The server send the contents of the user's kitchen (from the database) and they are displayed in a table using the DataTable plugin, which provides live search are re-ordering of the table. The table can be filtered (selecting various locations and categories) using the left hand menu. Clicking any item on this menu send an ajax request to the server, which then refreshes the page with only the filtered items shown (and the appropriate items on the menu selected to reflect the filter). The Add Food button opens up a dialog and dims the rest of the screen. Both the overlay and the dialog are hidden divs that toggle on button click. In the dialog box, date input box use jquery UI's datepicker to provide a calendar display to the use upon clicking. Location is selected by clicking on images that act as radio buttons. This was implemented using jquery, as was the + button for adding additional food entry rows. Upon submitting, and ajax request is made to the server. The server inserts these new items into the database and returns the food items, so that they can be immediately displayed. The delete button (after a dialog confirmation) sends an ajax request for the server to delete any checked items in the table. Any action that calls the server also causes a refresh client side, so that results are updated immediately.
This system generally worked well, however, our database model was not perfect. We did not distinguish between consumed food and deleted food in the database, which was confusing to users.
Budget Page
Here we used flot, a javascript plotting library for jQuery. The server side sends the names of the last 12 months, along with the total spending for each month. We also needed server side functions to edit the budget and individual purchases, and we call those with ajax. This page makes use of a hidden checkbox that when checked, the budget tab reloads. This is so that with every change to the budget or purchases, the progress bar and plot are updated quickly, without having to reload the entire page.
...