Creating a dynamic menu-planning page and shopping list

I have a page on my site that allows users to create a shopping list from seven dinner recipes and one dessert, Users can deselect ingredients that are already onhand so that these items are not included on the shopping list.  You can see the page as it currently functions here:

http://www.whatsfordinner.net/meals.html

My goal is to expand the user interactiveness by allowing visitors to deselect meals they don’t wish to serve and replace them with other meals from the site.  Using the example Dynamically Add/Remove rows in HTML table using JavaScript:

https://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/

I have been successful (with Viral’s help) in creating the code that will allow users to remove the meals they don’t wish to include.  I then set and retrieved my first cookie (the setting part wasn’t so hard, but I am still a bit fuzzy on parts of the read cookie function) so that the users choices are saved when the page is exited.  You can see it work here:

http://www.whatsfordinner.net/Testing-Cookie-Set.html

Now I’m ready for the next step, moving information from another page and placing it into the first page.  I am using  getElementById to capture a div section with a cookie and (hopefully) move that information via the cookie and document.write the variable onto the first page.  I’m beginning to wonder if that can be done.

var newMeal = document.getElementsByName('groceries');
var expires = new Date();
expires.setTime (expires.getTime() + 24 * 60 * 60 * 1000);
var expiryDate = expires.toGMTString();

function newCookie(add,newMeal) {
	document.cookie = add + "=" + newMeal + "; expires=" + expiryDate;
}

function toShoppingList() {
	window.location = "http://www.whatsfordinner.net/Testing-Insert-div.html";
}

Shopping list for a new meal

If it is possible to carry the entire div with a cookie, I now need to write the cookie function to read the data.  Since I had success with the previous getCookie, I altered that function for the new variable

function getCookie(add) {
var cookieFound = false;
var start = 0;
var end = 0;
var cookieString = document.cookie;

var i = 0;

//Scan the cookie for add
while (i <= cookieString.length) { start = i; end = start + add.length; if (cookieString.substring(start,end) == add) { cookieFound = true; break; } i++; } //Is add found? if (cookieFound) { start = end + 1; end = document.cookie.indexOf(";",start); if (end < start); end = document.cookie.length; return document.cookie.substring(start,end); } return ""; } [/code] Then I put this javascript into the body where I was hoping the div information would appear. [code="javascript"] document.write(addIt) [/code] Of course, it couldn't be that simple, could it?  I would love to hear from someone who has been successful in moving information across pages.  Is there a fix to the codes I have written, or is there a better way to do this?  Thanks so much. Side note:  I realize that there is a lot more to be done with a meal planning site that involves creating a database.  I do plan to establish that and use it to create much more interactivity.  Meanwhile, after 5 years of building traffic and attracting spatters of media attention, I feel the urgent need to make a change that can immediately increase user interactivity.  This javascript meal switch is something that I can do with all the recipes as they currently appear in html.  It is also a good way for me to gain skills and build some confidence.  :) Jean Fisher What's For Dinner? Make dinner time, family time! http://www.whatsfordinner.net

Get our Articles via Email. Enter your email address.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.