Clash Royale CLAN TAG#URR8PPP

jQuery / Javascript loop increment value does not reset with .height compare (part of infinite scrolling script)

Objective is to call an ajax function to populate the screen with data until it reaches the bottom of the screen, then stop. The script works to populate the screen, but does not stop at the bottom (part of an infinite scrolling script).

The stop mechanism is a compare of window height to position of the last added data. If the bottom is reached, then set the "i" to 100, thus ending the loop.

I placed alert code to observe the values and sure enough, I see the #load_data.height point exceeding the window.height (means data loaded is past bottom of screen), but the "i" never gets set to 100 at that point.

I've tried placing the "stopping" code in 3 different places, but none of them seem to take.

Some insight into the problem would help, or suggest an alternative approach to continue ajax data loading until bottom of the screen is reached. Code below:

var myFunc01 = function(limit,start)
var i = 0;
while (i < 100)
(function(i)
setTimeout(function()
start=start+limit;
load_data(limit,start);//calls ajax routine to append data to #load_data

//alert is for checking purposes only to view "if" values
alert(
'window height:'+$(window).height()+'n'+
'load data height:'+$("#load_data").height()+'n'+
'value of i:'+i
);

if($("#load_data").height() > $(window).height())i=100;//this location does not work
, 1000 * i)
if($("#load_data").height() > $(window).height())i=100;//this location does not work
)(i++)
if($("#load_data").height() > $(window).height())i=100;//this location does not work

;

myFunc01(limit,start);


1 Answer
1

Thanks to Kevin B for giving me the hint to use a recursive function...it was so easy after that - one minute and 2 lines of code. I'll post my solution here in case someone in the future runs into this.

FYI - the more complete routine I have is an infinite/auto scroll, but the problem I had was the initial population of the page was based on a fixed number of data retreivals, say 10. If the end of the data landed on the middle of the page, the routine got stuck and the user would have to shrink the window and scroll past that point to auto load.

Yes, could have retrieved 100 and that would be past the bottom anyways, but that was not the goal here.

The fix is to my ajax function, which once initiated, calls itself until the bottom is reached and quits. The code I added to the bottom of the ajax call was:

start = start + limit;
if($("#load_data").height() < $(window).height())load_data(limit,start);


I noticed many web examples/tutorials of infinite scrolling do not address this issue of getting stuck on initial load if not past the page bottom. My script below:

<script>
$(document).ready(function()
var limit = 10;//number of records to autoload each time
var start = 0;//start at record 0
var action = 'inactive';//initial status to get initial load
function load_data(limit, start)
var loads;
$.ajax(
url:"questions_all_autoscroll_fetchdata.php",
method:"POST",
data:limit:limit, start:start,
cache:false,
success:function(data)
$('#load_data').append(data);
//checks if quantity "limit" amount loaded. If not, that means end of data reached.
//Each data piece has id="container", so counting them tells how many data pieces returned in "loads"
loads = $(data).filter('.container').length;
if(loads<limit)button_name = 'End of Data';elsebutton_name='Please Wait, Loading More...';
//append data returned to bottom of existing data
$('#load_data_message').html("<div id='please_wait' class='form-row text-center'>
<div class='col-12'><button type='button' class='btn btn-warning'>
"+button_name+"</button></div></div>");
action = "inactive";
//recursive part - keep loading data until bottom of screen reached, stop when reached, or when end of data
start = start + limit;
if(loads>=limit)
if($("#load_data").height() < $(window).height())load_data(limit,start);


);

//for initial loading of data to the bottom of page (through recursive load_data function
if(action == 'inactive')
action = 'active';
load_data(limit, start);

//autoload portion. when scrolling reaches bottom of screen, triggers another load of data
$(window).scroll(function()
if($(window).scrollTop() + $(window).height() > $("#load_data").height() && action == 'inactive')
action = 'active';
start = start + limit;
setTimeout(function()
load_data(limit, start);
, 1000);

);
);
</script>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.