We Keep Coding

Grouping sub arrays by parent array element with JavaScript

I have a cart page that is loaded from a remote source and I want to change the layout of the page. I have grabbed all the html(tables) for the cart items and I want to iterate over the items and group them by item name. The html on the page is like this:
<table>
<tbody>
<tr>
<td class="cart-item">
<div class="cart-title">
South Georgia Pocket Tee - Mint / Medium
</div>
</td>
<td class="cart-price">
$15.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[29209762256]" id="updates_29209762256" value="2" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$30.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
South Georgia Pocket Tee - Navy / Medium
</div>
</td>
<td class="cart-price">
$15.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[29209761936]" id="updates_29209761936" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$15.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
South Georgia Pocket Tee - Navy / Small
</div>
</td>
<td class="cart-price">
$15.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[29209761872]" id="updates_29209761872" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$15.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Crimson with Navy / Large
<br />
Town/City:
ohio
<br>
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35347518736]" id="updates_35347518736" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Crimson with Navy / Large
<br />
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35347518736]" id="updates_35347518736" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Crimson with Navy / Small
<br />
Town/City:
ohio
<br>
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35345344848]" id="updates_35345344848" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Crimson with Navy / Small
<br />
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35345344848]" id="updates_35345344848" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Navy with Red / Medium
<br />
Town/City:
ohio
<br>
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35347517136]" id="updates_35347517136" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Navy with Red / Medium
<br />
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35347517136]" id="updates_35347517136" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Red with Ice Blue / XLarge
<br />
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35347521872]" id="updates_35347521872" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Sage With Ice Blue / XLarge
<br />
Town/City:
ohio
<br>
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[41628245584]" id="updates_41628245584" value="1" onfocus="this.select();"/>
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - Sage With Ice Blue / XLarge
<br />
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[41628245584]" id="updates_41628245584" value="1" onfocus="this.select();" />
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
<tr>
<td class="cart-item">
<div class="cart-title">
Town Specific Short Sleeve Tee - White with Red / Medium
<br />
</div>
</td>
<td class="cart-price">
$16.00
</td>
<td class="cart-quantity">
<input type="text" class="cart-qty" size="4" name="updates[35347518416]" id="updates_35347518416" value="1" onfocus="this.select();" />
</td>
<td class="cart-remove">
<i class="icon-trash icon-2x"></i>
</td>
<td class="cart-total">
$16.00
</td>
</tr>
</tbody>
I am using JavaScript to iterate over the `enter code table rows and split the item by 'cart-item'. I am then splitting the string into title, colour, size and town:
var full_array = new Array();
var item_array = new Array();
var variant_array = new Array();
$('.cart-item').each(function() {
var split_string = $(this).find(' .cart-title').html().split(' - ');
if (split_string[0] != 'remove') {
item_array['name'] = split_string[0];
var split_variant = split_string[1].split('/');
variant_array['colour'] = split_variant[0];
var split_size = split_variant[1].split('<br>');
variant_array['size'] = split_size[0];
variant_array['town'] = split_size[1];
item_array['value']=variant_array;
full_array.push(item_array);
item_array = [];
variant_array = [];
}
This gives me array with elements similar to this:
array{ name:"South Georgia Pocket Tee"
value:[colour: "Navy",size: "Small", town: undefined]}
What I want to do is group all the parent elements with sub elements under so I can loop them and replace the current cart html with new adjusted html. So the cart will look like this:
<div><ul>**Town Specific Short Sleeve Tee**
<li>Crimson with Navy /Large : 1</li>
<li>Crimson with Navy /Large(town-London) : 1</li>
<li>Navy with Red /Medium :1</li>
<li>Navy with Red /Medium(town-Manchester) : 1</li>
</ul></div>
etc.
How would I group the array so I can iterate and replace the html using JavaScript?

I sorted this out by changing the original each loop to this
if(split_variant[0].search('<br>')) {
var split_size = split_variant[1].split('<br>');
variant_array['size'] = split_size[0];
variant_array['town'] = split_size[1];
}else{
variant_array['size'] = split_variant[1];
}
item_array['value']= new Array();
item_array['value'].push(variant_array);
full_array.push(item_array);
then I ran this function
full_array.forEach(function(value) {
var existing = output.filter(function(v, i) {
return v.name == value.name;
});
if (existing.length) {
var existingIndex = output.indexOf(existing[0]);
output[existingIndex].value = output[existingIndex].value.concat(value.value);
} else {
if (typeof value.value == 'string')
value.value = [value.value];
output.push(value);
}
});
and output then had the grouped array, bit messy but does the job.

Issues with ui bootstrap modal CSS and printing

I am creating a webpage using angularjs and ui bootstrap to create modals. Then I have javascript to print just the modal. However, I am having an issue with my CSS. Firstly, for some reason (most likely because my CSS is messed up) the text is extending outside the div they belong in. Specifically, the ingredients and nutrition facts within the div with the class "onerow" are extending below the div with the class "modal-body".
Here is the plunker: http://plnkr.co/edit/fxvD6MTvbEHsaonLR669?p=preview
Furthermore, I have some javascript to print just the modal pane. It seems to work except for the fact that for some reason the thick solid black borders in the nutrition facts become borders with rounded corners. Again, refer to the plunker to better see what I am talking about.
Here is the html that makes up the modal:
<div class="modal-header" id="modalHeader" style="text-align: center;">
<h3 class="modal-title">PLU# {{productData.PLU}} -- {{productData.Dept}}</h3>
</div>
<div class="modal-body" id="modalBody">
<div ng-show="!pluValid" style="text-align:center;">
PLU {{productData.PLU}} not found in Database
</div>
<div class="onerow" ng-show="pluValid">
<div class="col6">
<div style="text-align: center;">{{productData.Desc1}} {{productData.Desc2}}</div>
<br />
<br />
Ingredients:
<br />
{{productData.Ingredients}}
<br />
<br />
<br />
<div style="text-align: center;">
<b>UPC NUMBER</b>
<br />
{{productData.UPC}}
</div>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="!areFacts">
<table style="width:100%;" cellspacing:0 cellpadding:0>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts</td>
</tr>
<tr>
<td style="text-align: center;">N/A</td>
</tr>
</tbody>
</table>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="areFacts">
<table style="width:100%;" cellspacing:0; cellpadding:0;>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts<br /><br /></td>
</tr>
<tr>
<td>
Serving Size {{productData.ServSize}}
<br />
Servings Per Container {{productData.ServPer}}
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<div class="line">Amount Per Serving</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Calories
<div class="weight">{{productData.Calories}}</div>
</div>
<div style="padding-top: 1px; float: right;" class="labellight">Calories from Fat
<div class="weight">{{productData.CaloriesFat}}</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<br />
<div class="dvlabel" style="text-align: right;">% Daily Value<sup>*</sup></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Fat
<div class="weight">{{productData.TotalFat}}g</div>
</div>
<div class="dv">{{productData.PerFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Saturated Fat
<div class="weight">{{productData.SatFat}}g</div>
</div>
<div class="dv">{{productData.PerSatFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Trans Fat
<div class="weight">{{productData.TransFat}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Cholesterol
<div class="weight">{{productData.Cholesterol}}mg</div>
</div>
<div class="dv">{{productData.PerCholesterol}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Sodium
<div class="weight">{{productData.Sodium}}mg</div>
</div>
<div class="dv">{{productData.PerSodium}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Carbohydrates
<div class="weight">{{productData.Carbs}}g</div>
</div>
<div class="dv">{{productData.PerCarbs}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Dietary Fiber
<div class="weight">{{productData.Fiber}}g</div>
</div>
<div class="dv">{{productData.PerFiber}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Sugars
<div class="weight">{{productData.Sugars}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">
Protein
<div class="weight">{{productData.Protein}}g</div>
</div>
</div>
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" class="vitamins">
<tbody>
<tr>
<td>Vitamin A {{productData.VitA}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin C {{productData.VitC}}%</td>
</tr>
<tr>
<td>Calcium {{productData.Calc}}%</td>
<td style="text-align: center;">•</td>
<td>Iron {{productData.Iron}}%</td>
</tr>
<tr>
<td>Vitamin D {{productData.VitD}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin E {{productData.VitE}}%</td>
</tr>
<tr>
<td>Thiamine {{productData.Thia}}%</td>
<td style="text-align: center;">•</td>
<td>Riboflavin {{productData.Ribo}}%</td>
</tr>
<tr>
<td>Niacin {{productData.Niac}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B6 {{productData.VitB6}}%</td>
</tr>
<tr>
<td>Folate {{productData.Folate}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B12 {{productData.VitB12}}%</td>
</tr>
<tr>
<td>Biotin {{productData.Biotin}}%</td>
<td style="text-align: center;">•</td>
<td>Phosphorus {{productData.Phos}}%</td>
</tr>
<tr>
<td>Zinc {{productData.Zinc}}%</td>
<td style="text-align: center;">•</td>
<td>Magnesium {{productData.Mag}}%</td>
</tr>
<tr>
<td>Iodine {{productData.Iodine}}%</td>
<td style="text-align: center;">•</td>
<td>Copper {{productData.Copper}}%</td>
</tr>
<tr>
<td>Pantothenic Acid {{productData.Acid}}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="labellight">
*Percent Daily Values are based on a 2000 calories diet. Your daily values may be higher or lower depending on your calories needs.
<table border=0 width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="30%"> </td>
<td width="30%">Calories:</td>
<td width="20%" style="text-align:left">2000</td>
<td width="20%" style="text-align:left">2000</td>
</tr>
</table>
</div>
</div>
<div class="line labellight" style="width: 100%;">
<table border=0 cellspacing="0" cellpadding="0" style="width: 100%">
<tr>
<td width="30%">Total Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">65<i>g</i></td>
<td width="20%" style="text-align:left">80<i>g</i></td>
</tr>
<tr>
<td width="30%">Sat Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">20<i>g</i></td>
<td width="20%" style="text-align:left">25<i>g</i></td>
</tr>
<tr>
<td width="30%">Cholesterol</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
</tr>
<tr>
<td>Sodium</td>
<td>Less Than</td>
<td style="text-align:left">2400<i>mg</i></td>
<td style="text-align:left">2400<i>mg</i></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">Total Carbohydrates</td>
<td style="text-align:left">300<i>g</i></td>
<td style="text-align:left">375<i>g</i></td>
</tr>
<tr>
<td colspan="2"> Dietary Fiber</td>
<td style="text-align:left">25<i>g</i></td>
<td style="text-align:left">30<i>g</i></td>
</tr>
</table>
<div class="line">
Calories per gram:
<br />
Fat 9 - Carbohydrate 4 - Percent 4
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" ng-click="print()">Print</button>
<button class="btn btn-primary" type="button" ng-click="close()">Close</button>
</div>

The problem is the table content requires more then the div width.
A very simple fix to start with is using the overflow CSS property in the #nutritionfacts div.
#nutritionfacts {
border: 1px solid black;
padding: 3px;
font-family: 'Arial Black', sans-serif;
overflow: scroll;
}
As for the modal border-radius problem, you need to override the default .modal-content class which in bootstrap styles has a border-raidius: 6px rule.

how to get the display the content of one page but clicking a button

i have a page having some contents plus a edit button So when you hit the edit button it will show the 2nd page. I want it as if both are in only one page. it will look like the last name(text area is converted into text field)Please tell me how to do it
the screen shot is
and the source code is as follows
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Dr. Sukant Kumar nayak</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
</td>
<td>
<label for="LastName">LastName</label>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
</td>
<td>
<label for="FirstName">First Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<label for="DateofBirth">Date of Birth</label>
</td>
</tr>
<tr>
<td height="30">
<b>Qualification</b>
</td>
<td>
<label for="LastName">Qualification</label>
</td>
</tr>
<tr>
<td height="30">
<b>Registration. No.</b>
</td>
<td>
<label for="RegistrationNo">Registration No</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country of Registration</b>
</td>
<td>
<label for="CountryofRegistration">Country of Registration</label>
</td>
</tr>
<tr>
<td height="30">
<b>Practice Name</b>
</td>
<td>
<label for="PracticeName">Practice Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
</td>
<td>
<label for="Phone">Phone</label>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
</td>
<td>
<label for="Email">Email</label>
</td>
</tr>
<tr>
<td height="30">
<b></b>
</td>
<td align="right" >
<label for="Email"><input type="submit" class="button button-submit" value="Edit" /></label>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<label for="Address">Address</label>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<label for="Street">Street</label>
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
</td>
<td>
<label for="City">City</label>
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
</td>
<td>
<label for="State">State</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
</td>
<td>
<label for="Country">Country</label>
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<label for="PinCode">Pin Code</label>
</td>
</tr>
<tr>
<td height="30">
<b>How do you know?</b>
</td>
<td>
<label for="HowDoYouKnow">How Do You Know</label>
</td>
</tr>
<tr>
<td height="30">
<b>Comment</b>
</td>
<td>
<label for="Comments">Comments</label>
</td>
</tr>
</table><div align="center" style="padding-top: 30px">
</div>
</div>
</div>
</div>
</article>
<!-- Article 1 end -->
<!-- Article 2 start -->
<div class="line"></div>
<div class="space"></div> <div class="space"></div> <div class="space"></div> <div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<article id="article2">
<h2>Change Password</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<img src="medical.jpg" width="620" height="440" /></a>
</figure>
<p><div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old" type="password"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="newPsw" type="password"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm" type="password"></td>
</tr>
</table>
</div>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
dh
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
when you hit the edit button the this should this display
![enter image description here][2]
the source code is as follows
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Dr. Sukant Kumar nayak</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div style="float: left; padding-left: 50px; padding-top: 50px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="LastName" type="text" value="<%=lastName %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="FirstName" type="text" value="<%=firstName %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<input name="DateofBirth" type="text" value="<%=DOB %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Qualification</b>
</td>
<td>
<input name="Qualification" type="text" value="<%=Qualification %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Registration. No.</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="RegistrationNo" type="text" value="<%=RegistrationNo %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Country of Registration</b>
</td>
<td>
<input name="CountryofRegistration" type="text" value="<%=CountryOfRegistration %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Practice Name</b>
</td>
<td>
<input name="PracticeName" type="text" value="<%=PracticeName %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Phone" type="text" value="<%=Phone %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Email" type="text" value="<%=Email %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Image</b>
</td>
<td>
<input name="Image" type="file" />
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<input name="Address" type="text" value="<%=Address %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<input name="Street" type="text" value="<%=Street %>" />
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="City" type="text" value="<%=City %>" />
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="State" type="text" value="<%=State %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Country" type="text" value="<%=country %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<input name="PinCode" type="text" value="<%=PinCode %>" />
</td>
</tr>
<tr>
<td height="30">
<b>How do you know?</b>
</td>
<td>
<input name="HowDoYouKnow" type="text" />
</td>
</tr>
<tr>
<td height="30">
<b>Comment</b>
</td>
<td>
<textarea name="Comments" cols="15" rows="5" readonly></textarea>
</td>
</tr>
</table>
</div>
<br><br>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
dh
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>

As Praveen said, you don't need two different pages, but two divs in the same page, and then use some javascript to switch between the display/visibility of the two. You can do this with two different classess per element, which the classes having different properties for display (display:none and display:block) or visibility (visibilty: hidden and visibility:visible).
JQuery toggle() method is a straightforward option:
http://api.jquery.com/toggle/
But mind that it toggles display, so it will affect your layout (display:none affects your layout, while visibility:hidden does not), which is something probably you don't want. One way to avoid this (but I am not 100% sure this is the best way to do it) is to insert each div (position:absolute) within another div (position:relative)

apply a css class which you want to display.By clicking on button show those fields only.

Just Make two div.. One div with the first image contents and second div with second image content. and once u clicked edit button just hide the first div and display second div.....

Can I simulate a click on a hyperlink with jQuery code?

I have seen a couple of Stack Overflow posts which apparently relate to my question but none of them seem to do what I want.
I have a nested structure to display hierarchies (business units and brands) in a report:
<tr class="BrandRow1">
<td>
</td>
</tr>
<tr class='BrandRow1 StoreRow1'>
...
</tr>
<tr class='BrandRow1 StoreRow2'>
...
</tr>
and within this layout I use A tags to show/hide the 'child' content (by making use of the class attributes.
On load, I want to show all the 'nodes' if $('.StoreRow2').length is less than say 4.
I use a function to do the toggling:
// Allow an item to toggle other items' visibility
$(".VisibilityToggle").click(function () {
var ControlledClass = findClass($(this), "Toggles-");
if (ControlledClass != "") {
$("." + ControlledClass).toggle();
var Text = $(this).attr("rel");
if (Text != "") $(this).attr("rel", $(this).attr("rev")).attr("rev", Text).text(Text);
}
return false;
});
and what I'd like to do is trigger the 'toggling' open by calling this from JS code.
I thought something like '$(".VisibilityToggle").click()` would do what I want but this doesn't seem to work in my code, but does if I call it manually via the JS console in Chrome. I suspect its to do with my code running before the events have been bound to the page.
Can you please assist?
E.g. Markup
...
<tr class='BrandRow TRBrand_2'>
<td class="Level0">
<p>
<a id="DesktopApp0_ctl00_rptReportBrand_ctl01_A_Brand" rel="-" rev="+" class="button toggleButton SummaryToggle VisibilityToggle Toggles-BrandId_2">+</a> <strong>Brand2</strong>
</p>
</td>
<td>
<p>
34</p>
</td>
<td>
<p>
21</p>
</td>
<td>
<p>
22</p>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
0.0%</p>
</td>
<td>
<p>
1
</p>
</td>
<td>
<p>
34.0
</p>
</td>
</tr>
<tr class='SiteRow BrandId_2 TRStore_10'>
<td class="Level1">
<p>
<a id="DesktopApp0_ctl00_rptReportBrand_ctl01_rptSites_ctl00_A_Site" rel="-" rev="+" class="button toggleButton SummaryToggle VisibilityToggle Toggles-TRSiteUser_10">+</a> <span class="Bold">BrandX - Store 10</span>
</p>
</td>
<td>
<p>
14</p>
</td>
<td>
<p>
9</p>
</td>
<td>
<p>
8</p>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
0.0%</p>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
0.0
</p>
</td>
</tr>
<tr class='UserRow TRStoreUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Clarke Kent
</p>
</td>
<td>
<p>
3</p>
</td>
<td>
<p>
3</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_3">1</span><span class=" d5_3">2</span><span class=" d5_3">3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Alexie Sayle
</p>
</td>
<td>
<p>
2</p>
</td>
<td>
<p>
2</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_2">1</span><span class=" d5_2">2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Anders Bottom
</p>
</td>
<td>
<p>
1</p>
</td>
<td>
<p>
1</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Daniella Ecclescake
</p>
</td>
<td>
<p>
1</p>
</td>
<td>
<p>
1</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Mark E Smith
</p>
</td>
<td>
<p>
2</p>
</td>
<td>
<p>
1</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Matthew Bannister
</p>
</td>
<td>
<p>
1</p>
</td>
<td>
<p>
1</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span class=" d5_1">1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
<tr class='UserRow TRSiteUser_10'>
<td class="Level2">
<p>
<img src="/img/icons/spacer.png" alt=" " />
Raj Patel
</p>
</td>
<td>
<p>
3</p>
</td>
<td>
<p>
0</p>
</td>
<td colspan="3" class="Drive5Graphic">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span class=" plus">+</span>
</td>
<td>
<p>
0</p>
</td>
<td>
<p>
∞</p>
</td>
</tr>
...

you could use trigger:
$(".ABrand").trigger('click');
Is that what you wanted to achieve?

There's nothing wrong with the syntax you have: click() will trigger a click on the element.
$('.ABrand').click();
More markup is required to properly answer your question I would think, but take a look at live() and delegate(), which can be used outside document.ready if you're worried that things aren't getting hooked up in time.
$(".VisibilityToggle").live("click", function() { ... } );
$("#Container").delegate(".VisibilityToggle", click", function() { ... } );

If you're having trouble timing the event bind (i.e. the .click(function(){})) and the event trigger (i.e. the .click()), why not just chain the two together?
$('.ABrand').click(function() {
// do 3 flips, 5 somersaults and a pirouette
}).click();
This way, you're sure the click trigger gets called after the click bind.

How can I select the second cancel button instead of the first?

I want to cancel the second line item instead of the first.
Below is some sample code for the 2 line items:
<div class="screenlet-body">
<form name="updateItemInfo" method="post" action="/ordermgr/control/updateOrderItems">
<input type="hidden" name="orderId" value="140070"/>
<input type="hidden" name="orderItemSeqId" value=""/>
<input type="hidden" name="shipGroupSeqId" value=""/>
<input type="hidden" name="supplierPartyId" value="10964"/>
<input type="hidden" name="orderTypeId" value="PURCHASE_ORDER"/>
<table class="basic-table order-items" cellspacing="0">
<tr class="header-row">
<td width="25%">Product</td>
<td width="10">Part Condition</td>
<td width="25%">Status</td>
<td width="5%" class="align-text">Quantity</td>
<td width="10%" class="align-text">Unit Price</td>
<td width="10%"> </td>
<td width="10%" class="align-text">Sub Total</td>
<td width="2%"> </td>
<td width="3%"> </td>
</tr>
<tr><td colspan="8"><hr/></td></tr>
<tr>
<td valign="top">
<div>
10588 -
NAS516-1A
- ZERk FITTING
</td>
<td>
<select name="icon_00001">
<option/>
<option value="ARM">As Removed</option>
<option value="INP">Inspected/ Tested</option>
<option value="NES">New Surplus</option>
<option value="NEW">New</option>
<option value="OVH">Overhauled/ Remanufactured</option>
<option value="RPR">Repaired/ Serviceable</option>
<option value="UNK">Unknown</option>
</select>
</td>
<td>
Current Created<br/>
2011-03-11 09:16:57.0 Created<br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
Ordered 5 <br/>
Cancelled: 0 <br/>
Remaining: 5 <br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
<input type="text" size="8" name="ipm_00001" value="10"/>
<input type="checkbox" name="opm_00001" value="Y"/>
</td>
<td> </td>
<td class="align-text" valign="top" nowrap="nowrap">
$50.00
<tr><td colspan="8"> </td></tr>
<tr>
<td align="right"><span class="label">Ship Group</span></td>
<td align="left"> [00001] 2920 E. Chambers St.</td>
<td align="right"><span class="label">Quantity</span></td>
<td align="right">
<input type="text" name="iqm_00001:00001" size="6" value="5"/>
<input type="checkbox" name="selectedItem" value="00001">
</td>
<td>
</td>
<td colspan="2"> </td>
<td align="right">
<a id="cancel_00001" name="cancel_00001 "href="javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00001';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()" class="buttontext">Cancel</a>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Comments</span>
</td>
<td colspan="7" align="left">
<input type="text" name="icm_00001" value="" size="30" maxlength="60"/>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Delivery Date</span>
</td>
<td colspan="7" align="left" colspan="7">
<input type="text" name="iddm_00001" value="2011-03-31 12:49:16.000" size="25" maxlength="30"/>
<img src="/images/cal.gif" width="16" height="16" border="0" alt="Click here For Calendar"/>
</td>
</tr>
<div>
10602 -
MS21075L3N
- NUTPLATE
</td>
<td>
<select name="icon_00002">
<option/>
<option value="ARM">As Removed</option>
<option value="INP">Inspected/ Tested</option>
<option value="NES">New Surplus</option>
<option value="NEW" selected>New</option>
<option value="OVH">Overhauled/ Remanufactured</option>
<option value="RPR">Repaired/ Serviceable</option>
<option value="UNK">Unknown</option>
</select>
</td>
<td>
Current Created<br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
Ordered 1 <br/>
Cancelled: 0 <br/>
Remaining: 1 <br/>
</td>
<td class="align-text" valign="top" nowrap="nowrap">
<input type="text" size="8" name="ipm_00002" value="100"/>
<input type="checkbox" name="opm_00002" value="Y"/>
</td>
<td> </td>
<td class="align-text" valign="top" nowrap="nowrap">
$100.00
<tr><td colspan="8"> </td></tr>
<tr>
<td align="right"><span class="label">Ship Group</span></td>
<td align="left"> [00001] 2920 E. Chambers St.</td>
<td align="right"><span class="label">Quantity</span></td>
<td align="right">
<input type="text" name="iqm_00002:00001" size="6" value="1"/>
<input type="checkbox" name="selectedItem" value="00002">
</td>
<td>
</td>
<td colspan="2"> </td>
<td align="right">
<a id="cancel_00002" name="cancel_00002 "href="javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00002';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()" class="buttontext">Cancel</a>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Comments</span>
</td>
<td colspan="7" align="left">
<input type="text" name="icm_00002" value="This is a comment." size="30" maxlength="60"/>
</td>
</tr>
<tr>
<td align="right">
<span class="label">Delivery Date</span>
</td>
<td colspan="7" align="left" colspan="7">
<input type="text" name="iddm_00002" value="" size="25" maxlength="30"/>
<img src="/images/cal.gif" width="16" height="16" border="0" alt="Click here For Calendar"/>
</td>
</tr>
<td colspan="7"> </td>
<td><input type="submit" value="Update Items" class="buttontext"/> </td>
What I need to do is cancel the second line item on the order.
There is 4 large windows showing code.
The second large one is the first line item and the fourth large one is the second line item.
I need to cancel the second.
Thanks in advance.

I actually figured out a way to do it using this line of code:
browser.link(:url, "javascript:document.updateItemInfo.action='/ordermgr/control/cancelOrderItem';document.updateItemInfo.orderItemSeqId.value='00002';document.updateItemInfo.shipGroupSeqId.value='00001';document.updateItemInfo.submit()").click
The way it works is I specify the first value to reflect the line item number which will cancel out the specified line item.
Thanks for your help guys.