Click here to Skip to main content
12,298,406 members (53,623 online)
Click here to Skip to main content
Articles » Web Development » Ajax » Samples » Downloads

Stats

138.5K views
8.9K downloads
146 bookmarked
Posted

Load Data From Server While Scrolling Using jQuery AJAX

, 26 Apr 2012 CPOL
This article explains how to implement on-scroll loading data from the server using jQuery as seen on Facebook.
<%@ 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)

Share

About the Author

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

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160525.2 | Last Updated 27 Apr 2012
Article Copyright 2011 by Praveen Meghwal
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid