无法使用ajax在codeigniter中获取延迟加载数据

eh57zj3b  于 2021-06-18  发布在  Mysql
关注(0)|答案(1)|浏览(384)

我在做一个电子商务网站。只是想实现延迟加载。我可以在第一次加载时获取数据,但如果向下滚动,则无法获取任何数据。


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

    }

模型

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

我可以得到前8个产品,但无法得到其余的产品,而滚动。注意:如果我从模型中删除where子句,它将非常有效

z18hc3ub

z18hc3ub1#

你还没有传递值 line 以及 slug 到函数调用 load_data 内部 scroll 方法。

$(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);
       }
});

相关问题