jQuery AJAX Load Sample


Introduction

Many of us need use tabs to load multi view information to the user.

Using server side tabs which reload all the page to show a specific piece of information is not a desirable technique all the time.

jQuery has a very nice way to do so, which is the topic of that post.

Using the code

In this sample I’m using the jQuery AJAX load function to get specific information from the server, based on query string using client side scripts.

First, let’s build the default.aspx page like the following:

<%@ Page Language="C#"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>JQuery AJAX Load Sample</title>
    <script language="javascript" type="text/javascript" src="Scripts/jquery-1.2.6.min.js"></script>
        <script language="javascript" type="text/javascript" src="Scripts/Main.js">

</script>
</head>
<body>
<div>
<h1>JQuery AJAX Load Sample</h1>
<div id="tabsContainer">
<a class="tab" onclick="GetSectionDetails('summery','detailsArea');">Summery</a>
<a onclick="GetSectionDetails('certificates','detailsArea');" >Certificats</a>
<a onclick="GetSectionDetails('contacts','detailsArea');">Contact details</a>
</div>
<div id="detailsArea"></div>
</div>
</body>
</html>

Second, let’s build the generic handler GetDetails.ashx, which will be used to retrieve the section details:

using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;

namespace JQuery.Samples.AJAX.Handlers
{
    /// <summary>
    /// Summary description for $codebehindclassname$
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public class GetDetails : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            // Just to let you see the loading effect
            System.Threading.Thread.Sleep(2000);

            // Getting the correct data according to the query string.
            // You can replace the static content with database retrieved data.
            switch (context.Request.QueryString["sectionId"].ToLower())
            {
                case("summery"):
                    context.Response.Write(@"Having +3 years of experience as a software developer specialized in design and implementation of web based applications using Microsoft technologies associated with strong analytic and design skills. 
                                             <br/>Worked with both Waterfall and Agile project management methodologies and managed teams with Scrum. 
                                             <br/>Holding a MCTS and MCPD in web development and had great knowledge dealing with web applications. 
                                             <br/>Also had a good experience in the development with MOSS 2007, MCMS 2002 and beginning MS Dynamic CRM 4.0");
                    break;
                case ("certificates"):
                    context.Response.Write(@"<h2>MCPD</h2>
                                            Enterprise Applications Developer, Visual Studio 2005 
                                            <br/>Web Developer, Visual Studio 2005
                                            <h2>MCTS</h2>
                                            Microsoft Office SharePoint Server 2007 ― Application Development 
                                            <br/>Distributed Applications Development, .NET Framework 2.0 
                                            <br/>Windows-Based Client Development, .NET Framework 2.0 
                                            <br/>Windows SharePoint Services 3.0 Application Development 
                                            <br/>Web-Based Client Development, .NET Framework 2.0
                                            <h2>MCP</h2>
                                            Application Development Foundation, .NET Framework 2.0
                                            <h2>Bachelor of  Science</h2>
                                            Mansoura University, Information Systems Department, 2005");
                    break;
                case("contacts"):
                    context.Response.Write(@"<h2>Email</h2>     
                                            shokr.ahmed@gmail.com
                                            <h2>MSN</h2>    
                                            shokr.ahmed@hotmail.com
                                            <h2>Skype</h2>
                                            ahmed.shokr
                                            <h2>Mobile (Kuwait)</h2>
                                            +96565963141
                                            <h2>Mobile (Egypt)</h2>
                                            +20104492755
                                            <h2>Address</h2>
                                            Amman St., Salymia, Kuwait");
                    break;
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Now, all what we need to do, is to retrieve the correct section information form the client script:

// The handler url
var handlerUrl = 'Handlers/GetDetails.ashx';

// Load the first tab on the page load
$(document).ready(
                    function(){
                                GetSectionDetails('summery','detailsArea');
                              }
                  );

// Loads the specified section details
function GetSectionDetails(sectionId,detailsAreaId)
{
    var detailArea = '#' + detailsAreaId;
    var getUrl = handlerUrl + '?sectionId=' + sectionId;
    $(detailArea).html("Loading....");
    $(detailArea).load(FormatUrl(getUrl));
}

// Format the url to include a random number to avoid caching
// This is very important when dealing with dynamic data
function FormatUrl(url)
{
    var newUrl = url;
    newUrl += '&ver=' + Math.random().toString();
    return newUrl;
}

The sample in action:

The loading… effect:

image

The first section after loading:

image

Another section loaded by client side event:

image

You can play with the styles to make it more like tabs control, but I don’t like CSS so much so I’m leaving it to you 🙂

You can download the sample here.

I hope that helped

Ahmed

Advertisements

One thought on “jQuery AJAX Load Sample

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s