JS Ajax Load Scroller

Hello,

I’m having some trouble with by JS scroll to bottom loader. Everything in the PHP end and sql is working great. I store last ID for the last post, and on fetches load where ID is bigger, and store the ID again. I have a second function called fetch first that I’m working on, which loads the pages first posts on page load.

Right now I’m getting a proper response from the server, but there’s too many posts, as if JS is looping too many times.

There are three “sleuths” returned, but my page shows six.

Also my functions for attaching a posts comments and gathering their comment counts isn’t working right.

My Class

    function Community(){
	   
    this.fetch = function()
	{
		
			// ajax call to select x number of 
			
			var html = '';
			selfObj = this;
			
			$.ajax({
			  url: "php/handle_community_scroll_sleuths.php",
			  method:"POST",
			 dataType: "json"
			}).done(function( data ) {
				 
				 for(i = 0; i <= data.length; i++)
				 {

					 html += "<div class=\"sleuth\"> \
												<img class=\"img-circle\" src=\"images/profile.jpg\" height=\"34\" width=\"34\" /> \
												<span><b>"+data[i].username+"</b> > "+data[i].type+"</span><br><br> \
												<p class=\"sleuth-text\">"+data[i].description+"</p> \
												<p style=\"margin-top:12px;\"> \
													<a href=\"php/handle_like_sleuth.php?token="+data[i].token+"&username="+data[i].username+"&page=community\"><i style=\"margin-right:6px;\" class=\"fa fa-thumbs-o-up\"></i></a> " +data[i].likes+"<b style=\"margin-left:8px;\"></b> \
													<i style=\"margin-left:12px;\" class=\"fa fa-comment-o\"></i> <span id=\"commentscount"+data[i].token+"\"></span> \
													<i style=\"margin-left:12px; margin-right:4px;\" class=\"fa fa-retweet\"></i> repost \
													<i style=\"margin-left:12px; margin-right:4px;\" class=\"fa fa-retweet\"></i> page</p> \
												<hr> \
												<a href=\""+data[i].link+"\" target=\"_BLANK\" >"+data[i].title+"</a> \
												<hr> \
												<div id=\""+data[i].token+"\" class=\"comments\" style=\"overflow-y:scroll;max-height:24em;\"></div>";
												
									// Fetch comments for the sleuth
												
										html += "<hr> <form method=\"POST\" action=\"php/handle_comment_sleuth.php\"> \
												<textarea rows=\"4\" style=\"width:100%;\" name=\"comment\"></textarea> \
												<input type=\"hidden\" name=\"token\" value=\"TOKEN\" /> \
												<input type=\"hidden\" name=\"username\" value=\"USERNAME\" /> \
												<input style=\"float:right;margin-top:8px;\" class=\"btn btn-primary\" type=\"submit\" value=\"POST\" /> \
											</form> \
										<div style=\"clear:both;\"></div> \
									</div>";
							 		
									$('#sleuthswrapper').append(html);
										
									selfObj.fetch_comments_count(data[i].token);
									
									selfObj.fetch_sleuth_comments(data[i].token);

									selfObj.fetch_comment_comments_count(data[i].token);
										

									// Fetch comments and attach to  appropriate sleuth
									
					}
				
				
					// End fetch sleuths ajax
			  });
		
		
		// END Fetch Function
	};
	
	this.fetch_first = function()
	{
		// fetch first six objects and store last ID in class lastID	
				
			var html = '';
			var selfObj = this;
			// ajax call to select x number of records
			
			$.ajax({
			  method:"POST",
			  url: "php/handle_community_scroll_sleuths.php",
			  dataType: "json"
			}).done(function( data ) {
				
				 for(i = 0; i <= data.length; i++)
				 {
										
					 html += "<div class=\"sleuth\"> \
						<img class=\"img-circle\" src=\"images/profile.jpg\" height=\"34\" width=\"34\" /> \
												<span><b>"+data[i].username+"</b> > "+data[i].type+"</span><br><br> \
												<p class=\"sleuth-text\">"+data[i].description+"</p> \
												<p style=\"margin-top:12px;\"> \
													<a href=\"php/handle_like_sleuth.php?token="+data[i].token+"&username="+data[i].username+"&page=community\"><i style=\"margin-right:6px;\" class=\"fa fa-thumbs-o-up\"></i></a> " +data[i].likes+"<b style=\"margin-left:8px;\"></b> \
													<i style=\"margin-left:12px;\" class=\"fa fa-comment-o\"></i> <span id=\"commentscount"+data[i].token+"\"></span> \
													<i style=\"margin-left:12px; margin-right:4px;\"class=\"fa fa-retweet\"></i> repost \
													<i style=\"margin-left:12px; margin-right:4px;\" class=\"fa fa-retweet\"></i> page</p> \
												<hr> \
												<a href=\""+data[i].link+"\" target=\"_BLANK\" >"+data[i].title+"</a> \
												<hr> \
												<div id=\""+data[i].token+"\" class=\"comments\" style=\"overflow-y:scroll;max-height:24em;\"></div>";
												
									// Fetch comments for the sleuth
												
										html += "<hr> <form method=\"POST\" action=\"php/handle_comment_sleuth.php\"> \
												<textarea rows=\"4\" style=\"width:100%;\" name=\"comment\"></textarea> \
												<input type=\"hidden\" name=\"token\" value=\"TOKEN\" /> \
												<input type=\"hidden\" name=\"username\" value=\"USERNAME\" /> \
												<input style=\"float:right;margin-top:8px;\" class=\"btn btn-primary\" type=\"submit\" value=\"POST\" /> \
											</form> \
										<div style=\"clear:both;\"></div> \
									</div>";
							 		
									$('#sleuthswrapper').append(html);
										
									selfObj.fetch_comments_count(data[i].token);
									
									selfObj.fetch_sleuth_comments(data[i].token);

									selfObj.fetch_comment_comments_count(data[i].token);
				 				
				}		
		
					// End fetch sleuths ajax
			  }).error(function(request, error){
				  
				  alert(error);
				  
			  });
	
		// end fetch first
	};
	
	this.resetID = function()
	{
		
			$.ajax({
			  method:"POST",
			  url: "php/handle_community_scroll_reset.php",
			  dataType: "html"
			}).done(function( data ) {
				
				//alert('IN DONE');
				
					// End fetch sleuths ajax
			  }).error(function(request, error){
				  
				 // alert('IN ERRPR');
				  
			  });
		
		
	}

	this.fetch_comments_count = function(sleuthToken)
	{
			
			
		
		// fetch comments count
																		
		$.ajax({
			  url: "php/handle_fetch_sleuth_comment_count.php",
			  method:"POST",
			// dataType: "html",
			 data:{token:sleuthToken}
			}).done(function( commentsCountData ) {
										
				$('#commentscount' + sleuthToken).append(commentsCountData);
								
			});
		
		
	};
	
	this.fetch_sleuth_comments = function(sleuthToken)
	{
	
		
			$.ajax({
				url: "php/handle_community_fetch_sleuth_comments.php",
				 method:"POST",
				 dataType: "json",
				 data:{token:sleuthToken}
			}).done(function( commentData ) {
								
				if(data.length >= 1)
				{
											
												
					for(i = 0; i<commentData.length; i++)
					{
													
						var commentHtml = "<div class=\"comment\">" +
											"<h5><b>"+commentData[i].username+"</b></h5>" +
												"<p>"+commentData[i].comment+"</p>" +
											"<a href=\"php/handle_like_sleuth_comment.php?token="+commentData[i].token+"&page=community\"><i style=\"margin-right:4px;\" class=\"fa fa-thumbs-o-up\"></i></a><span>"+commentData[i].likes+" likes</span>" +
												"</div>";
										
						$('#'+sleuthToken).append(commentHtml);	
					
					}
											
												
				}		
									// End fetch comments ajax
			});	
		
		
	};
	
	this.fetch_comment_comments_count = function(sleuthToken)
	{
		
			// fetch comments count
																			
			$.ajax({
			  url: "php/handle_fetch_sleuth_comment_count.php",
			  method:"POST",
			// dataType: "html",
			data:{token:sleuthToken}
			}).done(function( commentsCountData ) {
									
				$('#commentscount' + sleuthToken).append(commentsCountData);
								
			});
		
	
	};
	
    }

Example return

array(3) {
  [0]=>
  array(20) {
    ["ID"]=>
    string(1) "1"
    [0]=>
    string(1) "1"
    ["username"]=>
    string(5) "Bob11"
    [1]=>
    string(5) "Bob11"
    ["title"]=>
    string(12) "BrainScratch"
    [2]=>
    string(12) "BrainScratch"
    ["link"]=>
    string(20) "http://www.brain.com"
    [3]=>
    string(20) "http://www.brain.com"
    ["description"]=>
    string(23) "Check out BrainScratch."
    [4]=>
    string(23) "Check out BrainScratch."
    ["likes"]=>
    string(1) "1"
    [5]=>
    string(1) "1"
    ["reposts"]=>
    string(1) "0"
    [6]=>
    string(1) "0"
    ["pageShares"]=>
    string(1) "0"
    [7]=>
    string(1) "0"
    ["datePosted"]=>
    string(19) "2017-04-20 18:26:53"
    [8]=>
    string(19) "2017-04-20 18:26:53"
    ["token"]=>
    string(24) "e0901c4b314b1350265aa0d3"
    [9]=>
    string(24) "e0901c4b314b1350265aa0d3"
  }
  [1]=>
  array(20) {
    ["ID"]=>
    string(1) "2"
    [0]=>
    string(1) "2"
    ["username"]=>
    string(5) "Bob11"
    [1]=>
    string(5) "Bob11"
    ["title"]=>
    string(12) "BrainScratch"
    [2]=>
    string(12) "BrainScratch"
    ["link"]=>
    string(13) "www.brain.com"
    [3]=>
    string(13) "www.brain.com"
    ["description"]=>
    string(7) "sleuth1"
    [4]=>
    string(7) "sleuth1"
    ["likes"]=>
    string(1) "0"
    [5]=>
    string(1) "0"
    ["reposts"]=>
    string(1) "0"
    [6]=>
    string(1) "0"
    ["pageShares"]=>
    string(1) "0"
    [7]=>
    string(1) "0"
    ["datePosted"]=>
    string(19) "0000-00-00 00:00:00"
    [8]=>
    string(19) "0000-00-00 00:00:00"
    ["token"]=>
    string(10) "hkholiuhoi"
    [9]=>
    string(10) "hkholiuhoi"
  }
  [2]=>
  array(20) {
    ["ID"]=>
    string(1) "3"
    [0]=>
    string(1) "3"
    ["username"]=>
    string(5) "Bob11"
    [1]=>
    string(5) "Bob11"
    ["title"]=>
    string(12) "BrainScratch"
    [2]=>
    string(12) "BrainScratch"
    ["link"]=>
    string(13) "www.brain.com"
    [3]=>
    string(13) "www.brain.com"
    ["description"]=>
    string(7) "sleuth2"
    [4]=>
    string(7) "sleuth2"
    ["likes"]=>
    string(1) "0"
    [5]=>
    string(1) "0"
    ["reposts"]=>
    string(1) "0"
    [6]=>
    string(1) "0"
    ["pageShares"]=>
    string(1) "0"
    [7]=>
    string(1) "0"
    ["datePosted"]=>
    string(19) "0000-00-00 00:00:00"
    [8]=>
    string(19) "0000-00-00 00:00:00"
    ["token"]=>
    string(10) "hkholiuhoi"
    [9]=>
    string(10) "hkholiuhoi"
  }
}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.