loading items when user scroll down

Question

I have a database which has about 5000 books. When user comes on the page, I don't want to load the books by using simple select * from BOOkTABLE, my approach is to go as the user needs it, so I want that as the user scrolls down I could fetch data from the Database. May be in chunks of 15-20 books, is that a good approach? Any alternative?

Secondly I have alphabets on top of div so if a user clicks on "Z" we could fetch the books starting with Z and show him in the DIV.

I agree but if there is some lib that he can use instead of writing the whole, as this is the normal thing now a days.. — require_once, Sep 03 '13 at 21:13
You may checkout the following question: http://stackoverflow.com/questions/4120647/how-facebook-load-pages — SaidbakR, Sep 03 '13 at 21:13
@sємsєм Thank you.. Pipes.. really never heard of this lib/tech — , Sep 03 '13 at 21:17
Also you may checkout the following tutorial: http://youhack.me/2010/05/14/an-alternative-to-pagination-facebook-and-twitter-style/ — SaidbakR, Sep 03 '13 at 21:18

score 0 · Answer 1 · answered Sep 03 '13 at 21:26

0

Yes you can do this by using Ajax on scroll down.Something like that:

$(window).scroll(function () {


    if ($(window).height() + $(window).scrollTop() == $(document).height()) {


        $.ajax({
            type: "POST",
            url: 'abc.php',
            async:false,
            data:"pagedata="+pageData ,
            cache: false,
            success: function(data){

            }
        });



    }

});

In abc.php you can set the query according to your requirement and render the html(response) to be shown when scrolled down.

answered Sep 03 '13 at 21:26

Moeed Farooqui

3,604
1
18
23

do you have a Fiddle or some reference? not sure what this would do? ($(window).height() + $(window).scrollTop() == $(document).height() – Sep 03 '13 at 21:32
Nopes dear but let me clear it some type of a particular point.for e.g when you scroll down to a certain position a ajax request initiates and will hit abc.php – Moeed Farooqui Sep 03 '13 at 21:36

score 0 · Answer 2 · answered Sep 04 '13 at 00:10

For the first question, using ScrollTop() you can load iterations of data from your PHP after an interval of pixels has been scrolled.

You will need a PHP file, and JavaScript.

This is written freehand with no testing so I can't guarantee these will work, but try something along these lines:

JavaScript

jQuery(document).ready(function($){

// Set the number of pixels from the top you want the event to fire
// Select the number of books you would like to load each time
// i = number of loads you've called
var reloadAfter = 500;
var numberBooks = 20;
var i = 1;

$(window).scroll(function() {
    if ( $(this).scrollTop() >= reloadAfter )
    {
       $.get("getbooks.php", {number:numberBooks , counter:i} )
             .done(function(data){
                   $('#books').append("Title:", data.title)
                              .append("Author:", data.author);
                   });


        reloadAfter = reloadAfter + reloadAfter; 
        i++;
    }
});

PHP

$numberBooks = $_GET['number'];
$i = $_GET['counter'];
$upper = ( $numberBooks * $i );
$lower = ( $upper - $numberBooks );

$get_books = mysql_query('SELECT * FROM BOOkTABLE WHERE id > $lower AND id < $upper');

echo json_encode($get_books);

loading items when user scroll down

2 Answers2