I have a scroll-to-load-content function, where
//s > selector which define the number of Sql results given by results.php?selector=s
jQuery.fn.ShowResults = function(t,s){
var loading = false; //to prevents multipal ajax loads
var track_load=0;
var total_groups=t;
$("#results").load("results.php?selector="+s, {'group_no':track_load},
function() { track_load++; });
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height())
{
if(track_load <= (total_groups-1) && loading==false)
/*I think that in this line is the clue*/
{
loading = true;
$.post("results.php?selector="+s, {'group_no':track_load}, function() {
$('#results').append(data);
track_load++;
loading = false;
});
}
}
}
}
$("#results").ShowResults(8,1);
$("#show1").on("click", function(e){ $("#results").ShowResults(8,1);});
$("#show2").on("click", function(e){ $("#results").ShowResults(6,2);});
$("#show3").on("click", function(e){ $("#results").ShowResults(4,3);});
I have by default selector=1;
<a id=show1>Show 1</a>
<a id=show2>Show 2</a>
<a id=show3>Show 3</a>
<ul id=results></ul>
PHP results.php?selector=1 would be
if($_POST)
{
$data_per_group=10; //each group return 10 records as maximun
$group_number = $_POST["group_no"];
$position = ($group_number * $data_per_group);
$s=$_GET['selector'];
if($s==1){$results=mysql_query("SELECT * WHERE condition1 LIMIT $position, $data_per_group");}
if($s==2){$results=mysql_query("SELECT * WHERE condition2 LIMIT $position, $data_per_group");}
if($s==3){$results=mysql_query("SELECT * WHERE condition3 LIMIT $position, $data_per_group");}
while($res=mysql_fetch_array($results)){
$data=$res['names'];
echo "<li>$data</li>";
}
}
the problem is that sometimes, it looks like the function is called twice, and shows the same results repeated like this
<ul id=results>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
I have tried to use event.preventDefault(); and event.stopPropagation(); with no solution
The question is how do I stop this function behaviour? It looks like that anytime I click the anchors, I call twice the same function and conflicts with the set by default. I was adviced to us mysql_fetch_row() but the problem is still on. update. After testing many times, I realize That it shows twice becouse of the scroll. I need to improve this lines if(track_load <= (total_groups-1) && loading==false) or maybe anytime I click an anchor the function takes the number of groups total_groups from the default release.
I did solve the issue, thanks to everyone who tried to help me.
the problem it was that anytime I click an anchor a, for some reason, the page still keept the prior value of total_groups.
jQuery.fn.ShowResults = function(t,s){
var total_groups=t;
setInterval( function(){alert(total_groups);},2000)
/*more coding*/
}
By default it was set selector=1 $("#results").ShowResults(8,1); .So when I clicked on a id=show2 $("#results").ShowResults(6,2);, it can be seen alerts ,setInterval(), showing different total_groups values, 8 & 6. And if I press a id=show3 $("#results").ShowResults(4,2);, the alert in one moment will display 8,6 & 4. Why this happens I still dont know.
so I decided to add $ajax({}); in order to obtain total_groups from another page total_groups.php?s=selector which returns the total_groups value only.
jQuery.fn.ShowResults = function(s){
$ajax({
type: 'POST',
url: "total_groups.php?s="+selector,
data: $(this).serialize(),
success: function(data) {
var total_groups=data; //I obtain total_groups by ajax now.
$("#results").load();
$(window).scroll(function() {
/*append data code*/
}//end load scroll
}//end success
});//end ajax
}//end function
So by using Ajax, the problem is finally solve.
Simply change track_load from 0 to 1.
The .load() request already gets the first 'track', yet the first $.post request requests track_load 0 again.