Load Data on Page Scroll in CodeIgniter 4 using Ajax jQuery

Hi guys. I need help to load data as user scrolls down. I have searched online for a solution that suites the way i am displaying the data with no luck. Not even sure if what am trying is possible. 

I have a controller that returns all the companies in the database as follows 

PHP Code:

public function getAllCompanies()
    {
        $this->response->setHeader('Access-Control-Allow-Origin', '*')
        ->setHeader('Access-Control-Allow-Headers', '*')
        ->setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');
      
        $vmodel = new CompaniesModel();
      

        $response = $vmodel->getAllCompanies();


        if($response){
            return $this->respondCreated($response);
        }
        else{
            $error = "No Data Found";
            return $this->fail($error, 400);
        }

    } 


Then on the view i use Ajax and Jquery to retrieve and display the results as follows 

Code:

$(document).ready(function(){

  var url = "<?= base_url()?>/CompanyProfile/getAllCompanies";
       
        console.log(url);
        $.ajax({
                        type: "GET",
                        url: url,
                        dataType: 'JSON',
                        beforeSend: function () {
                            $('#loader').show();
                        },
                        success: function (response) { 
                             
var  i;
document.getElementById("searchpreview").innerHTML = "";
for (i = 0; i < response.length; i++) {


  var content  = "<div class='col-lg-4 col-md-6' style='padding-top:20px;'>";
  content += "<div class='service-item  position-relative'>";
  content += "<a  id='view-business'  data-value='" + response[i].companyId ;
  content += "'><img style='height:30px;' src='https://portal.example.com/public/uploads/profile/"+ response[i].logoname;
  content += "' alt='Card image cap'></a><div class='card-body'>";
  content += "<h3 class='card-title'>" + response[i].companyname;
  content += "</h3><h6> " + response[i].category;
  content +=" </h6><p class='card-text'>" + response[i].description.slice(0,120);
  content += "</p>";
  content += "<div style='text-align:center;'><a  class='btn btn-secondary'  id='view-business'  data-value='" + response[i].companyId ;
  content += "'>View Company Profile</a></div></div>";
  content += "</div>";
  content += "</div>";

  document.getElementById("searchpreview").innerHTML += content;

   
  }
                        },
                        complete: function () {
                            $('#loader').hide();
                        },
                   
                        error: function () {
                            console.log('failed request!');
                        }
                    });
       
 
});

Then on the view i have a div that prints results that have been returned. So on posts i have search online mostly they are for handling data passed to the view from controller using php pagination function. Is it possible for me to get the same auto loader using the method i have illustrated above? 

This is the div that prints results 

Code:

<div class="row" id="searchpreview" style="padding-top:10px;"></div>




I am here because i dont know where to start but this feature would be nice to have. Thanks in advance 

This may help you out.

jQuery load more data on scroll

What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

This may help you out.

jQuery load more data on scroll

Thank you so much. I try it out and revert with results. Much appreciated Fam

This may help you out.

jQuery load more data on scroll

Thank you so much for pointing me to the right direction. Managed make it work using the implementation you suggested i look at. This is what work for me. I really appreciate your help. Thank you. 

var flag = 0;
var scrollLoad = true;

Code:

$(window).scroll(function() {
    if (scrollLoad && ($(document).height() - $(window).height())-$(window).scrollTop()<=200){         
    // ajax call get data from server and append to the div
          scrollLoad = false;  
    }
});
setInterval(function () {scrollLoad = true;}, 1000);

It would be great to have more hints about using HTMX in the Codeigniter 4+ apps
e.g. for who experimented with HTMX: is it possible to achieve what in the topic start with HTMX?
Thank you