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;"> </span></p>';
output += '<p><span class="content-placeholder" style="width:100%; height: 100px;"> </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.
each ajax request, i just get same resultlike only fetch post 1-5