Automatic page adding more items, ajax pagination?

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Automatic page adding more items, ajax pagination?

Post by simonmlewis »

I've been asked to start looking at pages where as you scroll down to the bottom of the page, it then loads more content. ie. A category page.

So you open it and you get to the bottom and them more load... get to the bottom and more load... etc.

Not sure what the technical PHP term is for it. I have done some reading, but all the tutorials I can find are based on ID number in a set order. But we sort things into Price and A-Z. So doing that via an external file probably won't work.

Not sure where to start, as what I have found wasn't helpful.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Automatic page adding more items, ajax pagination?

Post by Celauran »

The term you're looking for, I believe, is infinite scroll. It doesn't really matter what you sort on. Once you get to the bottom of the page, fire an AJAX call to fetch the next set of results and update the DOM with the response.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Automatic page adding more items, ajax pagination?

Post by simonmlewis »

Sorry Ive no idea how you "fire an AJAX call and fetch the next set and update the DOM".
Hence why I am learning this from new.

I don't know if I need to redo my main query that calls on the info, with a limit of 0,60 or what.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Automatic page adding more items, ajax pagination?

Post by simonmlewis »

I think you mean that it fires and AJAX query which updates the main top query?

Code: Select all

$query = ("SELECT * FROM products WHERE catid = :c AND pause = 'off'  ORDER BY rcstock ASC, $order LIMIT $offset, $rowsPerPage");
$result = $pdo->prepare($query);
$result->execute(array(':c' => $_GET['c']));
So it would updated $rowPerPage. But surely it needs to load more rather than turn over. Not sure how that is accomplished.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Automatic page adding more items, ajax pagination?

Post by Celauran »

I don't know what "updates the main top query" means. What you want to do is keep track of the number of results you're currently displaying and pass that to your query as the new offset. It's not meaningfully different from how you'd treat ?page=2, it's just done asynchronously. I don't know what your code looks like, but I suspect you'll need to create some new functionality to handle this. Wrap the query in a function, accept offset and limit as parameters, that sort of thing.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Automatic page adding more items, ajax pagination?

Post by simonmlewis »

Code: Select all

$show = isset($_REQUEST['show']) ? $_REQUEST['show'] : null;
if (isset($show))
{
$rowsPerPage = $show;
}
else
{	  
if ( $detect->isMobile() && !$detect->isTablet() ) {
	  // how many rows to show per page
$rowsPerPage = 30;
}
else
{
	  // how many rows to show per page
$rowsPerPage = 60;
}
}

// by default we show first page
$pageNum = 1;
 
// if $_GET['pagenum'] defined, use it as page number
if(isset($_GET['pagenum']))
{
    $pageNum = $_GET['pagenum'];
}
$query = ("SELECT * FROM products WHERE catid = :c AND pause = 'off'  ORDER BY rcstock ASC, $order LIMIT $offset, $rowsPerPage");
$result = $pdo->prepare($query);
$result->execute(array(':c' => $_GET['c']));
This is my main top query that loads up the products.
It's changing how many are shown based on device.

I wouldn't know how to alter this using jQuery etc to update it and load more, without making the page turn over.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Automatic page adding more items, ajax pagination?

Post by Celauran »

You'll likely want to create a separate endpoint for that, one specifically to handle the AJAX request. Rather than loading a page as such, it just fetches the results from the DB, iterates through the rows applying whatever logic you may need, and returns either an array of results or pre-rendered markup.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Automatic page adding more items, ajax pagination?

Post by simonmlewis »

You'll likely want to create a separate endpoint for that, one specifically to handle the AJAX request. Rather than loading a page as such, it just fetches the results from the DB, iterates through the rows applying whatever logic you may need, and returns either an array of results or pre-rendered markup.
Let's try and break this down.
You'll likely want to create a separate endpoint for that
How? What is an Endpoint?
Rather than loading a page as such, it just fetches the results from the DB
Is this done in an external file, or within the same page (give that it still needs to sort it)?
and returns either an array of results or pre-rendered markup
Where in the code does it do this - at the end, or is there only the "end point" code at the bottom?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Automatic page adding more items, ajax pagination?

Post by Celauran »

simonmlewis wrote:
You'll likely want to create a separate endpoint for that
How? What is an Endpoint?
It's just a URI. /products/all, /products/1234/view, etc
simonmlewis wrote:
Rather than loading a page as such, it just fetches the results from the DB
Is this done in an external file, or within the same page (give that it still needs to sort it)?
Depends on your codebase. You'll probably want an external file.
simonmlewis wrote:
and returns either an array of results or pre-rendered markup
Where in the code does it do this - at the end, or is there only the "end point" code at the bottom?
You're sending the results back to the jQuery callback and updating the DOM via JavaScript. The function or page script that your AJAX request calls will echo either HTML (if you're creating the markup server side), or a JSON encoded array of results if you're creating the markup client side.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Automatic page adding more items, ajax pagination?

Post by simonmlewis »

I dont know JSON at all.
The bit that mostly puzzles me, apart from how these additional results magically as u hit the bottom of the page, is how the order can still work. If you load up a ton of data, and then sort by Title, does that get pass back to the variables in the external *.php file?

Is there a good tutorial page on this that might help?

http://www.1stwebdesigner.com/infinite- ... -tutorial/
I've been looking at this, but I am still rather puzzled. But is it on the right track?

For example, at the top of index.php in the download, there is this:

Code: Select all

$result = mysql_query("select SQL_CALC_FOUND_ROWS * from scroll_images order by id asc limit 12");

$row_object = mysql_query("Select Found_Rows() as rowcount");
$row_object = mysql_fetch_object($row_object);
$actual_row_count = $row_object->rowcount;
So do I just alter than to be my current code:

Code: Select all

$query = ("SELECT * FROM products WHERE catid = :c AND pause = 'off'  ORDER BY rcstock ASC, $order LIMIT $offset, $rowsPerPage");
But as a count...?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Automatic page adding more items, ajax pagination?

Post by Celauran »

Why wouldn't the order work? Are you using some sort of ordering function in PHP rather than SQL's ORDER BY?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Automatic page adding more items, ajax pagination?

Post by simonmlewis »

No I'm not. But when you are talking of external files, I didnt' know if that would feed thru to the ext. file.

Did you look at that page for me - is it a good guide? As I am still lost.
The only AJAX I have ever done is via a search box (similar to Facebok search).
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Automatic page adding more items, ajax pagination?

Post by Celauran »

simonmlewis wrote:Is there a good tutorial page on this that might help?
There are countless infinite scroll tutorials out there. This one doesn't look completely terrible: http://www.smarttutorials.net/infinite- ... and-mysql/
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Automatic page adding more items, ajax pagination?

Post by simonmlewis »

[text]Then download bootstrap and jQuery files and add in their respective css and js directories[/text]
What bootstrap and jQuery files, from where?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Automatic page adding more items, ajax pagination?

Post by Celauran »

Bootstrap is just some boilerplate CSS that you don't need. You're already using jQuery, aren't you? I don't think you need to worry about either of those.
Post Reply