ajax load more button with different data

Question

I am using ajax on a load more button but the problem is whenever I click on load more button I am getting the same data every time from content.php which contains a mysql query to grab data from table.

How can I get different data depending on id from that table that is initially ten rows are present and when I click on load more button next 10 rows should be appended with the data already present.

Data gets appended but it is the same data all the times.
I also have data-id associated with load more button which is the id associated with the last element of the initially present element.

var collegename=$(this).attr("value");  
var contentid=$(this).attr("data-id"); 

$.ajax({
    type: "post",
    url: "content.php",
    data: 'contentid='+contentid+'&collegename='+collegename,
    dataType: "text",                  
    success: function(response) {
        var $loaderImg =  $(this).parent().find(".loadingdata").hide();
        $content.html(response).prepend($loaderImg);
     }
});

//content.php

$collegename     = isset($_POST["collegename"]) ? $_POST["collegename"] : 0;
$query= "SELECT * FROM ".$collegename." ORDER BY rand() ";

You need to send an offset to the PHP script. If `i=0` then send `i+n` back to the server, where `n` is the number of items that were previously loaded. — Sverri M. Olsen, Aug 28 '15 at 05:31
where do you use contentid? and why you passing data with POST but your data string looks more like a GET? you may should pass a object there like `data: { contentid : contentid, collegename : collegename },` but if its work.. ok ^^ by the way... of course you allways will get the same result with that SQL-Statement!!! — Dwza, Aug 28 '15 at 05:37
that is why i want to use contentid so that i can get different data @Dwza — , Aug 28 '15 at 05:43
http://stackoverflow.com/questions/3705318/simple-php-pagination — mplungjan, Aug 28 '15 at 05:48
i even tried with help of this php-pagination link ,but problem with that is my masonary doesnt work though data displays@mplungjan — , Aug 28 '15 at 05:51

score 2 · Accepted Answer · answered Aug 28 '15 at 05:49

2

There could be many possible ways to do it. one of them is: You can define a counter ajax call variable in main page pass , bind with ajax and fetch result based on it like:

var countAjaxHit = 0 ; 
$.ajax({
    type: "post",
    url: "content.php",
    data: 'contentid='+contentid+'&collegename='+collegename+'&countAjaxHit='+countAjaxHit,
    dataType: "text",                  
    success: function(response) {
        var $loaderImg =  $(this).parent().find(".loadingdata").hide();
        $content.html(response).prepend($loaderImg);
    countAjaxHit = countAjaxHit + 1;
     }
});

//content.php

$collegename     = isset($_POST["collegename"]) ? $_POST["collegename"] : 0;
$countAjaxHit     = isset($_POST["countAjaxHit"]) ? $_POST["countAjaxHit"] : 0;
if($countAjaxHit==0)
{
    $countAjaxHit++;
}
else
{
    $countAjaxHit=$countAjaxHit+10;
}
$query= "SELECT * FROM ".$collegename." WHERE 1=1 LIMIT ".$countAjaxHit.", 10";

though you can change you ajax method to GET from POST as you getting data.

answered Aug 28 '15 at 05:49

Yogendra

2,139
3
14
27

1

i guess you might be wront in setting your limit.... first hit brings up result 11 to 12, next hit will bring up result 11 to 13 and so on... – Dwza Aug 28 '15 at 05:54
i worked with the limit also, first hit brings 5 items and next brings next 5 items appended with the previous ones@Dwza – Aug 28 '15 at 05:57
thats what I sayed... but since this offset is 10 you might miss the first 10 hits.. but in the end its like selecting the data again and again. This is good if you select data once... but since you are using ajax, I expact you want to select parts and put them self together... like select 1-5 and append, select 6-10 and append to the last result.... – Dwza Aug 28 '15 at 06:01
@Dwza, On first ajax hit LIMIT would be 0, 10 then it would bring 10 record. in second LIMIT would be 11, 10 then it would bring 10 record starting from 11 offset i think it's right – Yogendra Aug 28 '15 at 06:02
OOOOHHH SORRY!!! i missed the syntax :D i was wrong SRY SRY SRY!! :D its LIMIT offset, count not LIMIT count, offset and surly LIMIT count ^^ – Dwza Aug 28 '15 at 06:04
btw a shorthand for `$countAjaxHit=$countAjaxHit+10;` is `$countAjaxHit+=10;` – Dwza Aug 28 '15 at 06:05
What happens .. during the time when you click the Load more button with the Limit and Offset and new data was added to the database? How to resolve the issue where there may be duplicated item being appended to the user browser? – Someone Special Feb 13 '17 at 07:26

Dwza · Answer 2 · 2015-08-28T06:04:35.763

Of course you will allways get the same data with that sql statement!

First thing you should do is, try to pass data as an object....

$.ajax({
    type: "post",
    url: "content.php",
    data: { 
            contentid:   contentid, 
            collegename: collegename 
          },                 
    success: function(response) {
        var $loaderImg =  $(this).parent().find(".loadingdata").hide();
        $content.html(response).prepend($loaderImg);
     }
});

than you can easy grab this on php like e.g. $_POST['data']['contentid']

Than you have more than one option to get the content you are looking for....

One would be to limit you result

$amount = 10;
$offset = ($_POST['data']['contentid']?$_POST['data']['contentid']*$amount:0);
$query  = "SELECT * FROM ".$collegename." LIMIT {$offset}, {$amount} ";

E.g you pass 0 as id, you will get the first 10 results, when you pass 1 you will get the next 10 results... and so on...

like i sayed, thats only one way to do it :)

score 1 · Answer 3 · answered Aug 28 '15 at 14:01

As i understood from what you wrote above i have a very simple way of doing this

var collegename=$(this).attr("value");  
$a = $(this).attr('data-id');  //this will get the data-id
var contentid=$a; //$a assigned to variable for passing to php file

$.ajax({
    type: "post",
    url: "content.php",
    data: 'contentid='+contentid+'&collegename='+collegename,
    dataType: "text",                  
    success: function(response) {
        var $loaderImg =  $(this).parent().find(".loadingdata").hide();
        $content.html(response).prepend($loaderImg);
        $a=$a-5;  
        $('.button').attr('data-id', $a); 
     }
});

this will assign a new value to the data-id of button only if the request is a success and then get the variable in php file and use it with limit or between as u require

ajax load more button with different data

3 Answers3