Display More Data From Table on Click

I have a web page for a local restaurant that shows data in the following order:
Breakfast Menu
   Pastries
     Cinnamon Roll
     Caramel Roll
     Danish
  Eggs
     Steak and Eggs
     Ham and Eggs
Lunch Menu
   Burgers
      Hamburger
      Cheeseburger
     Bacon Cheeseburger
  Salads
     Chicken Ceasar Salad
     Buffalo Chicken Salad
Etc....

What we want to do is have only the Menus appear like this
Breakfast Menu
Lunch Menu
Dinner Menu

Then when Breakfast Menu is clicked on, the Subcategories appear under like this
Breakfast
  Pastries
  Eggs
Then if Pastries is clicked on all the menu items listed under Pastries would appear in a cell to the right of the expandable menu.
The code I am using to display all is below... any help would be appreciated - especially with the displaying in a new cell.
katleesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

theremonCommented:
Hi there

two things:
1. You forgot to post the code you mentioned.
2. You can do this in several ways. The easiest of which would be to load everything as you do now, but display all sub categories in hidden divs (style="display:none"). Then, with a tiny bit of Javascript, you set them to visible or hidden depending on what the user clicks. We could work on this approach if you want - it's really easy.
0
katleesAuthor Commented:
Sorry, thought I had done that... Must not have done hit attach.
<font class="style1">Breakfast</font><br />
 <?php
   $currentdate = date('Y-m-d');
   $menu_query = "SELECT Menu.*, Category.Category FROM Menu, Category WHERE Menu.BCategory=Category.CatID and Menu.BCategory > '0' Order By Category.Category, Menu.Item";
  $menu_query_result = mysql_query($menu_query);
  $oldCategory = ""; 
      while ($row = mysql_fetch_assoc($menu_query_result)) { 
         if ($oldCategory != $row['Category']) { 
	 echo "<span class='menu_header'>"; 
    	 echo $row['Category'], "</span><br />"; 
    	 $oldCategory  = $row['Category']; 
  								 } 
							echo "<span class='menu_item'>"; 
  	echo $row['Item'], "-"; 
	echo $row['Price'], "</span>"; 
	echo "<br />"; 
   } 
                    ?>

Open in new window

0
theremonCommented:
Hi again

try the following code (as a standalone page - don't merge it with your existing code).
Since as I understand you're somewhat new at all this, I put (and left) in there a lot of debugging elements. For example, I used divs and I styled them with borders so that you could see what goes inside what.
Category and menu items are two shades of grey. Red divs are used for the hiding/unhiding.
Of course all these styles can be changed.
I also opted to stay as close to your code as possible so that I wouldn't confuse you. Additions to code you recognize are easier to understand, aren't they?
I do see a few issues with the logic of your code, but that's a different subject.
So, here's the code:
<html>
<head>
<title>EE Test file - Question: 25894804</title>
<script type="text/javascript">
function toggle(id)
	{
	el=document.getElementById(id);
	if (!el) 
		{ return }
	if (el.style.display=="block")
		{ el.style.display="none"; }
	else
		{ el.style.display="block"; }
	
	}
</script>
<style>
body { font-family: tahoma; font-size:11px}
.menu_header { margin:2px; padding-left:10px; border:1px solid #ccc}
.menu_item { margin:2px; padding-left:20px; border:1px solid #ddd}
.cont { border:1px solid red; display: none }
</style>
</head>

<body>
<font class="style1"><a href="javascript:toggle('cntBreakfast');">Breakfast</a></font><br />
<div id="cntBreakfast" class="cont">
 <?
mysql_connect("localhost", "USER", "PASS");
mysql_select_db("test");
	
$currentdate = date('Y-m-d');
$menu_query = "SELECT Menu.*, Category.Category FROM Menu, Category WHERE Menu.BCategory=Category.CatID and Menu.BCategory > '0' Order By Category.Category, Menu.Item";
$menu_query_result = mysql_query($menu_query);
$oldCategory = ""; 
while ($row = mysql_fetch_assoc($menu_query_result)) 
	{ 
	if ($oldCategory != $row['Category']) 
		{ 
		echo ($oldCategory!="" ? "</div>" : ""); 
		echo "<div class='menu_header'>"; 
		echo "<a href=\"javascript:toggle('d" . $row["BCategory"] . "')\">" . $row['Category'] . "</a></div><div class=\"cont\" id=\"d" . $row["BCategory"] . "\""; 
		$oldCategory  = $row['Category']; 
		} 
	echo "<div class='menu_item'>"; 
	echo $row['Item'], "-"; 
	echo $row['Price'], "</div>"; 
	
	} 
?>
</div>
</body>
</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

katleesAuthor Commented:
I copied your code into a new file and just as it is shows the following
http://75.125.62.3/~colonia5/newsite/menutest.php

0
theremonCommented:
So, when you click on the breakfast link, it opens and shows categories and then items, right?
Other than the layout, isn't that the functionality you wanted?
0
katleesAuthor Commented:
It isn't working in my screen. I see the following screen shot
screenshot.jpg
0
katleesAuthor Commented:
I want the items hidden until you click on the Category....
0
theremonCommented:
Ok, let me check that and get back to you.
I was testing on Chrome and Firefox and it worked fine. Should have checked IE too.
I can't do it immediately though - it's 3am here. I'll check it out if a few hours.
0
theremonCommented:
Oops - think I got it (you always got to take one last look, huh).
It's a small typo, but I'm pasting the whole code again. Try it out and we'll talk again later on.
<html>
<head>
<title>EE Test file - Question: 25894804</title>
<script type="text/javascript">
function toggle(id)
	{
	el=document.getElementById(id);
	if (!el) 
		{ return }
	if (el.style.display=="block")
		{ el.style.display="none"; }
	else
		{ el.style.display="block"; }
	
	}
</script>
<style>
body { font-family: tahoma; font-size:11px}
.menu_header { margin:2px; padding-left:10px; border:1px solid #ccc}
.menu_item { margin:2px; padding-left:20px; border:1px solid #ddd}
.cont { border:1px solid red; display: none }
</style>
</head>

<body>
<font class="style1"><a href="javascript:toggle('cntBreakfast');">Breakfast</a></font><br />
<div id="cntBreakfast" class="cont">
 <?
mysql_connect("localhost", "USER", "PASS");
mysql_select_db("test");
	
$currentdate = date('Y-m-d');
$menu_query = "SELECT Menu.*, Category.Category FROM Menu, Category WHERE Menu.BCategory=Category.CatID and Menu.BCategory > '0' Order By Category.Category, Menu.Item";
$menu_query_result = mysql_query($menu_query);
$oldCategory = ""; 
while ($row = mysql_fetch_assoc($menu_query_result)) 
	{ 
	if ($oldCategory != $row['Category']) 
		{ 
		echo ($oldCategory!="" ? "</div>" : ""); 
		echo "<div class='menu_header'>"; 
		echo "<a href=\"javascript:toggle('d" . $row["BCategory"] . "')\">" . $row['Category'] . "</a></div><div class=\"cont\" id=\"d" . $row["BCategory"] . "\">"; 
		$oldCategory  = $row['Category']; 
		} 
	echo "<div class='menu_item'>"; 
	echo $row['Item'], "-"; 
	echo $row['Price'], "</div>\n"; 
	
	} 
?>
</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
katleesAuthor Commented:
Works perfect! Thanks. I'll try and adjust it to fit my page now.
0
katleesAuthor Commented:
theremon - how would I get the items to fill in in a seperate cell/div tag that is to the right of the list?
0
katleesAuthor Commented:
Also, the page is throwing a Javascript error after I made some adjustments to it.
I added a third tier to show the description and it is only working on some of the items...
If you can help, I will repost and award more points.
http://75.125.62.3/~colonia5/newsite/menu.php


menu.php
0
katleesAuthor Commented:
I found the reason for the javascript error - apostrophe's in the name of the item - Now I just need help positioning the subcategories when they open
0
theremonCommented:
Hi again

first of all thanks for the points. I'm glad I could help with your question.
Now - as far as the positioning is concerned. I believe you shouldn't use a "tree" structure like the one we set up and have it display the way you've set it up in that page. You may use CSS to "fool" the tree to display in different parts of the page, but this may lead to quite complex CSS.
It would be a lot better if you first loaded the data in a couple of javascript arrays and then populate the second & third boxes when you click on a category on the left.
Or even better, use a bit of AJAX to load just the data you need upon clicking. jQuery makes this quite easy.
0
katleesAuthor Commented:
Can you point me in the right direction to some tutorials or anything?
0
theremonCommented:
Hi again

I'll look around for tutorials on what you need. Unfortunately I don't have anything available right now. Since however the logic behind the two methods (preloading the data in javascript arrays and ajax) are quite different, which one would you like to use? The preloading way is fast to implement but needs to load all data even when the user doesn't want to use it. The ajax way is a bit more complex since it requires both some javascript coding and external scripts that retrieve the data, but it can be easy to implement using a library such as jQuery to handle all the communication bits and later on the placing of the data in the proper places. Using this way however, will produce a few more hits to the server but on the other hand only the data the visitor actually wants to see get transfered.
To tell you the truth, if I were you, I'd go the ajax way. It's what all the fuss is about nowadays, helps you create efficient web apps and you'll get to learn a lot in the process. But that's just me.
Let me know what you'd like.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.