CODEWITHSUNDEEP
ajax
day_dreamer
day_dreamer

Reputation: 834

Page load on scrolling

I am developing a website and I want to load the data dynamically on scrolling the page,When the scroll bar reaches the bottom of the page I want to load more data from the database using AJAX.

In my web page there is a iframe in which i want to append the new data.Like flipkart.com website. Where on scrolling the page new products are loaded.

Could anyone help me in this regard?

Thanks in advance.

I have tried many times but no luck what i'm getting is only once the GetActivity() is being called,that too when i scroll down its not calling GetActivity(),but when i scroll up from that point it calls javascript function GetActivity()And on repeating this it is not working here is the code which i used as given by Greg :please look into this and help.

<html>
<head>
<script type="text/javascript" src="jQuery-1.4.1-min.js"></script>
<script type="text/javascript">
$(window).scroll(function() {
    var bottom = getBottom(window),
        $reset = $("#activity_reset");
    if (bottom == $(this).scrollTop() && $reset.val() == 0) {
        $reset.val(1);
        $("#activity_loading").show();
        if ($("#activity_full").val() == 0) {
            setTimeout("GetActivity();", 100);
        }
    }
});
function getBottom(e) {
    height          = $(document).height();
    windowheight    = $(e).height();
    return height - windowheight;
}
function GetActivity()
{
alert("got it!");
$('div.tt').html('1');
$('div.ttt').html('1');
}
function setting()
{
$('div.tt').html('0');
$('div.ttt').html('0');
}
</script>
</head>
<body onload="return setting()" >
<pre>
<!--here i have used some junk texts so that a scroll bar appears in the browser-->
</pre>
<div style="display:none" id="activity_full" class="ttt"></div>
<div style="display:none" id="activity_reset" class="tt"></div>
</body>
</html>

Upvotes: 0

Views: 1562

Answers (1)

ProdigyProgrammer
ProdigyProgrammer

Reputation: 415

This will monitor the page and load the function GetActivity() when you scroll down to the bottom of the page; you can put your ajax call in there and edit this accordingly to display the data you wish to have appear on the page.

$(window).scroll(function() {
    var bottom = getBottom(window),
        $reset = $("#activity_reset");

    if (bottom == $(this).scrollTop() && $reset.val() == 0) {
        $reset.val(1);
        $("#activity_loading").show();

        if ($("#activity_full").val() == 0) {
            setTimeout("GetActivity();", 1000);
        }
    }
});

function getBottom(e) {
    height          = $(document).height();
    windowheight    = $(e).height();

    return height - windowheight;
}

function GetActivity() {
    /* ajax call in here */
}

When the window is scrolled the .scroll(function()) is triggered; the getBottom(window) function then calculates the document height and the screen height and subtracts them to see if the user's window has reached the bottom of the screen. $("#activity_reset") is then stored to an identifier for later use.

Once the action is fired your reset value is set to one so that the ajax isn't fired more than once at a time. The loading bar is displayed and a timeout is then set for the GetActivity() function.

$("#activity_reset") -> Should be a hidden div on the page that holds a value of either 1 or 0; it should be initialized as 0 and when the users browser hits the bottom of the page your ajax call is fired and once it is done being loaded you should then set the value back to 0 to allow loading again.

$("#activity_show") -> Should be a hidden div on the page that contains a loading image, or simply text saying that something is loading (not necessary but certainly helps for user experience).

$("#activity_full") -> Is another hidden div that is used to identify when your div is full and should not load anymore content. It should be initialized to 0 and when you have loaded as many items as can fit on the page you can set it to 1 (likely in your GetActivity() function) to prevent any further loading.

Further Explaining: Inside of your GetActivity() function change the following:

$('div.tt').html('1');
//returns <div class="tt">1</div>

to

$('div.tt').val(1);
//returns <div class="tt" value="1"></div>

Your code is setting the html of the div to be 1, when what you actually want is for the value attribute to be equal to 1 since that is what the script is checking for in the comparison. I also noticed that you are also setting $('div.ttt') to be 1 as well, but this will stop the script from loading any further. This one should only be set to one once a condition has been met and you would no longer like any items to load.

$num = 6; //number of items per page
if($num == 6)
    $('div.ttt').val(1);

Hope that clears things up; let me know.

Upvotes: 2

Related Questions