succ: function keeps firing twice

[ebolt007]

Ok, so I have a script that loads all my data from another page. But most of the time, this ajax script fires twice if I have anything complex in my query. Or doesn't fire the No more posts to show at all. Here's my ajax.

<script type="text/javascript">
	$(window).scroll(function(){
	    if($(window).scrollTop() == $(document).height() - $(window).height()){
	    	$('div#loadmoreajaxloader').show();
			$.ajax({
				url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
				success: function(html){
					if(html){
						$("#postswrapper").append(html);
						$('div#loadmoreajaxloader').hide();
					}else{
						$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
					}
				}
			});
	    }
	});
</script>

 

And what I am doing, is say I have a main page with this on it, loading only 5 pokes.

 

         <div id="wrapper">
	                    <div id="postswrapper">
$page_query = mysql_query("
                         SELECT * FROM Users_Pokes WHERE ToID = '$user_ID' OR FromID = '$user_ID' order by DateSent desc LIMIT 0, 5");

                      	while ($poke_row = mysql_fetch_assoc($page_query))
                      	{
                          $poke_idmain = $poke_row['PokeMainID'];
<div class="postitem" id="<?echo $poke_idmain;?>"><?echo $poke_idmain;?></div>

}
</div>
	<div id="loadmoreajaxloader" style="display:none;"><center><img src="../main-site-images/ajax-loader2.gif" /></center></div>
</div>

then on my loadmore.php I have

 

if($_GET['lastid']){
               $mainID = $_GET['lastid'];
$page_query = mysql_query("
                         SELECT * FROM Users_Pokes WHERE ToID = '$user_ID' AND PokeMainID < '$mainID' OR FromID = '$user_ID' AND PokeMainID < '$mainID' order by DateSent desc LIMIT 0, 5");

                      	while ($poke_row = mysql_fetch_assoc($page_query))
                      	{
                         $poke_idmain = $poke_row['PokeMainID'];
<div class="postitem" id="<?echo $poke_idmain;?>"><?echo $poke_idmain;?></div>
}

 

This works fine, but when I put in different tables where I am echoing the $poke_idmain and if my page gets kind of complex, it sends the ajax twice. I have tried echoing the html ufing alert(html); in the if html, and whenever I scroll my page to the bottom, it fires this twice when I put it in like

<script type="text/javascript">
	$(window).scroll(function(){
	    if($(window).scrollTop() == $(document).height() - $(window).height()){
	    	$('div#loadmoreajaxloader').show();
			$.ajax({
				url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
				success: function(html){

					if(html){

						$("#postswrapper").append(html);
						$('div#loadmoreajaxloader').hide();
					}else{
					alert(html);
						$('div#loadmoreajaxloader').html('<center>No more posts to show.</center>');
					}
				}
			});
	    }
	});
</script> 

 

Any idea why this would fire twice most of the time, or not fire the No more posts to show? I have tediecly checked all of my tags to make sure all my div's and tables match up, and this doesn't fix it.

Thanks

 

[DavidAM]

I'm not an expert with JS, but could it be that making the "loadmore" DIV visible is causing the page to shift, thereby firing the scroll event?

 

 

On a side note, that query in your loadmore function is not doing what you think it is.

 

SELECT * FROM Users_Pokes 
WHERE ToID = '$user_ID' AND PokeMainID < '$mainID' OR FromID = '$user_ID' AND PokeMainID < '$mainID' 
order by DateSent desc LIMIT 0, 5

 

AND and OR have the same precedence, so that WHERE clause is evaluated left to right. At the very least, you should add a couple of sets of parenthesis in there:

 

SELECT * FROM Users_Pokes 
WHERE (ToID = '$user_ID' AND PokeMainID < '$mainID') 
OR (FromID = '$user_ID' AND PokeMainID < '$mainID') 
order by DateSent desc LIMIT 0, 5

 

Although it could be written as:

SELECT * FROM Users_Pokes 
WHERE (ToID = '$user_ID' OR FromID = '$user_ID') AND PokeMainID < '$mainID' 
order by DateSent desc LIMIT 0, 5

 

or even:

 

SELECT * FROM Users_Pokes 
WHERE '$user_ID' IN (ToID, FromID) AND PokeMainID < '$mainID' 
order by DateSent desc LIMIT 0, 5

 

[ebolt007]

Cool thanks for the tips on the brackets in mysql, but I'm not sure how to get the loadmore div to not be visible for so long so it doesn't stay available in the js? When I alert the html in the javascript, it displays without any content at all when I get thru all of my SQL Selects which is when it should show the <center>No more posts to show.</center> but it doesn't show this all the time, sometimes it does, sometimes it doesn't. And sometimes it will load twice so if the next POSTID's are 15, 16, 17, 18 .... it will show these twice when the function calls.

[DavidAM]

1) In development, comment out the JS that shows the loadmore DIV. See if that solves the double request issue. If it does, we should be able to figure a way to show it without causing it to scroll the page. If it does not solve the issue, we can look elsewhere.

 

2) maybe the loadmore.php script is outputting some blank spaces or something. Try an alert (before the if (html) statement) with delimiters:

alert("|" + html + "|");

if you see anything at all (including blank space) between the two pipes, then the problem may be with the PHP script.

[ebolt007]

Ok that fixed the center>No more posts to show.</center> and that works on EVERY page now, YAY! I had a space at the end of my loadmore.php file which is why it didn't finish the ajax on a few pages, HOWEVER, it still loads twice pretty much everywhere, but only if it has a table involved with it it seems. I did a test by adding a table, and removing a table, and this was the only change, and this fixed the double posts when I didn't have a table in it, as opposed to if a table was in the loadmore.php file. But I need to use tables for the formatting piece I'm setting up.

 

 

[ebolt007]

Figured this out, it couldn't tell the height of my body, so I had to wrap the wrapper in a body div tag and set the minimum height for that for it to only show once, otherwise it saw the height a few times and reloaded. Thanks for the help and extra tips tho DavidAM.