2014-03-30 - Learn Jquery | Learning Javascript | Jquery Tutorials | Jquery Articles | Learn Scripting

How to add Google maps to your website using JQuery?

<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">title</span><span style="color: blue;">></span>Basic<span style="color: blue;"></</span><span style="color: maroon;">title</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">src</span><span style="color: blue;">="jquery-1.10.2.js"</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"</span>
<span style="color: red;">src</span><span style="color: blue;">="http://maps.google.com/maps/api/js?sensor=true"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">src</span><span style="color: blue;">="gmaps.js"</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">var</span>
mapArea = <span style="color: blue;">new</span> GMaps({<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                zoom: 9, <span style="color: darkgreen;">//Set Zoom Level</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                el: <span style="color: maroon;">'#divMap'</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                lat: 8.565081,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                lng: 77.968092,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                zoomControl: <span style="color: blue;">true</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                zoomControlOpt: {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    style: <span style="color: maroon;">'LARGE'</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    position: <span style="color: maroon;">'RIGHT_CENTER'</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                },<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                panControl: <span style="color: blue;">true</span>, <span style="color: darkgreen;">// used for
navigating left,right,top and bottom</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                streetViewControl: <span style="color: blue;">true</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                mapTypeControl: <span style="color: blue;">true</span>, <span style="color: darkgreen;">//used for
displaying map/satellite mode</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                overviewMapControl: <span style="color: blue;">false</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            mapArea.addMarker({<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                lat: 8.565081,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                lng: 77.968092,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                title: <span style="color: maroon;">'Nazareth'</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                click: <span style="color: blue;">function</span>
(e) {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    alert(<span style="color: maroon;">'Nazareth'</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            })<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">style</span>
<span style="color: red;">type</span><span style="color: blue;">="text/css"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: maroon;">#divMap</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">display</span>:
<span style="color: blue;">block</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">width</span>:
<span style="color: blue;">95%</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">height</span>:
<span style="color: blue;">350px</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">margin</span>: <span style="color: blue;">0</span> <span style="color: blue;">auto</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">box-shadow</span>:
<span style="color: blue;">0px</span> <span style="color: blue;">5px</span> <span style="color: blue;">20px</span> <span style="color: blue;">#ccc</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">style</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">div</span> <span style="color: red;">id</span><span style="color: blue;">="divMap"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div>
</div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<u><span style="color: #595959; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: #595959; mso-style-textfill-fill-colortransforms: "lumm=65000 lumo=35000"; mso-style-textfill-fill-themecolor: text1; mso-themecolor: text1; mso-themetint: 166;">Adding Google Maps to your site, Adding custom Google maps
to your website using jQuery, Embed Google map in your webpage<o:p></o:p></span></u></div>
</div>

How to add Google maps to your website using JQuery?

Description: Welcome to Jqueryjohn.com . In this article, I will explain how to add Google Maps on website using Jquery . ...

How to create fixed header when scrolling the page using JQuery?

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<b><u><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Description:</span></u></b><span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Welcome to <b>Jqueryjohn.com</b>.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">In this article, I will explain how to create fixed header
while scrolling the page using <a href="http://www.jqueryjohn.com/"><span style="color: #720000; text-decoration: none; text-underline: none;">Jquery</span></a>.  <o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">While doing scrolling on the webpage, the header should remain
top of the screen. To implement this functionality, I have used simple
JavaScript code.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">Create a header div which we want to freeze at the top.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">In the below code, I have added event listener to scroll event.
This event is called each time when scroll event is fired.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<br /></div>
<div class="MsoNormal" style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin-bottom: 0in;">
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin-bottom: 0.0001pt;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">While page is scrolling down, set the top attribute to 0px and
make the header position fixed.<o:p></o:p></span></div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin-bottom: 0.0001pt;">
<br /></div>
<div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">For live demo, <a href="http://jsbin.com/nilay/1/edit?html,output" target="_blank">click here</a>.<o:p></o:p></span></div>
<div class="MsoNormal" style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin-bottom: 0.0001pt;">
<br /></div>
<br />
<div class="MsoNormal">
<b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%;">Example
program:<o:p></o:p></span></u></b></div>
</div>
<div class="MsoNormal">
<b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%;"><br /></span></u></b></div>
<div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 1.0pt 1.0pt 1.0pt;">
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">title</span><span style="color: blue;">></</span><span style="color: maroon;">title</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">src</span><span style="color: blue;">="jquery-1.9.1.js"</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">var</span>
fixHeader = $(<span style="color: maroon;">'#fixedHeader'</span>).offset().top;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(window).scroll(<span style="color: blue;">function</span> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">if</span>
($(window).scrollTop() > fixHeader) {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    $(<span style="color: maroon;">'#fixedHeader'</span>).css({
position: <span style="color: maroon;">'fixed'</span>, top: <span style="color: maroon;">'0px'</span> });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                } <span style="color: blue;">else</span>
{<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    $(<span style="color: maroon;">'#fixedHeader'</span>).css({
position: <span style="color: maroon;">'static'</span>, top: <span style="color: maroon;">'0px'</span> });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">style</span>
<span style="color: red;">type</span><span style="color: blue;">="text/css"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: maroon;">#fixedHeader</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">background-color</span>:
<span style="color: blue;">Gray</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">height</span>:
<span style="color: blue;">60px</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">width</span>:
<span style="color: blue;">990px</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: maroon;">#fixedHeader</span>
<span style="color: maroon;">ul</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">margin</span>:
<span style="color: blue;">0</span> <span style="color: blue;">10px</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">padding</span>:
<span style="color: blue;">10px</span> <span style="color: blue;">40px</span> <span style="color: blue;">15px</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">box-shadow</span>:
<span style="color: blue;">0</span> <span style="color: blue;">12px</span> <span style="color: blue;">5px</span> <span style="color: blue;">-6px</span> <span style="color: blue;">rgba(0, 0, 0, 0.5)</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: maroon;">#fixedHeader</span>
<span style="color: maroon;">ul</span> <span style="color: maroon;">li</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">display</span>:
<span style="color: blue;">inline</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
        <span style="color: red;">font-weight</span>:
<span style="color: blue;">bold</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">margin</span>:
<span style="color: blue;">0</span> <span style="color: blue;">20px</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">style</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">div</span>
<span style="color: red;">id</span><span style="color: blue;">="fixedHeader"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">ul</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"><</span><span style="color: maroon;">li</span><span style="color: blue;">><</span><span style="color: maroon;">a</span> <span style="color: red;">href</span><span style="color: blue;">="#"></span>Home<span style="color: blue;"></</span><span style="color: maroon;">a</span><span style="color: blue;">></</span><span style="color: maroon;">li</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"><</span><span style="color: maroon;">li</span><span style="color: blue;">><</span><span style="color: maroon;">a</span> <span style="color: red;">href</span><span style="color: blue;">="#"></span>Articles<span style="color: blue;"></</span><span style="color: maroon;">a</span><span style="color: blue;">></</span><span style="color: maroon;">li</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"><</span><span style="color: maroon;">li</span><span style="color: blue;">><</span><span style="color: maroon;">a</span> <span style="color: red;">href</span><span style="color: blue;">="#"></span>Tutorials<span style="color: blue;"></</span><span style="color: maroon;">a</span><span style="color: blue;">></</span><span style="color: maroon;">li</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"><</span><span style="color: maroon;">li</span><span style="color: blue;">><</span><span style="color: maroon;">a</span> <span style="color: red;">href</span><span style="color: blue;">="#"></span>PlugIns<span style="color: blue;"></</span><span style="color: maroon;">a</span><span style="color: blue;">></</span><span style="color: maroon;">li</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"></</span><span style="color: maroon;">ul</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">div</span>
<span style="color: red;">id</span><span style="color: blue;">="content"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">h3</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            Add your page content Here<span style="color: blue;"></</span><span style="color: maroon;">h3</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">p</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            This is the sample content for the
page.<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"></</span><span style="color: maroon;">p</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div>
</div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<u><span style="color: #595959; font-family: "Verdana","sans-serif"; font-size: 10.0pt; line-height: 115%; mso-themecolor: text1; mso-themetint: 166;">Create fixed header while scrolling using jquery, fixed
header using jquery, facebook like header with fixed position, jquery
scrollable div with fixed header<o:p></o:p></span></u></div>
</div>

How to create fixed header when scrolling the page using JQuery?

Description: Welcome to Jqueryjohn.com . In this article, I will explain how to create fixed header while scrolling the page usin...

How to create simple Gridview using JQuery and Ajax?

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Description:<o:p></o:p></span></u></b></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Welcome to <b>Jqueryjohn.com</b>.<o:p></o:p></span></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">In this article, I will explain how to create
simple JQuery Gridview using Ajax.<o:p></o:p></span></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">One of my friends asked me to add, edit and
delete a record to html table like Gridview on client side without postback. I have
chosen JQuery for this. <o:p></o:p></span></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Using JQuery Gridview, user can able to Add,
Edit and Delete a record without refreshing the page.<o:p></o:p></span></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">For displaying the records like Gridview, i
am getting the records as Json object from the server using Ajax and binding
with the html table. <o:p></o:p></span></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div class="MsoNormal" style="line-height: 13.5pt;">
<span style="color: #333333; font-family: "Verdana","sans-serif"; font-size: 10.0pt;"><a href="http://www.jqueryjohn.com/search/label/AJAX"><span style="color: #720000;">Ajax</span></a><span class="apple-converted-space"> </span></span><span style="font-family: Verdana, sans-serif; font-size: 10pt;">used to
connect with the server side without reloading the page.<u1:p></u1:p></span><span style="font-family: Verdana, sans-serif; font-size: 9pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 13.5pt;">
<span style="font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">If the user wants
to add new row, it opens new dialog window with the input fields. Just add the
values and save it. Added data will append with the html table without
refreshing the page.<o:p></o:p></span></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">If the user wants
to update a particular record, click the update image on the row. It opens
dialog window, modify the values and save it.<o:p></o:p></span></div>
<div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div class="MsoNormal" style="line-height: 14.4pt;">
<span style="font-family: Verdana, sans-serif; font-size: 10pt;">While
calling AJAX method through JQuery, the method should be static and it should
be web method.<u1:p></u1:p></span><span style="font-family: Verdana, sans-serif; font-size: 9pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 14.4pt;">
<span style="font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></div>
<div class="MsoNormal" style="line-height: 14.4pt;">
<span style="font-family: Verdana, sans-serif; font-size: 10pt;">Advantage
of having JQuery Gridview is, there is no postback for every operation. It increases
performance also.<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 14.4pt;">
<span style="font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></div>
<div class="MsoNormal" style="line-height: 14.4pt;">
<b><u><span style="font-family: Verdana, sans-serif; font-size: 10pt;">Example program:<o:p></o:p></span></u></b></div>
<div class="MsoNormal" style="line-height: 14.4pt;">
<b><u><span style="font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></u></b></div>
<div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 1.0pt 1.0pt 1.0pt;">
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">xmlns</span><span style="color: blue;">="http://www.w3.org/1999/xhtml"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: red;">id</span><span style="color: blue;">="Head1"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">title</span><span style="color: blue;">></</span><span style="color: maroon;">title</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">src</span><span style="color: blue;">="jquery-1.10.2.js"</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">src</span><span style="color: blue;">="jquery-ui-1.10.3.custom.js"</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">link</span>
<span style="color: red;">href</span><span style="color: blue;">="jquery-ui-1.10.3.custom.css"</span>
<span style="color: red;">rel</span><span style="color: blue;">="stylesheet"</span>
<span style="color: red;">type</span><span style="color: blue;">="text/css"</span>
<span style="color: blue;">/></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        $(document).ready(<span style="color: blue;">function</span> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            LoadPage();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#PopupContent"</span>).dialog({<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                title: <span style="color: maroon;">"PopUp
Title"</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                autoOpen: <span style="color: blue;">false</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                height: 200,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                width: 300,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                modal: <span style="color: blue;">true</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#btnSave"</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                DoOperation();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span> <span style="color: blue;">false</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#btnCancel"</span>).click(<span style="color: blue;">function</span> () {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                DefaultMode();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span>
<span style="color: blue;">false</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">script</span>
<span style="color: red;">type</span><span style="color: blue;">="text/javascript"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span>
DefaultMode() {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#PopupContent"</span>).dialog(<span style="color: maroon;">"close"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span>
AddUpdateMode() {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#PopupContent"</span>).dialog(<span style="color: maroon;">"open"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span>
LoadPage() {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $.ajax({<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                type: <span style="color: maroon;">"POST"</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                url: <span style="color: maroon;">"AJAXTABLE.aspx/GetRecords"</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                data: <span style="color: maroon;">"{}"</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                contentType: <span style="color: maroon;">"application/json; charset=utf-8"</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                dataType: <span style="color: maroon;">"json"</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                success: <span style="color: blue;">function</span> successcall(response) {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    $(<span style="color: maroon;">"#tblGrid"</span>).empty();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
                $(<span style="color: maroon;">"#tblGrid"</span>).prepend(<span style="color: maroon;">"<tr>"</span> + <span style="color: maroon;">"<th>"</span>
+ <span style="color: maroon;">""</span> + <span style="color: maroon;">"
</th>"</span> + <span style="color: maroon;">"<th>"</span>
+ <span style="color: maroon;">""</span> + <span style="color: maroon;">"
</th>"</span> + <span style="color: maroon;">"<th>"</span>
+ <span style="color: maroon;">""</span> + <span style="color: maroon;">"</th>"</span>
+ <span style="color: maroon;">"<th>"</span> + <span style="color: maroon;">""</span> + <span style="color: maroon;">"</th>"</span>
+ <span style="color: maroon;">"<th>"</span> + <span style="color: maroon;">"<iimg src='add.png' onclick=\"AddMode()
\"/>"</span> + <span style="color: maroon;">" </th>"</span>
+ <span style="color: maroon;">"</tr>"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    $(<span style="color: maroon;">"#tblGrid"</span>).append(<span style="color: maroon;">"<tr>"</span> + <span style="color: maroon;">"<th>"</span>
+ <span style="color: maroon;">"ID"</span> + <span style="color: maroon;">"
</th>"</span> + <span style="color: maroon;">"<th>"</span>
+ <span style="color: maroon;">"Name"</span> + <span style="color: maroon;">"
</th>"</span> + <span style="color: maroon;">"<th>"</span>
+ <span style="color: maroon;">"Age"</span> + <span style="color: maroon;">"</th>"</span>
+ <span style="color: maroon;">"<th>"</span> + <span style="color: maroon;">"Update"</span> + <span style="color: maroon;">"
</th>"</span> + <span style="color: maroon;">"<th>"</span>
+ <span style="color: maroon;">"Delete"</span> + <span style="color: maroon;">"</th>"</span> + <span style="color: maroon;">"</tr>"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;">for</span>
(<span style="color: blue;">var</span> i = 0; i < response.d.length; i++) {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        $(<span style="color: maroon;">"#tblGrid"</span>).append(<span style="color: maroon;">"<tr>"</span> + <span style="color: maroon;">"<td>"</span>
+ response.d[i].Id + <span style="color: maroon;">" </td>"</span>
+ <span style="color: maroon;">"<td>"</span> + response.d[i].Name
+ <span style="color: maroon;">" </td>"</span> + <span style="color: maroon;">"<td>"</span> + response.d[i].Age + <span style="color: maroon;">"</td>"</span> + <span style="color: maroon;">"<td>"</span>
+ <span style="color: maroon;">"<iimg src='update.png'
onclick=\"UpdateMode("</span> + response.d[i].Id + <span style="color: maroon;">",'"</span> + response.d[i].Name + <span style="color: maroon;">"',"</span> + response.d[i].Age + <span style="color: maroon;">")\" />"</span> + <span style="color: maroon;">"</td>"</span> + <span style="color: maroon;">"<td>"</span>
+ <span style="color: maroon;">"<iimg src='delete.png'
onclick=\"DeleteMode("</span> + response.d[i].Id + <span style="color: maroon;">",'"</span> + response.d[i].Name + <span style="color: maroon;">"',"</span> + response.d[i].Age + <span style="color: maroon;">")\" />"</span> + <span style="color: maroon;">"</td>"</span> + <span style="color: maroon;">"</tr>"</span>); <o:p></o:p></span><span style="color: darkgreen; font-family: Consolas; font-size: 9.5pt;">//replace iimg to img</span><br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: darkgreen; font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                },<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                error: <span style="color: blue;">function</span>
() {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    alert(<span style="color: maroon;">"Error"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">return</span>
<span style="color: blue;">false</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span>
DoOperation() {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">var</span>
hidvalue = $(<span style="color: maroon;">"#hdnMode"</span>).val();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">if</span>
(hidvalue == <span style="color: maroon;">"Add"</span>) {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span>
pID = <span style="color: maroon;">"0"</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span>
name = $(<span style="color: maroon;">'#txtName'</span>).val();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span>
age = $(<span style="color: maroon;">'#txtAge'</span>).val();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">else</span>
<span style="color: blue;">if</span> (hidvalue == <span style="color: maroon;">"Update"</span>)
{<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span>
name = $(<span style="color: maroon;">'#txtName'</span>).val();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span> age = $(<span style="color: maroon;">'#txtAge'</span>).val();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span>
pID = $(<span style="color: maroon;">'#hdnPkid'</span>).val();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">else</span>
<span style="color: blue;">if</span> (hidvalue == <span style="color: maroon;">"Delete"</span>)
{<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span>
name = <span style="color: maroon;">""</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span>
age = <span style="color: maroon;">""</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">var</span>
pID = $(<span style="color: maroon;">'#hdnPkid'</span>).val();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $.ajax({<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                type: <span style="color: maroon;">"POST"</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                url: <span style="color: maroon;">"AJAXTABLE.aspx/DoOperation"</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                data: <span style="color: maroon;">"{'Id':'"</span>
+ pID + <span style="color: maroon;">"','Name': '"</span> + name + <span style="color: maroon;">"','Age':'"</span> + age + <span style="color: maroon;">"','HidMode':'"</span> + hidvalue + <span style="color: maroon;">"' }"</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                contentType: <span style="color: maroon;">"application/json; charset=utf-8"</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                dataType: <span style="color: maroon;">"json"</span>,<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                success: <span style="color: blue;">function</span> (response) {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;">if</span>
(response.d == <span style="color: blue;">true</span>) {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        $(<span style="color: maroon;">'#hdnPkid'</span>).val(<span style="color: maroon;">""</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        DefaultMode();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        LoadPage();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;">else</span>
{<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        alert(<span style="color: maroon;">"Failure!!!"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            });<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">return</span>
<span style="color: blue;">false</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span>
AddMode() {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            AddUpdateMode();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#txtName'</span>).val(<span style="color: maroon;">""</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#txtAge'</span>).val(<span style="color: maroon;">""</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#hdnMode"</span>).val(<span style="color: maroon;">"Add"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span>
UpdateMode(Id, Name, Age) {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            AddUpdateMode();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#hdnMode"</span>).val(<span style="color: maroon;">"Update"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#txtName'</span>).val(Name);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#txtAge'</span>).val(Age);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#hdnPkid'</span>).val(Id);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">function</span>
DeleteMode(Id, Name, Age) {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">"#hdnMode"</span>).val(<span style="color: maroon;">"Delete"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            $(<span style="color: maroon;">'#hdnPkid'</span>).val(Id);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">if</span>
(confirm(<span style="color: maroon;">"Do you want to delete this
record"</span>)) {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                DoOperation();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">script</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">style</span>
<span style="color: red;">type</span><span style="color: blue;">="text/css"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: maroon;">#ParentContent</span>
<span style="color: maroon;">table</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">width</span>:
<span style="color: blue;">300px</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">border</span>:
<span style="color: blue;">1px</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: maroon;">#ParentContent</span>
<span style="color: maroon;">table</span> <span style="color: maroon;">td</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">width</span>:
<span style="color: blue;">60px</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">color</span>:
<span style="color: blue;">Red</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">text-align</span>:
<span style="color: blue;">center</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: maroon;">#ParentContent</span>
<span style="color: maroon;">table</span> <span style="color: maroon;">th</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">width</span>:
<span style="color: blue;">60px</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">color</span>:
<span style="color: blue;">Green</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">text-align</span>:
<span style="color: blue;">center</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">style</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">head</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"><</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">form</span>
<span style="color: red;">id</span><span style="color: blue;">="form1"</span>
<span style="color: red;">runat</span><span style="color: blue;">="server"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"><</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">div</span> <span style="color: red;">id</span><span style="color: blue;">="ParentContent"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"><</span><span style="color: maroon;">table</span> <span style="color: red;">id</span><span style="color: blue;">="tblGrid"</span> <span style="color: red;">border</span><span style="color: blue;">="1px"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"></</span><span style="color: maroon;">table</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"><</span><span style="color: maroon;">div</span> <span style="color: red;">id</span><span style="color: blue;">="PopupContent"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"><</span><span style="color: maroon;">table</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Label</span> <span style="color: red;">ID</span><span style="color: blue;">="lblName"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Name"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Label</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">td</span> <span style="color: red;">style</span><span style="color: blue;">="</span><span style="color: red;">width</span><span style="color: blue;">: 50%"></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TextBox</span> <span style="color: red;">ID</span><span style="color: blue;">="txtName"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TextBox</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"></</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Label</span> <span style="color: red;">ID</span><span style="color: blue;">="lblAge"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Age"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Label</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TextBox</span> <span style="color: red;">ID</span><span style="color: blue;">="txtAge"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"></</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">TextBox</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"></</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"><</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Button</span> <span style="color: red;">ID</span><span style="color: blue;">="btnSave"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Save"</span> <span style="color: blue;">/></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"><</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">asp</span><span style="color: blue;">:</span><span style="color: maroon;">Button</span> <span style="color: red;">ID</span><span style="color: blue;">="btnCancel"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Cancel"</span> <span style="color: blue;">/></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">input</span> <span style="color: red;">id</span><span style="color: blue;">="hdnMode"</span>
<span style="color: red;">type</span><span style="color: blue;">="hidden"</span>
<span style="color: red;">name</span><span style="color: blue;">="hdnMode"</span>
<span style="color: red;">runat</span><span style="color: blue;">="server"</span>
<span style="color: blue;">/></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                        <span style="color: blue;"><</span><span style="color: maroon;">input</span> <span style="color: red;">id</span><span style="color: blue;">="hdnPkid"</span>
<span style="color: red;">type</span><span style="color: blue;">="hidden"</span>
<span style="color: red;">name</span><span style="color: blue;">="hdnPkid"</span>
<span style="color: red;">runat</span><span style="color: blue;">="server"</span>
<span style="color: blue;">/></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;"></</span><span style="color: maroon;">td</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;"></</span><span style="color: maroon;">tr</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;"></</span><span style="color: maroon;">table</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">div</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;"></</span><span style="color: maroon;">form</span><span style="color: blue;">></span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">body</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;"></</span><span style="color: maroon; font-family: Consolas; font-size: 9.5pt;">html</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">><o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<u style="line-height: 14.4pt;"><span style="font-family: Verdana, sans-serif; font-size: 10pt;">Code
behind:</span></u></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<u style="line-height: 14.4pt;"><span style="font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></u></div>
<div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 1.0pt 1.0pt 1.0pt;">
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="color: blue; font-family: Consolas; font-size: 9.5pt;">namespace</span><span style="font-family: Consolas; font-size: 9.5pt;"> JqueryJohn_sample<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">{<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;">public</span> <span style="color: blue;">partial</span>
<span style="color: blue;">class</span> <span style="color: #2b91af;">AJAXTABLE</span>
: System.Web.UI.<span style="color: #2b91af;">Page</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
{<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">protected</span>
<span style="color: blue;">void</span> Page_Load(<span style="color: blue;">object</span>
sender, <span style="color: #2b91af;">EventArgs</span> e)<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<br /></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<br /></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        [System.Web.Services.<span style="color: #2b91af;">WebMethod</span>]<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">public</span> <span style="color: blue;">static</span> <span style="color: #2b91af;">clsTSample</span>[]
GetRecords()<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: #2b91af;">List</span><<span style="color: #2b91af;">clsTSample</span>> obj = <span style="color: blue;">new</span>
<span style="color: #2b91af;">List</span><<span style="color: #2b91af;">clsTSample</span>>();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: #2b91af;">DataTable</span>
dt = <span style="color: blue;">new</span> <span style="color: #2b91af;">DataTable</span>();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: #2b91af;">SqlConnection</span>
con = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlConnection</span>(<span style="color: #a31515;">"Data Source=---;Initial Catalog=dbname;User ID=---;Password=---;"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            con.Open();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: #2b91af;">SqlCommand</span>
cmd = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlCommand</span>(<span style="color: #a31515;">"select * from TSample"</span>, con);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: #2b91af;">SqlDataAdapter</span>
da = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlDataAdapter</span>(cmd);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            da.Fill(dt);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            con.Close();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: #2b91af;">clsTSample</span>
ClsObj = <span style="color: blue;">null</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">foreach</span>
(<span style="color: #2b91af;">DataRow</span> tblerow <span style="color: blue;">in</span>
dt.Rows)<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                ClsObj = <span style="color: blue;">new</span> <span style="color: #2b91af;">clsTSample</span>();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                ClsObj.Id = <span style="color: #2b91af;">Convert</span>.ToInt32(tblerow[<span style="color: #a31515;">"Id"</span>]);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                ClsObj.Name = tblerow[<span style="color: #a31515;">"Name"</span>].ToString();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                ClsObj.Age = <span style="color: #2b91af;">Convert</span>.ToInt32(tblerow[<span style="color: #a31515;">"Age"</span>]);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                obj.Add(ClsObj);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">return</span>
obj.ToArray();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<br /></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">       
[System.Web.Services.<span style="color: #2b91af;">WebMethod</span>]<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">public</span> <span style="color: blue;">static</span> <span style="color: blue;">bool</span>
DoOperation(<span style="color: blue;">string</span> Id, <span style="color: blue;">string</span>
Name, <span style="color: blue;">string</span> Age, <span style="color: blue;">string</span>
HidMode)<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">try</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: #2b91af;">SqlConnection</span>
con = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlConnection</span>(<span style="color: #a31515;">"Data Source=----;Initial Catalog=dbname;User ID=--;Password=---;"</span>);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                con.Open();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">if</span>
(HidMode == <span style="color: #a31515;">"Add"</span>)<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: #2b91af;">SqlCommand</span>
cmd = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlCommand</span>(<span style="color: #a31515;">"insert into TSample (Name, Age) values('"</span>
+ Name + <span style="color: #a31515;">"','"</span> + Age + <span style="color: #a31515;">"')"</span>, con);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    cmd.ExecuteNonQuery();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">else</span>
<span style="color: blue;">if</span> (HidMode == <span style="color: #a31515;">"Update"</span>)<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;">int</span>
SId = <span style="color: #2b91af;">Convert</span>.ToInt32(Id);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: #2b91af;">SqlCommand</span>
cmd = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlCommand</span>(<span style="color: #a31515;">"update TSample set Name='"</span> + Name + <span style="color: #a31515;">"', Age='"</span> + Age + <span style="color: #a31515;">"' where id='"</span> + SId + <span style="color: #a31515;">"'"</span>, con);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    cmd.ExecuteNonQuery();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">else</span>
<span style="color: blue;">if</span> (HidMode == <span style="color: #a31515;">"Delete"</span>)<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: blue;">int</span>
SId = <span style="color: #2b91af;">Convert</span>.ToInt32(Id);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    <span style="color: #2b91af;">SqlCommand</span>
cmd = <span style="color: blue;">new</span> <span style="color: #2b91af;">SqlCommand</span>(<span style="color: #a31515;">"delete from TSample where id='"</span> + SId +
<span style="color: #a31515;">"'"</span>, con);<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                    cmd.ExecuteNonQuery();<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span>
<span style="color: blue;">true</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: blue;">catch</span>
(<span style="color: #2b91af;">Exception</span> ex)<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            {<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">                <span style="color: blue;">return</span> <span style="color: blue;">false</span>;<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">            }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<br /></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<br /></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
}<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
<span style="color: blue;">public</span> <span style="color: blue;">class</span>
<span style="color: #2b91af;">clsTSample</span><o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
{<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">public</span> <span style="color: blue;">int</span> Id { <span style="color: blue;">get</span>; <span style="color: blue;">set</span>; }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<br /></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">public</span> <span style="color: blue;">string</span> Name { <span style="color: blue;">get</span>; <span style="color: blue;">set</span>; }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<br /></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">        <span style="color: blue;">public</span> <span style="color: blue;">int</span> Age { <span style="color: blue;">get</span>; <span style="color: blue;">set</span>; }<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<br /></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">   
}<o:p></o:p></span></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<br /></div>
<div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;">
<span style="font-family: Consolas; font-size: 9.5pt;">}<o:p></o:p></span></div>
</div>
<div class="MsoNormal" style="line-height: 14.4pt;">
<br /></div>
<div class="MsoNormal" style="line-height: 14.4pt;">
<span style="font-family: Verdana, sans-serif; font-size: 10pt;">The above
code tested successfully and it works fine.<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: 14.4pt;">
<span style="font-family: Verdana, sans-serif; font-size: 10pt;"><br /></span></div>
<br />
<div class="MsoNormal" style="line-height: 14.4pt;">
<u><span style="color: #595959; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: #595959; mso-style-textfill-fill-colortransforms: "lumm=65000 lumo=35000"; mso-style-textfill-fill-themecolor: text1; mso-themecolor: text1; mso-themetint: 166;">Create gridview dynamically using jquery,  Add, edit and delete data on gridview using
jquery, create simple gridview using jquery, bind data to table or gridview using
jquery,  perform operation on gridview
without postback using jquery. </span></u><u><span style="color: #595959; font-family: Consolas; font-size: 9.5pt; mso-style-textfill-fill-alpha: 100.0%; mso-style-textfill-fill-color: #595959; mso-style-textfill-fill-colortransforms: "lumm=65000 lumo=35000"; mso-style-textfill-fill-themecolor: text1; mso-themecolor: text1; mso-themetint: 166;"><o:p></o:p></span></u></div>
</div>
</div>

How to create simple Gridview using JQuery and Ajax?

Description: Welcome to Jqueryjohn.com . In this article, I will explain how to create simple JQuery Gridview using Ajax. On...