Geek Answers Handbook

Ajax load more button with different data

I use ajax on the button more load, but the problem occurs when I click the "Load more" button. I get the same data every time from content.php, which contains a mysql query to grab data from a table.

How can I get different data depending on the identifier from this table, initially there are ten rows, and when I click the download button more, the next 10 rows should be added with the data already available.

The data is added, but still the same data.
I also have a data identifier associated with the load more button, which is an identifier 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() ";
+5
source share
3 answers

There can be many possible ways to do this. one of them is: You can define the ajax counter call variable on the main page pass, associate with ajax and the selection result based on:

 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";

although you can change your ajax method to GET from POST when receiving data.

+2
source

Of course, you will always get the same data with this sql expression!

The first thing you need to do is try to pass the 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 easily capture this in php, for example, for example. $_POST['data']['contentid']

Than you have several options for getting the content you are looking for ....

Could limit the result

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

For example, you pass 0 as id, you get the first 10 results, when you pass 1, you get the next 10 results ... and so on ...

as i said, this is only one way to do this :)

+1
source

As I understand from what you wrote above, I have a very simple way to do 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 identifier for the button only if the request is successful, then get the variable in the php file and use it with or between the constraint, as u requires

+1
source

More articles:


All Articles