Vfrdtyky

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;">&nbsp;</span></p>';

                    output += '<p><span class="content-placeholder" style="width:90%; height: 80px;">&nbsp;</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

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);

       }

});