CODEWITHSUNDEEP
phpjquerymysqlajax
Hazemusa
Hazemusa

Reputation: 36

How to use jQuery.ajax and jScroll with PHP to make infinite scrolling page

I am using a PHP (backend service page) to get the results of tweets stored in MySQL as json. Now that the data has grown big, I want to load just 20 tweets in the page and when the user scrolls, I want to get the more results.

I am new to jQuery and since jScroll has little documentation, if any at all, I am not being able to get this thing working.

I search for something like this but could not find any detailed solution.

My PHP service just gets a small number of records. I know about setting an offset but how can one send that and implement the jScroll on the page all at once?!

Can anyone help? Thanks a lot....

Upvotes: 1

Views: 5536

Answers (2)

anwerj
anwerj

Reputation: 2488

You have to bind jscroll if there are changes in DOM, so you can create a function which you call after document ready and after each ajax request.

Remember Jscroll requires next selector url. So You you have to place the anchor with next url to you page.

The HTML Section should go like this,

<div class="main-selector">
 <div><!--Your data here --> </div>
 <div><!--Your data here -->  </div>
 <div><!--Your data here  --> </div>
 <div><!--Your data here -->  </div>
 <div><!--Your data here  --> </div>
 <div class='pager'>
    <a href="URL TO NEXT PAGE" class='next-selector'></a>
 </div>
</div>

Now you can call Jscroll for the class "main-selector" as follows

 function setScrolling(selector) {
    $(window).unbind("scroll");


    scroller= $(selector).jscroll({
        loadingHtml: '<img src="/images/loader.gif" alt="Loading" /> Loading...',
        padding: 20,
        nextSelector:' next-selector:last ' // This part is tricky
    });

 }

Now call setScrolling('.main-selector') , initially and after each ajax request(ONLY IF REQUIRED)

And remember to set nextSelector in a fashion that its always the next url.

Upvotes: 3

Luke Pittman
Luke Pittman

Reputation: 843

You'll want to create a javascript function that is an ajax call to get the next set of results. Then attach an event to the scroll function, calculate the location and if it is within a certain parameter, call the javascript function.

I store the current number of results in a hidden input field.

HTML

<input type="hidden" name="start_from" id="start_from" value="0">
<div id="tweet_results"></div>

JS

function get_results () {
  var start_from = $('#start_from').val();

  // ajax function here and pass it the start_from data
  // on complete, update the $('#start_from') value to whatever you want (+20)
  // and update $('#tweet_results) with your data from the ajax call
}


$(window).scroll(function() {
 if($(window).scrollTop() + $(window).height() >= ($(document).height() - 200)) {
   get_results ();
 }
});

On the initial page load you'll want to call get_results() once to get it started. This is all very rough, but it should give you the idea.

Upvotes: 2

Related Questions