Automatic page adding more items, ajax pagination?
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?
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.
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.
All the best from the United Kingdom.
Re: Automatic page adding more items, ajax pagination?
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?
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.
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.
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?
I think you mean that it fires and AJAX query which updates the main top query?
So it would updated $rowPerPage. But surely it needs to load more rather than turn over. Not sure how that is accomplished.
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']));Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Automatic page adding more items, ajax pagination?
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?
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']));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.
All the best from the United Kingdom.
Re: Automatic page adding more items, ajax pagination?
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?
Let's try and break this down.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.
How? What is an Endpoint?You'll likely want to create a separate endpoint for that
Is this done in an external file, or within the same page (give that it still needs to sort it)?Rather than loading a page as such, it just fetches the results from the DB
Where in the code does it do this - at the end, or is there only the "end point" code at the bottom?and returns either an array of results or pre-rendered markup
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Automatic page adding more items, ajax pagination?
It's just a URI. /products/all, /products/1234/view, etcsimonmlewis wrote:How? What is an Endpoint?You'll likely want to create a separate endpoint for that
Depends on your codebase. You'll probably want an external file.simonmlewis wrote:Is this done in an external file, or within the same page (give that it still needs to sort it)?Rather than loading a page as such, it just fetches the results from the DB
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 wrote:Where in the code does it do this - at the end, or is there only the "end point" code at the bottom?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?
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:
So do I just alter than to be my current code:
But as a count...?
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;Code: Select all
$query = ("SELECT * FROM products WHERE catid = :c AND pause = 'off' ORDER BY rcstock ASC, $order LIMIT $offset, $rowsPerPage");Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Automatic page adding more items, ajax pagination?
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?
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).
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.
All the best from the United Kingdom.
Re: Automatic page adding more items, ajax pagination?
There are countless infinite scroll tutorials out there. This one doesn't look completely terrible: http://www.smarttutorials.net/infinite- ... and-mysql/simonmlewis wrote:Is there a good tutorial page on this that might help?
-
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?
[text]Then download bootstrap and jQuery files and add in their respective css and js directories[/text]
What bootstrap and jQuery files, from where?
What bootstrap and jQuery files, from where?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: Automatic page adding more items, ajax pagination?
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.