Ajax 無限滾動 Codeigniter

Question

我正在使用 codeigniter 在我的旅行社網站上工作。 我想在我的旅游或博客列表頁面上使用無限滾動，每次滾動頁面時我想獲取 5 個項目，但是當 ajax 發送請求時，我一次只能獲取一個數據..

這是我的 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;
 }

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

這是博客列表頁面，其中 jquery ajax 代碼

<!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>

這是視圖 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>

這里的問題是“每次 ajax 發送請求時，它只會得到一個響應結果..”

但是“如果我直接在 controller 中編寫“view_blog_grid1.php”的 html 代碼，那么它會按預期工作。

但我不想讓 controller 亂用很多 html 代碼，而且我有多個網格模板，如 grid1、grid2、....，我想動態加載。

Answer 1

問題就在這里

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

您正在為 output 設置新值，這只會導致 foreach 循環中的最后(5th) ，

要解決這個問題，只需 append 將$this->load->view('themes/ui/blogs/blog_grid1',$data,true)轉換為$output變量

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

NB* .=運算符的意思是 append 等於：

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

Ajax 無限滾動 Codeigniter

問題描述

1 個解決方案

解決方案1
2 已采納 2020-06-23 05:15:14

Ajax 無限滾動 Codeigniter

問題描述

1 個解決方案

解決方案1 2 已采納 2020-06-23 05:15:14

解決方案1
2 已采納 2020-06-23 05:15:14