CODEWITHSUNDEEP
phpjqueryajaxcodeigniter-3
Vinay Thakur
Vinay Thakur

Reputation: 165

Ajax Infinite Scroll in Codeigniter

i am working on my tour operator website using codeigniter. i wanted to use infinite scroll on my tour or blog listing page, i want to fetch 5 items each time when i scroll page, but i can fetch only one data at a time when ajax send request..

here is my controller

//blog list & Views   
public function blogs()
    {
    $data = $this->data;
    $blogid = $this->uri->segment('3');
    if($blogid == NULL){
        $this->load->view('themes/ui/blogs/bloglist1', $data);     
    }else{
      $data['blogdata'] = $this->ui_model->blogdetails($blogid);
      $this->load->view('themes/ui/blogs/blogdetails1', $data);       
    }
}


//infinite scroll for blogs   
public function fetch_blogs()
 {
  $output = '';
  $limit = $this->input->post('limit');
  $start = $this->input->post('start');    
  $moredata = $this->ui_model->fetch_blogs($limit, $start);
  if($moredata->num_rows() > 0)
  {
   foreach($moredata->result() as $row)
    {
    
    $data['blogdata'] = array(
        'title' => $row->title,
        'banner' => $row->banner,
        'blogid' => $row->id,
        'slug' => $row->slug
        );   
       $output = $this->load->view('themes/ui/blogs/blog_grid1',$data,true);
   }  
      
  }
  echo $output;
 }

here is the model

function fetch_blogs($limit, $start)
     {
      $this->db->set_dbprefix('');    
      $this->db->select("*");
      $this->db->from("blogs");
      $this->db->order_by("id", "DESC");
      $this->db->limit($limit, $start);
      $query = $this->db->get();
      return $query;           
     }

here is the bloglist page where jquery ajax code

<!DOCTYPE html>
<html lang="en">

<head>
</head>
<body>
<main>
<div class="row">
<div class="col-lg-8 col-xl-9">

<div class="mb-5 pb-1" id="load_data"></div>
<div class="mb-5 pb-1" id="load_data_message"></div>
 
</div>                   
</div>
</main>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {

            var limit = 5;
            var start = 0;
            var action = 'inactive';

            function lazzy_loader(limit) {
                var output = '';
                for (var count = 0; count < limit; count++) {
                    output += '<div class="post_data col-lg-12 col-xl-12 mb-3 mb-md-4 pb-1">';
                    output += '<p><span class="content-placeholder" style="width:100%; height: 200px;">&nbsp;</span></p>';
                    output += '<p><span class="content-placeholder" style="width:100%; height: 100px;">&nbsp;</span></p>';
                    output += '</div>';
                }
                $('#load_data_message').html(output);
            }

            lazzy_loader(limit);

            var csrfName = '<?php echo $this->security->get_csrf_token_name(); ?>',
                csrfHash = '<?php echo $this->security->get_csrf_hash(); ?>';

            function load_data(limit, start) {
                $.ajax({
                    url: "<?php echo base_url(); ?>en/fetch-blogs",
                    method: "POST",
                    data: {
                        [csrfName]: csrfHash,
                        limit: limit,
                        start: start
                    },
                    cache: false,
                    success: function(data) {
                        if (data == '') {
                            $('#load_data_message').html('<h3>No More Result Found</h3>');
                            action = 'active';
                        } else {
                            $('#load_data').append(data);
                            $('#load_data_message').html("");
                            action = 'inactive';
                        }
                    }
                })
            }

            if (action == 'inactive') {
                action = 'active';
                load_data(limit, start);
            }

            $(window).scroll(function() {
                if ($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive') {
                    lazzy_loader(limit);
                    action = 'active';
                    start = start + limit;
                    setTimeout(function() {
                        load_data(limit, start);
                    }, 1000);
                }
            });

        });

    </script>
</body>
</html>

here this is view blog_grid1.php

    <div class="mb-4">
<a class="d-block" href="<?=base_url();?>en/blogs/<?=$blogdata['blogid'];?>/<?=$blogdata['slug'];?>">
    <img class="img-fluid mb-4 rounded-xs w-100" src="<?=$blogdata['banner'];?>" alt="<?=$blogdata['title'];?>">
</a>
<h5 class="font-weight-bold font-size-21 text-gray-3">
    <a href="<?=base_url();?>en/blogs/<?=$blogdata['blogid'];?>/<?=$blogdata['slug'];?>"><?=$blogdata['title'];?></a>
</h5>
<div class="mb-3">
    <a class="mr-3 pr-1" href="#">
        <span class="font-weight-normal text-gray-3">May 21, 2020</span>
    </a>
    <a href="#">
        <span class="font-weight-normal text-primary">Tourism</span>
    </a>
</div>
</div>

Here the Problem is "each time when ajax send request, it gets just one result in response.."

but "if i write html codes of "view_blog_grid1.php" directly in controller, then it works as expected.

but i don't want to make controller messy with a lot of html code and also i have multiple grid template like grid1, grid2, .... , that i want to load dynamically.

Upvotes: 1

Views: 400

Answers (1)

Illya
Illya

Reputation: 1275

The problem is here

$output = $this->load->view('themes/ui/blogs/blog_grid1',$data,true);

You are setting new value to output which is will result only the end (5th) row in the foreach loop,

to solve this problem, just append the $this->load->view('themes/ui/blogs/blog_grid1',$data,true) to $output variable

$output .= $this->load->view('themes/ui/blogs/blog_grid1',$data,true);

NB* .= operator mean append and is equal to :

 $output = $output . $this->load->view('themes/ui/blogs/blog_grid1',$data,true)

Upvotes: 2

Related Questions