I am trying to use AJAX, JQuery, and Javascript to dynamically load data for a webpage, adding data once the user hits the bottom of the page. I am new to AJAX and Javascript, so forgive me if I'm missing something simple. From what I understand, the if statement in question is simply comparing the value of two variables. It succeeds a 4 times, then fails.
This is the code I currently have to test this:
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
console.log("Pagenum: "+$(".pagenum:last").val());
console.log("Totalpage: "+$(".total-page").val());
if($(".pagenum:last").val() <= $(".total-page").val()) {
var pagenum = parseInt($(".pagenum:last").val()) + 1;
console.log("Success!: "+pagenum);
getresult('getresult.php?page='+pagenum+'&dir='+"<?php echo $project; ?>");
}
}
});
The console.log outputs are simply for testing purposes. The problem I am having is with the second if statement:
if($(".pagenum:last").val() <= $(".total-page").val())
This is what the console output looks like when the user is interacting with this page:
Pagenum: 1
Totalpage: 37
Success!: 2
Pagenum: 2
Totalpage: 37
Success!: 3
Pagenum: 3
Totalpage: 37
Success!: 4
Pagenum: 4
Totalpage: 37
Pagenum: 4
Totalpage: 37
Pagenum: 4
Totalpage: 37
Pagenum: 4
Totalpage: 37
Pagenum: 4
Totalpage: 37
I cannot find a reason that this comparison between the value of pagenum and the value of total-page would fail after the 4th page, as the console seems to know the correct values of each.
QUESTION: Is there any reason that this might be happening, and how should I go about fixing it?
If there is any more information I can provide, or anything I can clarify, please comment and I will edit the question as best as I can.