<< Click to Display Table of Contents >> Navigation:  Using script in HTML document > Usage examples > Infinite page

New portion is loaded when page is scrolled to bottom.

 

<style>
 body {font-family: Verdana; font-size: 10px}
 .fa {color: orange}
 .item {padding: 5px 5px}
</style>
 
<script type="passcript">
 
procedure showcustomers();
begin
 { Report code }
 s := '<report-objects><object name="cust" sql="select * from customer"/></report-objects>'+
  '{{#cust.ROWDATA}}'+
  '<div class="item"><i class="fa fa-user"/> {{COMPANY}}</div>'+
  '{{/cust.ROWDATA}}<div id="cust"></div>';
  s1 := RunHtReport(s, '<CONTEXT/>');
  $('#cust').html := s1;
  { clear id for old placeholder }

  $('#cust').first.Attr['id'] := '';
  document.refresh();
end;
 
procedure OnScroll();
begin
  if document.innerheight - document.scrolltop - 50 < window.innerheight then
    showcustomers();
end;
 
document.AddEventListener('scroll', onscroll);
 
</script>
 
<a onclick="showcustomers()">Show Customers</a>
<div id="cust"></div>