Infinite scroll jquery plugin didn't work

Question

I am trying to add infinite scrolling to codeigniter's pagination with the Infinite scroll jquery plugin. But with no success

Here is my controller:

$config['base_url'] = site_url('news/home/');
$config['total_rows'] = $this->home_model->count_new();
$config['per_page'] = 3;
$config['uri_segment'] = 3;
$config['limit'] = $config['per_page'];
$this->pagination->initialize($config);
$data['news'] = $this->home_model->list_data_new($config['per_page'], $this->uri->segment($config['uri_segment']));
$this->load->view('news_view',$data);

Here is my view :

<div id="content">
<?php foreach ($news as $data):?>
    <?php echo $data['title']?>
    Post by: <?php echo $data['username']?>
<?php endforeach;?>
</div>
<button id="next">load more</button>

And here is the javascript also in view:

 $('#content').infinitescroll({
     navSelector  : "#next:last",            
     // selector for the paged navigation (it will be hidden)
     nextSelector : "#next:last",    
     // selector for the NEXT link (to page 2)
     itemSelector : "#content"          
     // selector for all items you'll retrieve
});

The pagination link will look like this http://localhost/latihan/news/home/3 then click next will be like this http://localhost/latihan/news/home/6

The problem is the next post doesn't showing up and load more button is not loading data.

Any answer?

Many thanks...

What happens when you call the URLs of the pagination manually in the browser? Does ``http://localhost/latihan/news/home/6`` work at all? — Antares42, Jan 08 '15 at 15:23

score 0 · Answer 1 · answered Jan 09 '15 at 14:03

Your setup is wrong.

I advise you have a look at the source code of the page http://www.infinite-scroll.com itself, because they are using their own plugin. Scroll down on the page to see it working.

Other than that I have to say that their product is extremely badly documented and works in quite unintuitive ways. For example, it will read the URL for the next page from nextSelector, but only when that element is a hyperlink <a ...> and only the first time. It will then parse that URL for occurrences of the number "2", load, and replace the number with 3 and so on. So your intended design with page 2 being home/3 and page 3 being home/6 will not work with this plugin.

Do yourself a favor and use jScroll instead.

Infinite scroll jquery plugin didn't work

1 Answers1