jQuery: Magic Menu Web App Revisited!

I recently completed a series of articles on an ASP.NET/C# web app called “Magic Menu”. Please check out the first post in that series here. It should be noted that this web app was built while studying the book “Beginning ASP.NET 4 in C# 2010” (MacDonald, Matthew. Beginning ASP.NET in C# 2010. USA: Apress, 2010) and uses similar concepts as a sample in the book, as well as some of its code bits and conventions.

As in the ASP.NET/C# web app, “Magic Menu” takes a standard restaurant menu format and allows the user to change some style elements. The look and feel and general functionality in the jQuery version is almost identical to the the ASP.NET/C# version. The error handling is more simplified.

The jQuery version of “Magic Menu” was built using a combination of my past experience as well as referencing this article I found:

Submit A Form Without Page Refresh using jQuery

The web app also uses HTML5. I used the following validators to help clean up the code for HTML5:

Validator.nu (X)HTML5 Validator (Living Validator)
W3C Markup Validation Service

Wait, what is jQuery you ask?

jQuery is a Javascript library that I think can be such a time-saver for seasoned and new Javascript users alike. For instance instead of taking a number of lines of code to search for your element on the page and apply an action to occur when that element is clicked, jQuery can probably accomplish this in one line. All you have to do is include a Javascript (.js) file that contains the standard jQuery library in your code, get the hang of the syntax and start saving time and lines of code. jQuery also has a lot of other libraries out there for impressive functionality and user interface elements, not to mention you can create your own jQuery libraries.

On to the code!

The web app was built in Notepad++. There are four files involved in this app:

magic_menu.html – HTML page
magic_menu.js – jQuery code for the HTML page
magic_menu.css – CSS for the HTML page
jquery-1.6.4.min.js – jQuery library file

magic_menu.html

This file takes Default.aspx, the starting page for the ASP.NET/C# version of “Magic Menu” and re-writes the various web controls and surrounding code as regular HTML5. We start off with some standard HTML5 code to set up our page and include our CSS and JS files.

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Magic Menu</title>
		<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
		<script type="text/javascript" src="magic_menu.js"></script>
		<link href="magic_menu.css" rel="stylesheet" type="text/css" />
	</head>
        <body>
		<!-- This application is based on the Beginning ASP.NET in C# 2010 Apress GreetingCardMaker sample for learning purposes -->
		<!-- This application also tries some custom exception handling and tracing -->
		<!-- The ASP.NET in C# version has been re-built using HTML5 and jQuery -->

Next we set up our form with the various options for customizing our menu. This form re-writes web controls from the ASP.NET/C# version. DropDownLists become select tags, RadioButtonLists become multiple <input type="radio" tags and Button for submitting the form becomes <input type="submit".

        <form id="form1">    
		<h2>Magic Menu</h2>
		<!-- Menu creation -->
		Choose a background color:<br />
		<select id="lstBackColor" class="lstDropDown">
			<option value="white">White</option>
			<option value="teal">Teal</option>
			<option value="lime">Lime</option>
			<option value="blue">Blue</option>
		</select>
		<br /><br />
		Choose a font color:<br />
		<select id="lstFontColor" class="lstDropDown">
			<option value="black">Black</option>
			<option value="white">White</option>
			<option value="silver">Silver</option>
		</select>
		<br><br>
		Choose a font:<br />
		<select id="lstFontName" class="lstDropDown">
			<option value="verdana">Verdana</option>
			<option value="arial">Arial</option>
			<option value="tahoma">Tahoma</option>
			<option value="georgia">Georgia</option>
		</select>
		<br /><br />
		Specify a numeric font size:<br />
		<input id="txtFontSize" type="text" value="8" />
		<br><br>   
		Choose a border style:<br />
		<input id="lstBorder1" name="lstBorder1" type="radio" value="none" checked="checked" />None<br />
		<input id="lstBorder2" name="lstBorder2" type="radio" value="double" />Double<br />
		<input id="lstBorder3" name="lstBorder3" type="radio" value="solid" />Solid<br />
		<br /><br />
		<input id="cmdUpdate" type="submit" class="btn" value="Update" />

Finally, our Panel web controls used to display the actual menu and the error message become divs and we also close our our form and HTML page.

        <div id="pnlMenu">
		<!-- Menu display -->
		<h2>Magic Menu</h2>
		<hr /><br />
		<h3>Appetizer</h3>
		Sweet Potato Fries.....$4<br />
		Bruchetta.....$6<br />
		Nachos.....$8<br /><br />
		<h3>Entree</h3>
		Salmon with Garlic Mash.....$12<br />
		Vegetarian Lasagna.....$12<br />
		Turkey Dinner.....$12<br /><br />
		<h3>Beverage</h3>
		Soft Drink.....$2<br />
		Wine.....$6<br />
		Sparkling Cider.....$5<br /><br />
		<h3>Dessert</h3>
		Chocolate Cake.....$3<br />
		Apple Pie a la Mode.....$5<br />
		Baked Alaska.....$6<br /><br /><br /><br />
		<i>Ask your server about today's specials!</i>
		</div>
		<!-- Exception display -->
		<div id="pnlException">
			<div id="lblFontSizeException"></div><br /><br />
		</div> 
		</form>
	</body>
</html>

magic_menu.js

In our jQuery file, we first of all include some standard jQuery code that indicates we will run this code as soon as the document is ready.

Next we call a line of code that finds and hides the error message.

$("#lblFontSizeException").hide();

This code:

locates the object in the HTML page using the jQuery shortcut $, which is like calling the standard Javascript document.getElementById
finds the id “lblFontSizeException” using #, similar to how you would define a style for an id in CSS. You can also find all the objects with a certain class, using the . syntax instead, again similar to what you would do in CSS.
calls a jQuery hide method on it, which sets the CSS attribute of the object display to “none” and thus hides the object

In the remainder of the jQuery code, we have similar calls occurring on click of the Update button to get values selected in our form and set properties of objects in the HTML page based on those values. Notice how we can define CSS properties similar to how we would in a CSS file with the .css({attribute: "value"}) syntax, although it is using the attribute names you would use when defining these with standard Javascript, such as backgroundColor as opposed to background-color that you would use in a CSS file.

One complex line of code is the assignment of the border style on the menu, borderStyle: $("input:radio[name=lstBorder]:checked").val(). This finds the selected radio button with the name value “lstBorder” and pulls in the value of that input tag.

The error handling has been simplified here to just write a standard message on check of the font size value from our form being less than 0, instead of the “try/catch” block found in the ASP.NET/C# and the inclusion of system data about the error. More complex error handling could most likely be included.

We ensure to include return false; before closing off the .click code. From some web surfing and experimenting my understanding is that this will ensure the form completes it’s submission properly.

At the bottom of the jQuery file, we finish our jQuery code with });.

$(function() {
	$("#lblFontSizeException").hide();  
	$("#cmdUpdate").click(function() {  
		$("#lblFontSizeException").hide();
		var newFontSize = parseInt($("#txtFontSize").val(), 10);
		if (newFontSize <= 0)
        {
			$("#lblFontSizeException").html("<b>Please try again.</b><br /><br />Font size must be greater than 0.");
			$("#lblFontSizeException").css ({color: "red"});
			$("#lblFontSizeException").show();
		}
		else
		{
			$("#lblFontSizeException").html("<b>Excellent!</b><br /><br />The font may possibly be too big for the menu, but this is indeed a valid font size choice because it is greater than 0.");
			$("#lblFontSizeException").css ({color: "green"});
			$("#lblFontSizeException").show();
            $("#pnlMenu").css ({fontSize: newFontSize});
		}

		// Update the color
        $("#pnlMenu").css ({backgroundColor: $("#lstBackColor").val()});
		$("#pnlMenu").css ({color: $("#lstFontColor").val()});
		
		// Update the font
		$("#pnlMenu").css ({fontFamily: $("#lstFontName").val()});
		
		// Update the border
		$("#pnlMenu").css ({borderStyle: $("input:radio[name=lstBorder]:checked").val()});
		
		return false;        
  });  
});

magic_menu.css

Some CSS rounds out our web app. There is more CSS in this file than in the ASP.NET/C# version – for example .lstDropDown is present with a width and height defined – because we are no longer defining some of the styles directly on the web controls.

body 
{
    background-color: Silver;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 11px;
}

#pnlMenu
{
    background-color: White;
    position: absolute;
    top: 15px;
    left: 350px;
	width: 400px;
	height: 500px;
	text-align: center;
}

#pnlException
{
    position: absolute;
    top: 50px;
    left: 800px;
	width: 200px;
	height: 200px;
	text-align: left;
}

.lstDropDown
{
	width: 194px;
	height: 20px;
}

.lstRadio
{
	width: 170px;
	height: 60px;
}

.lstRadio
{
	width: 71px;
	height: 24px;
}

Here is the jQuery version of “Magic Menu”:

jQuery Magic Menu

This simple project serves two purposes:

It shows how you can recreate the ASP.NET/C# “Magic Menu” web app, which displays content on the page in a new format depending on choices in a form, using HTML5 and jQuery.
It shows how you can use the jQuery library to simplify standard Javascript.

Happy coding trails to you!

the artsycoder

one creative byte at a time

jQuery: Magic Menu Web App Revisited!

magic_menu.css

This simple project serves two purposes: