Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » Ajax » Samples » Downloads
 
Add your own
alternative version

Load Data From Server While Scrolling Using jQuery AJAX

, 26 Apr 2012
This article explains how to implement on-scroll loading data from the server using jQuery as seen on Facebook.
LoadOnScroll.zip
LoadOnScroll
App_Data
Bin
System.Web.Extensions.dll
Scripts
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoadOnScroll.aspx.cs" Inherits="LoadOnScroll" %>

<!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>Demo page: Load data while scrolling using ASP.Net and JQuery</title>

    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.6.2.min.js"></script>

    <script type="text/javascript" language="javascript" src="Scripts/LoadOnScroll.js"></script>

    <style type="text/css">
        body
        {
            font-family:Arial;
            font-size:.93em;
        }
        
        #mainDiv
        {
            background-color:#FAFAFA;
            border:2px solid #888;
            height:200px;
            overflow:scroll;
            padding:4px;
            width:700px;
        }
        
        #mainDiv p
        {
            border:1px solid #EEE;
            background-color:#F0F0F0;
            padding:3px;
        }
        
        #mainDiv p span
        {
            color:#00F;
            display:block;
            font:bold 21px Arial;
            float:left;
            margin-right:10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>
                Demo page: Load data while scrolling with ASP.NET and JQuery</h1>
            <p>
                This page is a demo for loading new content from the server and append the data
                to existing content of the page while scrolling.</p>
            <p style="margin: 20px 0; background-color: #EFEFEF; border: 1px solid #EEE; padding: 3px;">
                Author: Praveen Meghwal
            </p>
        </div>
        <div id="mainDiv">
            <div id="wrapperDiv">
                <p>
                    <span>1</span> Static data initially rendered.
                </p>
                <p>
                    <span>2</span> Static data initially rendered.
                </p>
                <p>
                    <span>3</span> Static data initially rendered.
                </p>
                <p>
                    <span>4</span> Static data initially rendered.
                </p>
                <p>
                    <span>5</span> Static data initially rendered.
                </p>
            </div>
        </div>
    </form>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Praveen Meghwal
Software Developer (Senior)
India India
No Biography provided

| Advertise | Privacy | Mobile
Web04 | 2.8.140721.1 | Last Updated 27 Apr 2012
Article Copyright 2011 by Praveen Meghwal
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid