Codeigniter Pagination Infinite Scroll Using Ajax And Jquery giving only Duplicate data

Question

I want to create pagination page into infinite scroll. I'm using codeigniter. But it is duplicating the data. So please help me to edit my pagination code. I had struggle for days. I will be so grateful if you can help me. Thank you. When I use the below code

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

Its working fine

And when I try to load when scroller reaches the footer div it gives only duplicate data.

$(window).scrollTop()+$(window).height() >= $('#footerdivid').offset().top

My code is given below

View

<html>
    <body>
        <div id="container">
            <h1>Codeigniter Pagination Infinite Scroll</h1>
            <div id="body">
              <ol> <div id="results"></div></ol>
            </div>    
        </div>
    </body>
</html>

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var total_record = 0;
var total_groups = <?php echo $total_data; ?>;  
$('#results').load("<?php echo base_url() ?>content/load_more",
 {'group_no':total_record}, function() {total_record++;});
$(window).scroll(function() {       
    if($(window).scrollTop()+$(window).height() >= $('#fooerdivid').offset().top)  
    {           
        if(total_record <= total_groups)
        {
          loading = true; 
          $('.loader_image').show(); 
          $.post('<?php echo site_url() ?>content/load_more',{'group_no': total_record},
            function(data){ 
                if (data != "") {                               
                    $("#results").append(data);                 
                    $('.loader_image').hide();                  
                    total_record++;
                }
            });     
        }
    }
});
});
</script>

Controller

<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Content extends CI_Controller {
    public function __construct()
    {
        parent::__construct();
        $this -> load->model('content_model');
    }

    public function index()
    {
        $total_data = $this->content_model->get_all_count();
        $content_per_page = 5; 
        $this->data['total_data'] = ceil($total_data->tol_records/$content_per_page);
        $this->load->view('content_page', $this->data, FALSE);
    }

    public function load_more()
    {
        $group_no = $this->input->post('group_no');
        $content_per_page = 5;
        $start = ceil($group_no * $content_per_page);
        $all_content = $this->content_model->get_all_content($start,$content_per_page);
        if(isset($all_content) && is_array($all_content) && count($all_content)) : 
            foreach ($all_content as $key => $content) :
                 echo '<li>'.$content->title.'</li>';
                 echo '<p>'.$content->description.'</p>';                 
            endforeach;                                
        endif; 
    }

}

Model

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Content_model extends CI_Model
{
    public function get_all_count()
    {
        $sql = "SELECT COUNT(*) as tol_records FROM content_information";       
        $result = $this->db->query($sql)->row();
        return $result;
    }

    public function get_all_content($start,$content_per_page)
    {
        $sql = "SELECT * FROM  content_information LIMIT $start,$content_per_page";       
        $result = $this->db->query($sql)->result();
        return $result;
    }

}

Xpleria · Accepted Answer · 2018-03-13 08:38:44Z

When the user scrolls, it fires the $(window).scroll event multiple times. This is why your script is requesting the same data more than once and you get duplicate data.

There is a simple solution to this. You can use a Boolean array to mark the requests that have been made. And then request only if the current request is not yet made.

Change the script in the view file as follows:

<html>
    <body>
        <div id="container">
            <h1>Codeigniter Pagination Infinite Scroll</h1>
            <div id="body">
              <ol> <div id="results"></div></ol>
            </div>    
        </div>
    </body>
</html>

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var total_record = 0;
    var data_requested = []; // empty array
    var total_groups = <?php echo $total_data; ?>;

    data_requested[total_record] = true; // assign true just before requesting
    $('#results').load(
        "<?php echo base_url() ?>content/load_more",
        {
            'group_no':total_record
        }, 
        function() {
            total_record++;
            data_requested[total_record] = false; // haven't requested the next one yet
        }
    );
    $(window).scroll(function() {
        // make sure #footerdivid is the correct id
        if($(window).scrollTop() + $(window).height() >= $('#footerdivid').offset().top)  
        {           
            if(total_record <= total_groups && data_requested[total_record] !== true)
            {
                data_requested[total_record] = true; // assign true just before requesting
                loading = true; 
                $('.loader_image').show(); 
                $.post('<?php echo site_url() ?>content/load_more',{'group_no': total_record},
                function(data){ 
                    if (data != "") {                               
                        $("#results").append(data);                 
                        $('.loader_image').hide();                  
                        total_record++;
                        data_requested[total_record] = false; // haven't requested the next one yet
                    }
                })
                .fail(function() {
                    data_requested[total_record] = false; // current request failed
                });
            }
        }
    });
});
</script>

Collectives™ on Stack Overflow

Codeigniter Pagination Infinite Scroll Using Ajax And Jquery giving only Duplicate data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related