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...

Read more »

How to dynamically shortened long content with “Show More” link using JQuery?

<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 add Show More link to shorten long content</span><b><span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt;"> </span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">using </span><a href="http://www.jqueryjohn.com/"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Jquery</span></a><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">.  <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;">If you have a long text and you need to show only a certain number of texts by default.<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 this scenario, add one link with the text content. If you want to expand the complete content, click on the “Show More” link. You can shorten the long content using “Show Less” link.<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;">To Shorten and expand content, there are lot of plugins are available. I don’t think that a jquery plugin is required for this. We can easily achieve with simple javascript code.<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 the below example program, I have limited the default text by 120 characters and the rest of the characters will hide by default. <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;"> <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; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">If you click on the <b>Show More</b> link, it will expand the content and if you want to shorten the content click <b>Show Less </b>link.<o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 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/rosaj/1/edit?html,output" target="_blank">click here</a>.<o:p></o:p></span></div> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <br /></div> <br /> <div style="background-position: initial initial; background-repeat: initial initial; line-height: 13.5pt; margin: 0in 0in 0.0001pt;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">Example program:<o:p></o:p></span></u></b></div> </div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></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;">type</span><span style="color: blue;">="text/javascript"</span> <span style="color: red;">src</span><span style="color: blue;">="http://code.jquery.com/jquery-latest.min.js"></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;">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> defaultChar = 120;<o:p></o: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> joinText = <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;">'.expand'</span>).each(<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> textcontent = $(<span style="color: blue;">this</span>).html();<o:p></o: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> (textcontent.length > defaultChar) {<o:p></o: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> defaultContent = textcontent.substr(0, defaultChar);<o:p></o: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> hiddenContent = textcontent.substr(defaultChar, textcontent.length - defaultChar);<o:p></o: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> bindContent = defaultContent + <span style="color: maroon;">'<span>'</span> + joinText + <span style="color: maroon;">'&nbsp;</span><span class="expandcontent"><span>'</span> + hiddenContent + <span style="color: maroon;">'</span>&nbsp;&nbsp;<a href="" class="expandlink">'</span> + <span style="color: maroon;">"Show More"</span> + <span style="color: maroon;">'</a></span>'</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;">this</span>).html(bindContent);<o:p></o: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: maroon;">".expandlink"</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;">                <span style="color: blue;">if</span> ($(<span style="color: blue;">this</span>).hasClass(<span style="color: maroon;">"less"</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;">this</span>).removeClass(<span style="color: maroon;">"less"</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;">this</span>).html(<span style="color: maroon;">"Show More"</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: blue;">this</span>).addClass(<span style="color: maroon;">"less"</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;">this</span>).html(<span style="color: maroon;">"Show Less"</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;">this</span>).parent().prev().toggle();<o:p></o: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;">this</span>).prev().toggle();<o:p></o: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;">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;">.expandcontent</span> <span style="color: maroon;">span</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;">none</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;">.expand</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;">400px</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;">background-color</span>: <span style="color: blue;">#f0f0f0</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;">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;">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;">class</span><span style="color: blue;">="expand"></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;">            Welcome to Jqueryjohn.com. This is Technical blog related to Scripting Languages.<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            Jqueryjohn.com offers jquery related articles with code snippets. Jqueryjohn.com<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            also has jquery tutorials with examples. It is easy to learn for beginners.<o:p></o: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;">class</span><span style="color: blue;">="expand"></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;">            Welcome to Jqueryjohn.com. This is Technical blog related to Scripting Languages.<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            Jqueryjohn.com offers jquery related articles with code snippets. Jqueryjohn.com<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            also has jquery tutorials with examples. It is easy to learn for beginners.<o:p></o: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 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;"> <br /></div> <br /> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <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;">Shortened Text With Show More Link Using JQuery, JQuery Add More or Less link to Text, Dynamically Shortened text with “Show More” link, Shorten long content using JQuery<o:p></o:p></span></u></div> </div>

How to dynamically shortened long content with “Show More” link using JQuery?

Description: Welcome to Jqueryjohn.com . In this article, I will explain how to add Show More link to shorten long content using ...

Read more »

How to do type conversion in jQuery?

<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 perform typecasting</span><b><span style="font-family: "Calibri","sans-serif"; font-size: 11.0pt;"> </span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">using </span><a href="http://www.jqueryjohn.com/"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Jquery</span></a><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">.  <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;">In JQuery, the following type conversions are possible.<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;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">1. <u>Integer to String:<o:p></o:p></u></span></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;">Integer values can be converted to string by using <b>toString()</b> method.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> a = 10;<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;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> b = a.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;">alert(b);<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;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">The code returns string value “10”.<o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <br /></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">2. <u>String to Integer:</u></span></b><b><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">To convert a value from string to Integer, use <b>parseInt()</b> method.<o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> a = <span style="color: maroon;">"10.525"</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;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> b = parseInt(a);<o:p></o: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(b);<o:p></o:p></span></div> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <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;">The code returns the integer value 10.<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="margin-bottom: 0.0001pt;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">3. <u>String to Float:</u></span></b><b><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">To convert a value from string to Float, use <b>parseFloat()</b> method.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> a = <span style="color: maroon;">"10.5251"</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;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> b = parseFloat(a).toFixed(2);<o:p></o: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(b);<o:p></o:p></span></div> </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;">The above code returns the Float value 10.53. <b>toFixed() </b>method used to reduce the number of decimal values.<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="margin-bottom: 0.0001pt;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">4. <u>Float to Integer:</u></span></b><b><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></b></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">The below code explains how to convert float values to Integer by using <b>parseInt()</b> method.<o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> a = 10.525;<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;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> b = parseInt(a);<o:p></o: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(b);<o:p></o:p></span></div> </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;">The code returns the Integer value 10.<br /> <!--[if !supportLineBreakNewLine]--><br /> <!--[endif]--><o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">5. <u>Float to String:</u></span></b><b><span style="font-family: Consolas; font-size: 9.5pt;"><o:p></o:p></span></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;">The below code explains how to convert Float values to String by using <b>toString()</b> method.<o:p></o:p></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> a = 10.525;<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;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> b = a.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;">alert(b);<o:p></o:p></span></div> </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;">The code returns the String value “10.525”<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;"> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">6. Casting to Boolean:<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;"> <b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">Boolean() </span></b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt;">method returns true when a value with at least one character, other than zero, or an object.<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;">Boolean() method returns false when a value is an empty string, number zero, undefined or null.<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> a = <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="color: blue; font-family: Consolas; font-size: 9.5pt;">var</span><span style="font-family: Consolas; font-size: 9.5pt;"> Isvalid = Boolean(a);<o:p></o: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(Isvalid);<o:p></o:p></span></div> </div> <div class="MsoNormal" style="margin-bottom: 0.0001pt;"> <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;">The above code returns false. <o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <br /> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <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;">type conversion in jquery, typecasting in jquery, data type conversion in javascript, jquery type conversion<o:p></o:p></span></u></div> </div>

How to do type conversion in jQuery?

Description: Welcome to Jqueryjohn.com . In this article, I will explain how to perform typecasting using Jquery .   In JQuer...

Read more »

What is chaining in JQuery?

<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;"> </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 am going to explain how to use chaining in JQuery.<o:p></o:p></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; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;"><br /></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">Chaining is one of the most powerful features of jQuery.</span><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;"><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="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">Chaining allows you to run multiple JQuery methods one after other, within a single statement.<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="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">We can perform several operations in one line of code.<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;"> <b><u><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">Syntax:</span></u></b><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;"> $(selector).fn1().fn2().fn3();<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="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">It will chain from left to right.<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="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">Benefit of using chaining in JQuery is that the browser doesn’t need to find the element again and again. It finds the elements only once.  <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="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">Chaining gives better performance and makes our code short and easy to manage.<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="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">The below code which doesn’t using chaining feature of JQuery.<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;"> <u><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">Code 1:</span></u><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;"> (Without Chaining)<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <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;">'#btnClick'</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;">                $(<span style="color: maroon;">'p'</span>).css(<span style="color: maroon;">'color'</span>, <span style="color: maroon;">'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: maroon;">'p'</span>).slideUp(3000);<o:p></o: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;">'p'</span>).slideDown(3000);<o:p></o: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> <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="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">Now, I am using the chaining feature by simply append the methods to the previous methods.<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;"> <u><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">Code 2:</span></u><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;"> (With Chaining)<o:p></o:p></span></div> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <br /></div> <div style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-element: para-border-div; padding: 1.0pt 4.0pt 1.0pt 4.0pt;"> <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;">'#btnClick'</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;">                $(<span style="color: maroon;">'p'</span>).css(<span style="color: maroon;">'color'</span>, <span style="color: maroon;">'blue'</span>).slideUp(3000).slideDown(3000);<o:p></o: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> <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="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">Code 2 is shorter and faster than code 1.<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="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;"><o:p> </o:p></span><u style="line-height: 13.5pt;"><span style="background-position: initial initial; background-repeat: initial initial; color: #595959; font-family: Verdana, sans-serif; font-size: 10pt;">Chaining in jquery, method chaining, what is chaining in jquery, jquery method chaining, jquery chaining examples</span></u></div> </div>

What is chaining in JQuery?

Description: Welcome to Jqueryjohn.com . In this article, i am going to explain how to use chaining in JQuery. Chaini...

Read more »