Post
Ask Question

Order Menu using jQuery

Introduction: In this article we will explore how we work with events in jQuery to make a simple GUI (graphical user interface). In this article we will make a menu order as a UI for the customer and will be applying some events to the menu items. Further here we are creating some categories of items and the customer will choose a category to select one of the items belonging to that category. So let's create an example page that puts the knowledge that we've gained so far to use. Here the page uses not only events but also some jQuery techniques that we've explored in earlier chapters, including some heavy-weight jQuery selectors. Further our goal for this example seems simple: to allow users to select the type and number of menu item categories they would like added to their order. Lets see how we will create it.

Step 1: Firstly we have to create a Web Application

  • Go to Visual Studio 2010
  • Create the Web Application
  • Click OK.

Step_1fig.gif

Step 2: Secondly you have to add a new page to the website

  • Go to the Solution Explorer.
  • Right Click on the Project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK.

Step_2_1fig.gif

Step_2_2fig.gif

Step 3: In this step we are going to see that see from where the js reference will be added to the source page of the default2.aspx page.

Step_3_img.gif

Step 4: Now we are going to write the script code which will be inside either on the head section or in the body section it will depend upon you which way you want to place it.

Step_4fig.gif

Step 5: In this line we will write the jQuery code for the GUI application:

Code:

Step_5_fig.gif

Code Description: $('fieldset div div').hide(); method is used to hide the menu item bydefault whenever we run the application. Hiding and showing the options is just one of the things that we need to do when the state of one of the check boxes changes. Let's look at each step in this fragment to see what it does for us. First, the click handler stores the checked state of the check box in a variable named checked. This makes for easy reference in the code, and it establishes a local variable that we can use in any closures that we create. it still needs to adjust the state of the quantity text boxes. These boxes are initially disabled and will only be enabled when an appetizeris checked. We locate the text box with $('input[type=text]',$(this) .parents('div:first')), a similar selector to the one we just employed that says "locate the <input> element of type text in my first parent <div>." To this element, we do the following:

Further we are using the attr() command to set its disabled state to correspond to the inverse of the check box state. Apply a CSS color value so that the text is invisible when the control is disabled. Set the value to 1. Call the change handler of the text box to compute the item and display them. the expression $('~ span:first',this) locates the first sibling of this that's a <span> element. Employ the each() method to obtain a reference to the element and assign focus to that element if the check box is in checked state. $('span[price] input[type=text]').change(); is used to change it's text value inside the textbox. further this will help to understand that how to establish click and change handlers on elements that can
be used to effect whatever user interface changes we want when triggered.

Step 6: In this step we will see the complete code for the default2.aspx page which is given below:

Code:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
<head>
<title>Mac D Menu</title>
 <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
 <script type="text/javascript">
    $(function () {
        $('fieldset div div').hide();
        $(':checkbox').click(function () {
            var checked = this.checked;
            $('div', $(this).parents('div:first'))
              .css('display', checked ? 'block' : 'none');
            $('input[type=text]', $(this).parents('div:first'))
              .attr('disabled', !checked)
              .css('color', checked ? 'black' : '#f0f0f0')
              .val(1)
              .change()
              .each(function () { if (checked) this.focus(); });
        });
        $('span[price] input[type=text]').change(function () {
            $('~ span:first', this).text(
        $(this).val() * $(this).parents("span[price]:first").attr('price')
        );
        });
        $('span[price] input[type=text]').change();
    });
 </script>
    <style type="text/css">
        .style1
        {
            width: 65px;
            height: 65px;
        }
    </style>
 </head>
<body>
<h1 style="background-color: #993333; font-family: 'Comic Sans MS';">
    <img class="style1" src="image/logo.png" alt="image" />c&#39; Donalds</h1>
 <h2 style="font-family: 'Comic Sans MS'; font-size: xx-large; color: #800000; background-color: #008080;">Online Order Menu</h2>
 <fieldset>
<legend style="font-family: 'Comic Sans MS'; color: #009933; font-size: x-large">Menu</legend>
 <div>
<label style="font-family: 'Comic Sans MS'; font-size: large; color: #800000">
 <input type="checkbox" name="Menu"
 value="imperial"/>
Breakfast Menu (4)
</label>
<span price="3" style="background-color: #FFCC99">
 <input type="text" name="imperial.quantity"
 disabled="disabled" value="1"
        style="background-color: #FF9966; font-family: 'Comic Sans MS'; height: 27px; width: 126px;"/>
$3<span></span>
 </span>
<div>
<label style="font-family: 'Comic Sans MS'; color: #800000">
 <input type="radio" name="imperial.option"
 value="Hash Brown" checked="checked"/>
Hash Brown
</label>
<label style="font-family: 'Comic Sans MS'; color: #800000">
 <input type="radio" name="imperial.option"
 value="vegetarian"/>
Veg McMuffin
</label>
<label style="font-family: 'Comic Sans MS'; color: #800000">
 <input type="radio" name="imperial.option"
 value="vegetarian"/>
Sausage Muffin
</label>
<label style="font-family: 'Comic Sans MS'; color: #800000">
 <input type="radio" name="imperial.option"
 value="Non-vegetarian"/>
Sausage McMuffin with egg
</label>
</div>
</div>
<div>
<label style="font-family: 'Comic Sans MS'; font-size: large; color: #000080">
 <input type="checkbox" name="appetizers" value="spring"/>
Beverages (5)
</label>
<span price="4" style="background-color: #FF6699">
 <input type="text" name="spring.quantity"
 disabled="disabled" value="1"
style="background-color: #FF5050; font-family: 'Comic Sans MS';"/>
$4
</span>
<div>
<label style="font-family: 'Comic Sans MS'; color: #0000FF">
 <input type="radio" name="spring.option" value="beverage"
 checked="checked"/>
Cappucino
</label>
<label style="font-family: 'Comic Sans MS'; color: #000080">
 <input type="radio" name="spring.option"
 value="bevarage"/>
Coke
</label>
<label style="font-family: 'Comic Sans MS'; color: #000080">
 <input type="radio" name="spring.option"
 value="beverage"/>
Plain Tea
</label>
<label style="font-family: 'Comic Sans MS'; color: #000080">
 <input type="radio" name="spring.option"
 value="beverage"/>
Hot Chocolate
</label>
<label style="font-family: 'Comic Sans MS'; color: #000080; background-color: #99FF99;">
 <input type="radio" name="spring.option"
 value="beverage"/>
Cold Coffee
</label>
</div>
</div>
<div style="background-color: #800000"></div>
 </fieldset>
</body>
</html>

Step 7: In this step we will see the design application which is given below:

Step_7fig.gif

Step 8: In this step we are going to run the application by pressing F5.

Output1:

Output1.gif

Output 2:

output2.gif

Output 3:

Output3.gif


Similar Articles