jQuery AJAX Load Sample


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

<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 id="detailsArea"></div>

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

            // 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())
                    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");
                case ("certificates"):
                                            Enterprise Applications Developer, Visual Studio 2005 
                                            <br/>Web Developer, Visual Studio 2005
                                            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
                                            Application Development Foundation, .NET Framework 2.0
                                            <h2>Bachelor of  Science</h2>
                                            Mansoura University, Information Systems Department, 2005");
                                            <h2>Mobile (Kuwait)</h2>
                                            <h2>Mobile (Egypt)</h2>
                                            Amman St., Salymia, Kuwait");

        public bool IsReusable
                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

// Loads the specified section details
function GetSectionDetails(sectionId,detailsAreaId)
    var detailArea = '#' + detailsAreaId;
    var getUrl = handlerUrl + '?sectionId=' + sectionId;

// 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:


The first section after loading:


Another section loaded by client side event:


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


First dev night in Kuwait

ISA, I will attend my first dev. night in Kuwait in Wednesday, 28 January, 2009

Thanks a lot for Amr Al Garhy Microsoft Gulf MVP lead for telling me about that session and give me the chance to get back to technical community sharing.

The event will be form 7:00 pm to 10:00 pm and it will be held in Mövenpick Hotel & Resort Al Bida’a, Al Beldani restaurant

The session will be about “Oslo”, and I’m very excited to hear about that new framework.

I’ll attend my first dev night as an attendee, but ISA the next one I’ll be the speaker 🙂

I’ll post about the session when it finished ISA, so wait for my post 🙂

I hope that helped