Unable to get lazy load data in codeigniter using AJAX - php

Question

I am doing an e-commerce website. Just want to implement lazy load. I can fetch the data at first load but again if I scroll down no data can be fetched.
**HTML CODE**
<div class="row" id="fetchedprodducts">
<div class="row" id="load_data_message"></div>
<div id="load_data"></div>
</div>
**CSS**
#-webkit-keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
#keyframes placeHolderShimmer {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.content-placeholder {
display: inline-block;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: placeHolderShimmer;
animation-name: placeHolderShimmer;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background: #f6f7f8;
background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
-webkit-background-size: 800px 104px;
background-size: 800px 104px;
height: inherit;
position: relative;
}
.post_data
{
padding:24px;
border:1px solid #f9f9f9;
border-radius: 5px;
margin-bottom: 24px;
box-shadow: 0px 0px 5px #eeeeee;
}
**AJAX**
<script>
$(document).ready(function(){
var url = window.location.href;
var idx = url.indexOf("product");
var slugx = url.indexOf("product");
var slug = url.substring(idx).split("/")[1];
var line = url.substring(slugx).split("/")[2];
var limit = 8;
var start = 0;
var action = 'inactive';
function lazy_load(limit){
var output = '';
for(var count = 0; count < limit; count++)
{
output += '<div class="post_data col-md-4 col-12">';
output += '<p><span class="content-placeholder" style="width:90%; height: 30px;"> </span></p>';
output += '<p><span class="content-placeholder" style="width:90%; height: 80px;"> </span></p>';
output += '</div>';
}
$('#load_data_msg').html(output);
}
lazy_load(limit,slug,line);
function load_data(limit,start,slug,line)
{
$.ajax({
url:BASE_URL+'front/Products/fetch',
method:"POST",
data:{limit:limit,start:start,slug:slug,line:line},
cache: false,
success:function(data)
{
if(data == '')
{
$('load_data_msg').html('<h3> No Product is available </h3>');
}
else{
$('#fetchedprodducts').append(data);
$('#load_data_msg').html("");
action = 'inactive';
}
}
});
}
if(action == 'inactive')
{
action = 'active';
load_data(limit, start,line,slug);
}
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive')
{
lazy_load(limit);
action = 'active';
start = start + limit;
setTimeout(function(){
load_data(limit, start);
}, 1000);
}
});
});
</script>
**Controller**
public function fetch(){
$output ='';
$limit = $this->input->post('limit');
$start = $this->input->post('start');
$line = $this->input->post('line');
$slug = $this->input->post('slug');
$data = $this->Userfront_model->fetch_data($limit,$start ,$line,$slug);
if($data->num_rows() > 0){
foreach($data->result() as $row)
{
$output .= "<div class='post_data col-md-3 col-6'>
<a class='all-link--pro' href='" . site_url('product_view/' . $row->id . "/" . $row->slug ) . "'>
<img style='box-shadow: 0px 0px 22px 0px #616161' class='img-fluid img-size' src='" . base_url('assets/img/posts/' . $row->main_img) . " '>
<p>" . $row->title . "</p>
<p> <b>" . $row->uniquecode. "</b> </p>
<p>Rs " . $row->price. "</p>
</a>
</div>";
}
}
echo $output;
}
MODEL
function fetch_data($limit, $start,$line,$slug)
{
$this->db->order_by('cv_products.id', 'DESC');
$this->db->select('cv_products.*, cv_category.name as categoryname,product_line.id as lineid, product_line.name as linename,cv_category.id as category_id,delivery_time.id as deliverid, delivery_time.name as timingname' );
$this->db->join('cv_category','cv_category.id = cv_products.category', 'left');
$this->db->join('product_line','product_line.id = cv_products.product_line', 'left');
$this->db->join('delivery_time','delivery_time.id = cv_products.timing', 'left');
$this->db->from('cv_products');
$this->db->where('cv_products.product_line' , $line);
$this->db->where('product_line.slug' , $slug);
$this->db->limit($limit, $start);
$query = $this->db->get();
return $query;
}
I am able to fetch the first 8 products but unable to get the rest of the products while scrolling.
NOTE:
if i remove the where clause from model it work perfectly

Answer 1

You haven't passed the values line and slug to the function call load_data inside scroll method.
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive')
{
lazy_load(limit);
action = 'active';
start = start + limit;
setTimeout(function(){
load_data(limit, start, line, slug); // pass missing parameters here
}, 1000);
}
});