0

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.

Max
  • 116
  • 6
  • 2
    What you see when you enter directly to `results.php?selector=1`? – Vlad Gincher Oct 16 '16 at 20:10
  • I edited the question in order to let you know that – Max Oct 16 '16 at 20:13
  • What is the exact query? The problem is in that, because jQuery's `load` overrides the existing content, so even if it would be executed twice, it'll show the result of the last "execution". (sorry for my bad English `:(`) – Vlad Gincher Oct 16 '16 at 20:16
  • Its just a basic query, well in this question I tried to sumarize the function, but the real one is like this https://jsfiddle.net/mz40o542/1/ – Max Oct 16 '16 at 20:30
  • 2
    Please see [Why shouldn't I use mysql_* functions in PHP?](http://stackoverflow.com/questions/12859942/why-shouldnt-i-use-mysql-functions-in-php) – Spudley Oct 16 '16 at 20:38
  • How do you use the `group_no` in the query? – Vlad Gincher Oct 16 '16 at 20:40
  • https://jsfiddle.net/mz40o542/2/ please check this update. – Max Oct 16 '16 at 20:44
  • Is your query return the same result in phpmyadmin? If not then check your parameters passing to jquery fn. – G. Mansour Oct 17 '16 at 14:21
  • In phpmyadmin,everything goes well. the Jquery scroll function, sometimes shows twice the same content. this is the issue i would like to fix – Max Oct 17 '16 at 14:39

2 Answers2

0

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.

Vlad Gincher
  • 1,052
  • 11
  • 20
  • I think this is not the answer, I improved the question, please check it out – Max Oct 17 '16 at 13:17
  • Its not hard, the thing is I am focused in the `Jquery` mainly. The `selector` value determines which of the three statements have to be used. – Max Oct 17 '16 at 14:18
  • I added the `sql` arrangement, thanks you for helping. – Max Oct 17 '16 at 14:25
  • You tried my answer? Because in the second Ajax request the position is still 0. – Vlad Gincher Oct 17 '16 at 15:07
  • I did, the function works ok, but sometimes shows the results twice...this is the real problem – Max Oct 17 '16 at 15:17
0

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.

Max
  • 116
  • 6