How to read and get JSON data 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 </span><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">how to read and get JSON data </span><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 class="MsoHyperlink"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;"> </span></span><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">and AJAX</span><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="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">JSON is nothing but text format that is easy to read and write. It’s like XML, fast and easy to parse.<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;">JSON is lightweight text interchange format, smaller than XML.<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;">When the document is ready, use AJAX request to read and Get the JSON values.<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: 10pt; line-height: 13.5pt;">Specify type as ‘</span><b style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">POST</b><span style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">’ and datatype as ‘</span><b style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">json</b><span style="font-family: Verdana, sans-serif; font-size: 10pt; line-height: 13.5pt;">’.</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;">Success parameter takes JSON data. <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;">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;">var</span> jsonval = eval(<span style="color: maroon;">'('</span> + response.d + <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;">for</span> (<span style="color: blue;">var</span> i = 0; i < jsonval.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: blue;">var</span> city = jsonval[i].City_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;">            }<o:p></o: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="font-family: Verdana, sans-serif; font-size: 13px;">In the below example, I am converting dataset values into JSON.</span><br /> <b><u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;"><br /></span></u></b> <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 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;"><</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://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.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: maroon;">'#btnReadGetJson'</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;">                $.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;">"ReadXml.aspx/GetJsonData"</span>,<o:p></o: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: maroon;">"#divArea"</span>).html(<span style="color: maroon;">"<b><u>Cities retreived from the database are</u></b><br />"</span>);<o:p></o:p></span></div> <div 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> city = <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> jsonval = eval(<span style="color: maroon;">'('</span> + response.d + <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> citylength = jsonval.length;<o:p></o:p></span></div> <div 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> (citylength > 0) {<o:p></o:p></span></div> <div 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 < citylength; 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: blue;">var</span> city = jsonval[i].City_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;">"#divArea"</span>).append(<span style="color: maroon;">'<li>'</span> + city + <span style="color: maroon;">'<li>'</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                            }<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        }<o:p></o: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;">"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;">                <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="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: red;">id</span><span style="color: blue;">="divArea"></span><o:p></o:p></span></div> <div 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;">="btnReadGetJson"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Read & Get JSON Data"</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;">br</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;"> <u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Code behind:<o:p></o:p></span></u></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;"> [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;">string</span> GetJsonData()<o:p></o: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=192.169.1.151;Initial Catalog=Example;User ID=sa;Password=welcome3#;"</span>);<o:p></o: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 City_Name from City"</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;">       <span style="color: #2b91af;">DataTable</span> ds = <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;">       da.Fill(ds);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">       <span style="color: blue;">string</span> obj = GetJson(ds);<o:p></o:p></span></div> <div 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;<o:p></o: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="color: blue; font-family: Consolas; font-size: 9.5pt;">public</span><span style="font-family: Consolas; font-size: 9.5pt;"> <span style="color: blue;">static</span> <span style="color: blue;">string</span> GetJson(<span style="color: #2b91af;">DataTable</span> 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;">{<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="font-family: Consolas; font-size: 9.5pt;">System.Web.Script.Serialization.<span style="color: #2b91af;">JavaScriptSerializer</span> serializer = <span style="color: blue;">new</span> System.Web.Script.Serialization.<span style="color: #2b91af;">JavaScriptSerializer</span>();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt;">List</span><span style="font-family: Consolas; font-size: 9.5pt;"><<span style="color: #2b91af;">Dictionary</span><<span style="color: blue;">string</span>, <span style="color: blue;">object</span>>> rows = <span style="color: blue;">new</span> <span style="color: #2b91af;">List</span><<span style="color: #2b91af;">Dictionary</span><<span style="color: blue;">string</span>, <span style="color: blue;">object</span>>>();<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="color: #2b91af; font-family: Consolas; font-size: 9.5pt;">Dictionary</span><span style="font-family: Consolas; font-size: 9.5pt;"><<span style="color: blue;">string</span>, <span style="color: blue;">object</span>> row = <span style="color: blue;">null</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">foreach</span><span style="font-family: Consolas; font-size: 9.5pt;"> (<span style="color: #2b91af;">DataRow</span> dr <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; text-indent: 0.5in;"> <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;">                row = <span style="color: blue;">new</span> <span style="color: #2b91af;">Dictionary</span><<span style="color: blue;">string</span>, <span style="color: blue;">object</span>>();<o:p></o:p></span></div> <div 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;">DataColumn</span> col <span style="color: blue;">in</span> dt.Columns)<o:p></o: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;">                    row.Add(col.ColumnName.Trim(), dr[col]);<o:p></o: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;">                rows.Add(row);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in; text-indent: 0.5in;"> <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; text-indent: 0.5in;"> <span style="color: blue; font-family: Consolas; font-size: 9.5pt;">return</span><span style="font-family: Consolas; font-size: 9.5pt;"> serializer.Serialize(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> <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;">The above program reads the JSON data and updates with the page without postback via JQuery AJAX.<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: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold; mso-themecolor: text1; mso-themetint: 191;">Read Json data using jquery, jquery to read Json data, how to read and parse Json data, load Json data using Jquery Ajax, retrieve data from Json using jquery<o:p></o:p></span></u></div> </div>

How to read and get JSON data using Jquery?

Description: Welcome to Jqueryjohn.com . In this article, I will explain how to read and get JSON data using Jquery and AJAX .   ...

Read more »

How to read and get XML file 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>.</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="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 </span><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">how to read and get XML data </span><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 class="MsoHyperlink"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;"> </span></span><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">and AJAX</span><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;">Make sure the Xml file which we are going to read it’s free of errors.<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;">When the document is ready, use AJAX request to read and Get the values of the Xml data.<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;">$.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;">"GET"</span>,<o:p></o: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;">"JQueryJohn.xml"</span>,<o:p></o: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;">"xml"</span>,<o:p></o: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;">          },<o:p></o: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;">"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> <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;">Specify type as ‘<b>GET</b>’ and datatype as ‘<b>xml</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;">Success parameter takes the data from the xml file. <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;">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;">         $(response).find(<span style="color: maroon;">'Tutorials'</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> lesson = $(<span style="color: blue;">this</span>).find(<span style="color: maroon;">'Lesson'</span>).text();<o:p></o:p></span></div> <div 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> author = $(<span style="color: blue;">this</span>).find(<span style="color: maroon;">'Author'</span>).text();<o:p></o: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> <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;">Use <b>find()</b> method, read each node and get the values.<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; mso-bidi-font-family: Calibri;">Example program:<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;"> <u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">JQueryJohn.xml:<o:p></o:p></span></u></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;"><?</span><span style="color: #a31515; font-family: Consolas; font-size: 9.5pt;">xml</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;"> </span><span style="color: red; font-family: Consolas; font-size: 9.5pt;">version</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">=</span><span style="font-family: Consolas; font-size: 9.5pt;">"<span style="color: blue;">1.0</span>"<span style="color: blue;"> </span><span style="color: red;">encoding</span><span style="color: blue;">=</span>"<span style="color: blue;">utf-8</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: #a31515; font-family: Consolas; font-size: 9.5pt;">JQueryJohn.com</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Lesson</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">Introduction and Fundamentals of JQuery<span style="color: blue;"></</span><span style="color: #a31515;">Lesson</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Author</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">JQueryJohn<span style="color: blue;"></</span><span style="color: #a31515;">Author</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Lesson</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">Selectors and Attributes in JQuery<span style="color: blue;"></</span><span style="color: #a31515;">Lesson</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Author</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">JQueryJohn<span style="color: blue;"></</span><span style="color: #a31515;">Author</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Lesson</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">Animation and Effects in JQuery<span style="color: blue;"></</span><span style="color: #a31515;">Lesson</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Author</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">JQueryJohn<span style="color: blue;"></</span><span style="color: #a31515;">Author</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Lesson</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">Events and Methods in JQuery<span style="color: blue;"></</span><span style="color: #a31515;">Lesson</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Author</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">JQueryJohn<span style="color: blue;"></</span><span style="color: #a31515;">Author</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Lesson</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">AJAX with JQuery<span style="color: blue;"></</span><span style="color: #a31515;">Lesson</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Author</span><span style="color: blue; font-family: Consolas; font-size: 9.5pt;">></span><span style="font-family: Consolas; font-size: 9.5pt;">JQueryJohn<span style="color: blue;"></</span><span style="color: #a31515;">Author</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: #a31515; font-family: Consolas; font-size: 9.5pt;">Tutorials</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: #a31515; font-family: Consolas; font-size: 9.5pt;">JQueryJohn.com</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 class="MsoNormal" style="margin-bottom: 0.0001pt;"> <u><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Consolas;">ReadXMLData.aspx<o:p></o:p></span></u></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;"><</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://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.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: maroon;">'#btnReadGetXmlFile'</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;">                $.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;">"GET"</span>,<o:p></o: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;">"JQueryJohn.xml"</span>,<o:p></o: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;">"xml"</span>,<o:p></o: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: maroon;">"#divArea"</span>).html(<span style="color: maroon;">"<b><u>Jqueryjohn.com contains the following lessons with code snippets</u></b><br />"</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        $(response).find(<span style="color: maroon;">'Tutorials'</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> lesson = $(<span style="color: blue;">this</span>).find(<span style="color: maroon;">'Lesson'</span>).text();<o:p></o:p></span></div> <div 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> author = $(<span style="color: blue;">this</span>).find(<span style="color: maroon;">'Author'</span>).text();<o:p></o:p></span></div> <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;">"#divArea"</span>).append(<span style="color: maroon;">'<li>'</span> + lesson + <span style="color: maroon;">" , Author: "</span> + author + <span style="color: maroon;">'<li>'</span>);<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                        });<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">                    },<o:p></o: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;">"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;">                <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="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: red;">id</span><span style="color: blue;">="divArea"></span><o:p></o:p></span></div> <div 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;">="btnReadGetXmlFile"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Read & Get XML File"</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;">br</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;"> <span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">The above program reads the xml file and updates with the page without postback via JQuery AJAX.<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: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold; mso-themecolor: text1; mso-themetint: 191;">Read xml file using jquery, jquery to read xml file, how to read and parse xml data, load xml file using Jquery Ajax, retrieve data from xml file using jquery<o:p></o:p></span></u></div> </div>

How to read and get XML file using Jquery?

Description: Welcome to Jqueryjohn.com . In this article, I will explain how to read and get XML data using Jquery and AJAX .   ...

Read more »

How to create simple jquery Popup box 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>.</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="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 </span><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">how to create simple popup box without any plugin </span><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 class="MsoHyperlink"><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;"> </span></span><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">and CSS</span><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;">In the previous article, I have used </span><a href="http://www.jqueryjohn.com/2014/01/how-to-open-popup-window-using-jquery.html"><b><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri;">window.open()</span></b></a><span style="font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;"> and </span><a href="http://www.jqueryjohn.com/2014/01/how-to-open-popup-window-using-jquery.html"><b><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">window.ShowModalDialog()</span></b></a><b><span style="background-position: initial initial; background-repeat: initial initial; color: #333333; font-family: Verdana, sans-serif; font-size: 10pt;"> </span></b><span style="background-position: initial initial; background-repeat: initial initial; color: #333333; font-family: Verdana, sans-serif; font-size: 10pt;">method for creating </span><a href="http://www.jqueryjohn.com/2014/01/how-to-open-popup-window-using-jquery.html"><span style="background-position: initial initial; background-repeat: initial initial; font-family: Verdana, sans-serif; font-size: 10pt;">popup window</span></a><span style="background-position: initial initial; background-repeat: initial initial; color: #333333; font-family: Verdana, sans-serif; font-size: 10pt;">. </span><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;">There are lot of Popup plugins are available. I don’t think that a jquery plugin is required for this. We can easily achieve with simple javascript code and css.<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;">We can simply create popup box using <b>fadeIn ()</b> and <b>fadeOut ()</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="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 open popup window at the center of the screen, use the following CSS property.<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: red; font-family: Consolas; font-size: 9.5pt;">left</span><span style="font-family: Consolas; font-size: 9.5pt;">: <span style="color: blue;">35%</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: red; font-family: Consolas; font-size: 9.5pt;">top</span><span style="font-family: Consolas; font-size: 9.5pt;">: <span style="color: blue;">35%</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="color: red; font-family: Consolas; font-size: 9.5pt;">position</span><span style="font-family: Consolas; font-size: 9.5pt;">: <span style="color: blue;">fixed</span>;<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; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold;">Adjust the <b>top</b> and <b>left</b> property based on your popup div width to make it center of the screen.<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; mso-bidi-font-family: Calibri;">Example program:<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="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://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.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;">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;">#PopupPage</span><o:p></o: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;">border</span>: <span style="color: blue;">3px</span> <span style="color: blue;">solid</span> <span style="color: blue;">#ccc</span>;<o:p></o:p></span></div> <div class="MsoNormal" style="border: none; margin-bottom: 0.0001pt; padding: 0in;"> <span style="font-family: Consolas; font-size: 9.5pt;">            <span style="color: red;">left</span>: <span style="color: blue;">35%</span>;<o:p></o:p></span></div> <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;">top</span>: <span style="color: blue;">35%</span>;<o:p></o:p></span></div> <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;">position</span>: <span style="color: blue;">fixed</span>;<o:p></o:p></span></div> <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;">235px</span>;<o:p></o: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="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: maroon;">'#PopupPage'</span>).fadeOut();<o:p></o:p></span></div> <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;">'#btnPopup'</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;">'#ParentPage'</span>).fadeOut(1000);<o:p></o:p></span></div> <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;">'#PopupPage'</span>).fadeIn(1000);<o:p></o:p></span></div> <div 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;">                $(<span style="color: maroon;">'#PopupPage'</span>).fadeOut(1000);<o:p></o:p></span></div> <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;">'#ParentPage'</span>).fadeIn(1000);<o:p></o:p></span></div> <div 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;">'#btnLogin'</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;">                alert(<span style="color: maroon;">"Welcome"</span>);<o:p></o:p></span></div> <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;">'#ParentPage'</span>).fadeOut(1000);<o:p></o:p></span></div> <div 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="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: red;">id</span><span style="color: blue;">="ParentPage"></span><o:p></o:p></span></div> <div 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;">="btnPopup"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Open Popup"</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;">="PopupPage"</span> <span style="color: red;">style</span><span style="color: blue;">="</span><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;">        <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;">="lblUserName"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="UserName"></</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;">="txtUserName"</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;">="lblPassword"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Password"></</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;">="txtPassword"</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;">="btnLogin"</span> <span style="color: red;">runat</span><span style="color: blue;">="server"</span> <span style="color: red;">Text</span><span style="color: blue;">="Login"</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;">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;">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> <br /> <div style="background: white; line-height: 13.5pt; margin-bottom: .0001pt; margin: 0in;"> <u><span style="color: #404040; font-family: "Verdana","sans-serif"; font-size: 10.0pt; mso-bidi-font-family: Calibri; mso-bidi-font-weight: bold; mso-themecolor: text1; mso-themetint: 191;">Creating jquery popup div, </span></u><u><span style="background-position: initial initial; background-repeat: initial initial; color: #666666; font-family: Verdana, sans-serif; font-size: 10pt;">open popup window using Jquery, Using Jquery to open a Popup window, Popup div using Jquery, Open Jquery Popup window<o:p></o:p></span></u></div> </div>

How to create simple jquery Popup box using Jquery?

Description: Welcome to Jqueryjohn.com . In this article, I will explain how to create simple popup box without any plugin using J...

Read more »