Page 1 of 4

Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 8:45 am
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.

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 8:49 am
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.

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 8:58 am
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.

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 9:25 am
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.

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 9:32 am
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.

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 9:39 am
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.

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 9:42 am
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.

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 9:51 am
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?

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 10:11 am
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.

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 10:18 am
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...?

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 10:24 am
by Celauran
Why wouldn't the order work? Are you using some sort of ordering function in PHP rather than SQL's ORDER BY?

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 10:27 am
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).

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 10:28 am
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/

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 10:58 am
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?

Re: Automatic page adding more items, ajax pagination?

Posted: Tue Jul 14, 2015 11:00 am
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.