C# Guide - C#, Asp.Net, MVC, LINQ, jQuery and SharePoint Resources

Showing posts with label jQuery Load. Show all posts

Tuesday, October 30, 2012

jQuery Load Specific HTML Element from Response Example

The jQuery Load() ajax method supports HTML and Text type responses sent by the server.
The Load method can selectively load only a specific element from the the HTML response by passing the ID of the element to be loaded in the Query string of the request URL.

In this post we shall see on how to load only a specific element from the HTML data returned from the server using the jQuery Load() method.

The syntax for receiving and displaying a specific element from the HTML response is as follows.

$("#<Target HTML element ID>").load("<Server URL #Element ID>");

The following example receives a HTML format data from the server and displays only the element with the ID tbl2 from the response data in a DIV tag in the browser.

.aspx Page (Client Side)

<title>jQuery Ajax Load</title>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// Get Partial HTML Response data from the Server

$('#btnGetPartialHTML').click(function(event) {

event.preventDefault();

$("#divPartialHTML").load("AjaxData.html #tbl2");

});

</script>

</head>

<body>

<tr>

<td><b>Action</b></td>

<td><b>Response</b></td>

</tr>

<td>

<asp:Button

ID="btnGetPartialHTML"

runat="server"

Text="Partical HTML" />

</td>

</td>

</tr>

</table>

</form>

</body>

</html>

.AjaxData.html (Server Side)

<table border="1" id="tbl1">

<tr>

<td><b>Address</b></td>

</tr>

<tr>

<td>125. E.Spring Creeks, OH</td>

</tr>

<tr>

<td>Harry</td>

<td>121 Highway, Plano TX</td>

</tr>

</table>

<tr>

<td><b>Address</b></td>

</tr>

<tr>

<td>125. E.Spring Creeks, OH</td>

</tr>

<tr>

<td>Steve</td>

<td>121 Highway, Plano TX</td>

</tr>

</table>

jQuery Load Partial HTML Response Example

The jQuery Load() ajax method supports HTML and Text type responses sent by the server.

The Load method can selectively load only part of the HTML response by passing the ID of the element to element to be loaded in the Query string of the request URL.

In this post we shall see on how to process only a part of the HTML data returned from the server using the jQuery Load() method.

The syntax for receiving and processing HTML response is as follows.

$("#<Target HTML element ID>").load("<Server URL #Element ID>");

The following example receives a HTML format data from the server and displays only the element with the ID tbl2 from the response data in a DIV tag in the browser.

.aspx Page (Client Side)

<title>jQuery Ajax Load</title>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// Get Partial HTML Response data from the Server

$('#btnGetPartialHTML').click(function(event) {

event.preventDefault();

$("#divPartialHTML").load("AjaxData.html #tbl2");

});

</script>

</head>

<body>

<tr>

<td><b>Action</b></td>

<td><b>Response</b></td>

</tr>

<td>

<asp:Button

ID="btnGetPartialHTML"

runat="server"

Text="Partical HTML" />

</td>

</td>

</tr>

</table>

</form>

</body>

</html>

.AjaxData.html (Server Side)

<tr>

<td><b>Address</b></td>

</tr>

<tr>

<td>125. E.Spring Creeks, OH</td>

</tr>

<tr>

<td>Harry</td>

<td>121 Highway, Plano TX</td>

</tr>

</table>

<tr>

<td><b>Address</b></td>

</tr>

<tr>

<td>125. E.Spring Creeks, OH</td>

</tr>

<tr>

<td>Steve</td>

<td>121 Highway, Plano TX</td>

</tr>

Thursday, October 25, 2012

jQuery Load POST Request Example

The jQuery Load() ajax method supports both HHTP GET & HTTP POST requests. In this post we shall see on how to send a HTTP POST request to the server.

The syntax for sending a HTTP POST request using the Load() method is as follows.

$("#<Target HTML element ID>").load("<Server URL >", <POST Data>);

The following example sends a HTTP POST request to the server using the Load() method and displays the data returned by the server in a DIV tag in the browser.

.aspx Page (Client Side)

<title>jQuery Ajax Load</title>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// Send HTTP Post Request

$('#btnHttpPOSTRequest').click(function(event) {

event.preventDefault();

$("#divPOSTRequest").load("AjaxData.aspx",{ ID: "2" });

});

</script>

</head>

<body>

<tr>

<td><b>Action</b></td>

<td><b>Response</b></td>

</tr>

<tr>

<td>

<asp:Button

ID="btnHttpPOSTRequest"

runat="server"

Text="HTTP POST Request" />

</td>

<td>

</td>

</tr>

</table>

</form>

</body>

</html>

AjaxData.aspx.cs (Server Side)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Xml.Linq;

namespace jQuery

{

public partial class AjaxData : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if ((Request.Form != null)&&(Request.Form.Count > 0))

{

// Process HTTP POST Request

string strFilterID = Request.Form["ID"].ToString();

List<clsContacts> lstContacts = getContactByID(strFilterID);

Response.Write(buildHTML(lstContacts));

}

else

{

if (Request.QueryString["ID"] != null)

{

// Process HTTP GET Request

string strFilterID = Request.QueryString["ID"].ToString();

List<clsContacts> lstContacts = getContactByID(strFilterID);

Response.Write(buildHTML(lstContacts));

}

private List<clsContacts> getContactByID(string filterKey)

{

List<clsContacts> lstContacts = new List<clsContacts>();

lstContacts.Add(new clsContacts("1", "John", "34"));

lstContacts.Add(new clsContacts("2", "David", "24"));

var filteredContacts = from c in lstContacts

where c.ID.Equals(filterKey)

select c;

return filteredContacts.ToList();

}

private string buildHTML(List<clsContacts> lstContacts)

{

string strHTML = ""

;

strHTML += "
Name
Age
";

XElement contactsXML = new XElement("Contacts");

foreach (clsContacts objContact in lstContacts)

{

strHTML += "
"
+ objContact.Name + "

" + objContact.Age + "";

}

return strHTML;

}

public class clsContacts

{

public string _id;

public string _name;

public string _age;

public clsContacts(string strID, string strname, string strAge)

{

this._id = strID;

this._name = strname;

this._age = strAge;

}

public string ID

{

get { return _id; }

set { _id = value; }

}

public string Name

{

get { return _name; }

set { _name = value; }

}

public string Age

{

get { return _age; }

set { _age = value; }

}