Tutorial on jQuery Endless/Infinite Scroll and PHP-MySQL

Question

I'm looking for a tutorial that breaks down how jQuery's Endless/Infinite Scroll plugin can call data stored in a MySQL database ... presumably with PHP, although I'm a beginner so I may be missing something here.

Everything I've found so far goes into the nitty-gritty of the javascript, or the philosophy of a "pageless web" but does not actually explain how the plugin can be used to de-paginate large query results.

Any help at all is greatly appreciated :)

score 2 · Answer 1 · edited May 23 '17 at 12:31

2

Refering to this answer you can use jquery to detect when the end of page has been reached...

  $('#col2').scroll(function(){
    if ($('#col2').scrollTop() == $('#col2').height()){
       loadMore();
    }
});

Once you get to the end of the page you can write a method that will do an ajax call to fetch more data, see JQuery AJAX...

$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
 })

The returned results from your PHP page can then be added onto the bottom of the web page, see JQuery append.

I hope this helps... :)

edited May 23 '17 at 12:31

Community

1
1

answered Dec 21 '10 at 16:38

Paul

4,812
3
27
38

Almost, it certainly has started to clear up some issues for me. Basically my confusion comes down to this: suppose we had a blog with 100 posts, if traditional php pagination works by pulling up all those 100 posts and then paginating them to-- say for example-- six posts per page .. how can Endless Scroll be configured to append page 2 at the end of page 1? I feel like I understand what the client side scripts are supposed to do, but I don't really understand what 'some.php' is supposed to look like in order for the jQuery to work correctly. Sorry if this is a helpless beginner issue LOL – Isa Dec 21 '10 at 19:08
You will have two "types" of pages... One that will be the initial "shell"... another page will just return the "requested" part. So the shell will load and then the AJAX call will return the requested part back and you will append it to the end of the document. – Paul Dec 21 '10 at 22:12

score 0 · Answer 2 · edited Jan 09 '13 at 07:22

0

Just in case anyone is having a problem getting the correct $(document).height, like I did, what I did to solve the problem was on document ready I used var doc = document.documentElement.clientHeight to get the correct height and put it in a variable, then used :if ($(window).scrollTop() >= $(window).height() - + doc + - 100) to establish the condition. I hope this helps someone.

edited Jan 09 '13 at 07:22

Pragnesh Chauhan

8,363
9
42
53

answered Jan 09 '13 at 07:03

Michael Evans

1

score 0 · Answer 3 · answered May 15 '13 at 06:59

0

If you are looking for tutorial to implement endless scrolling in php, this can help you. This tutorial uses jscroll and implemented on php website using codeigniter framework on serverside. Tutorial on endless scrolling in php

answered May 15 '13 at 06:59

VSharma

29
2

Tutorial on jQuery Endless/Infinite Scroll and PHP-MySQL

3 Answers3