How can I get this button to scroll down to scroll endlessly?

Question

Here, the button loads data from the database. Works great.

<li class="getmore" id="'.$post_id.'"><a>Load More Posts</a></li> 

How can I get this button to automatically scroll down to the bottom of the page. just an endless scroll.

Should I use the window scroll function. If so, how to do it in this code.

I tried to insert ajax code inside this function, but did not work.

Edit: 1. When I put the Ajax scroll function inside, it shows the mysql error in getmore.php. 2. If I put a button class with a click function inside the scroll function, then it fires too fast to load the same messages several times.

 $(document).scroll(function(){ if ($(window).scrollTop() + $(window).height() >= $(document).height()) { } }); $('body').on('click','.getmore',function(){ var lastelement = $(this ).attr('id'); $.ajax({ type : 'GET', url : 'getmore.php', data : 'lastelement='+lastelement, beforesend : function(){ $('.getmore').html('loading....'); }, success: function(data){ $('.getmore').remove(); $('#recs') .append(data) ; } }); }); 

 <?php $lastelement = $_REQUEST['lastelement' ]; include("connect2.php"); if ($lastelement!=''){ $query = "SELECT * FROM `posts` " . "WHERE (id < " . $lastelement . " AND " . "post_keywords like '%home%') " . "ORDER BY `posts`.`id` DESC " . "LIMIT 10"; $records = mysql_query($query); if (mysql_num_rows($records)) { while($record = mysql_fetch_array($records)){ $cookie_name = 'tcVotingSystem'.$record['id']; $post_title = $record['post_title']; $post_id = $record['id']; $post_date = $record['post_date']; $post_author = $record['post_author']; $post_image = $record['post_image']; $post_image2 = $record['post_image2']; $post_keywords = $record['post_keywords']; $post_content = substr($record['post_content'],0,100); ?> <div> //posts goes here </div> 

Answer 1

What you want to do is disable the same Ajax request as your button when the scroll reaches a certain point. So instead of embedding the click event function in the scroll, rather disable the Ajax event

Example:

 $(document).scroll(function(){ if ($(window).scrollTop() + $(window).height() >= $(document).height()) { $.ajax({ type: 'GET', url: 'getmore.php', data:'lastelement='+lastelement, beforesend: function(){ $('.getmore').html('loading....'); }, success: function(data){ $('.getmore').remove(); $('#recs') .append(data) ; } }); } }); 

The above example. As an aside, I would recommend that you create a function for your lazy ajax invocation call, as you may need to use it more than once ie Press and scroll.

Hope this helps

Answer 2

To avoid multiple loads during fast scrolling, you can go for this simple approach:

 var isLoadingNewPage = false; //initializing the flag $(document).scroll(function(){ if ($(window).scrollTop() + $(window).height() >= $(document).height()) { if(!isLoadingNewPage) { $('.getmore').click(); //go for next page load } } $('body').on('click','.getmore',function(){ //if the ajax request is going on then don't make another request; simply return back if(isLoadingNewPage) return; var lastelement = $(this ).attr('id'); $.ajax({ type: 'GET', url: 'getmore.php', data:'lastelement='+lastelement, beforesend: function(){ $('.getmore').html('loading....'); isLoadingNewPage = true; //setting the flag so that no more call needed till the time response comes back }, success: function(data){ $('.getmore').remove(); $('#recs') .append(data) ; isLoadingNewPage = false; //resetting the flag so that ajax can happen again if user scroll again } }); }); }); 

Answer 3

Another approach could be this: place the button at the end of the page so that when scrolling you can check whether the button enters the viewing area and trigger a click

.In order not to show the same messages every time, change the getmore id with the last id obtained from ajax call

  $.fn.isInViewport = function () { var elementTop = $(this).offset().top; var elementBottom = elementTop + $(this).outerHeight(); var viewportTop = $(window).scrollTop(); var viewportBottom = viewportTop + $(window).height(); return elementBottom > viewportTop && elementTop < viewportBottom; }; if ($('.getmore').isInViewport()) { $('.getmore').click(); } $(window).scroll(function(){ if ($('.getmore').isInViewport()) { $('.getmore').click(); } $('body').on('click','.getmore',function(){ var lastelement = $(this ).attr('id'); $.ajax({ type : 'GET', url : 'getmore.php', data : 'lastelement='+lastelement, beforesend : function(){ $('.getmore').html('loading....'); }, success: function(data){ /* to avoid to show the same posts everytimes change the getmore ID with the last ID retrieved from ajax call */ $('.getmore').attr('id', (lastelement + $('.getmore').attr('id'))); $('#recs') .append(data) ; } }); }); }); 

when your ajax answer is empty than you can remove the .getmore button

As suggested in another answer, introducing the isLoadingNewPage variable is good practice.