Page 2 of 4
Re: Automatic page adding more items, ajax pagination?
Posted: Tue Jul 14, 2015 11:16 am
by simonmlewis
Mmmm I Was having difficulties, and then found this one which I think is similar.
http://www.w3bees.com/2013/09/jquery-in ... mysql.html
But in the PHP and HTML section, there is this:
Code: Select all
<?php
include('config.php');
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
# sql query
$sql = "SELECT * FROM actor_info ORDER BY id DESC";
# find out query stat point
$start = ($page * $limit) - $limit;
# query for page navigation
if( mysql_num_rows(mysql_query($sql)) > ($page * $limit) ){
$next = ++$page;
}
$query = mysql_query( $sql . " LIMIT {$start}, {$limit}");
if (mysql_num_rows($query) < 1) {
header('HTTP/1.0 404 Not Found');
echo 'Page not found!';
exit();
}
?>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Load While Scroll</title>
</head>
<body>
<div class="wrap">
<h1><a href="#">Data load while scroll</a></h1>
<!-- loop row data -->
<?php while ($row = mysql_fetch_array($query)): ?>
<div class="item" id="item-<?php echo $row['id']?>">
<h2>
<span class="num"><?php echo $row['id']?></span>
<span class="name"><?php echo $row['first_name'].' '.$row['last_name']?></span>
</h2>
<p><?php echo $row['film_info']?></p>
</div>
<?php endwhile?>
<!--page navigation-->
<?php if (isset($next)): ?>
<div class="nav">
<a href='index.php?p=<?php echo $next?>'>Next</a>
</div>
<?php endif?>
</div><!--.wrap-->
</body>
</html>
This bit:
Code: Select all
<a href='index.php?p=<?php echo $next?>'>Next</a>
IS wrong for me as the url would be .co.uk/categ/532/tshirts.
So how would I adjust this to work? AS at the moment, the animation is running at the bottom but nothing is adding to the screen. And yes, I do have the JS and CSS files referenced.
Re: Automatic page adding more items, ajax pagination?
Posted: Tue Jul 14, 2015 11:23 am
by Celauran
It's just using the p query parameter to fetch the next set of results, so you can just append that to your current URL
Re: Automatic page adding more items, ajax pagination?
Posted: Tue Jul 14, 2015 11:38 am
by simonmlewis
This is my code at the moment.
While the animation runs, and the URL at the top changes to /2/, nothing further is loading.
Code: Select all
<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/infinite-scroll/jquery-ias.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.wrap', // main container where data goes to append
item: '.item', // single items
pagination: '.nav', // page navigation
next: '.nav a', // next page selector
loader: '<img src="/js/infinite-scroll/ajax-loader.gif"/>', // loading gif
triggerPageThreshold: 3 // show load more if scroll more than this
});
});
</script>
<link rel="stylesheet" media="all" href="/js/infinite-scroll/style.css">
<?php
include('dbconn.php');
$limit = 10; #item per page
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
# sql query
$sql = "SELECT * FROM products WHERE catid = '532' ORDER BY id DESC";
# find out query stat point
$start = ($page * $limit) - $limit;
# query for page navigation
if( mysql_num_rows(mysql_query($sql)) > ($page * $limit) ){
$next = ++$page;
}
$query = mysql_query( $sql . " LIMIT {$start}, {$limit}");
if (mysql_num_rows($query) < 1) {
header('HTTP/1.0 404 Not Found');
echo 'Page not found!';
exit();
}
?>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Load While Scroll</title>
</head>
<body>
<div class="wrap">
<h1><a href="#">Data load while scroll</a></h1>
<!-- loop row data -->
<?php while ($row = mysql_fetch_array($query)): ?>
<div class="item" id="item-<?php echo $row['id']?>">
<h2>
<span class="num"><?php echo $row['id']?></span>
<span class="name"><?php echo $row['title'].' '.$row['catname']?></span>
</h2>
<p><?php echo $row['subname']?></p>
</div>
<?php endwhile?>
<!--page navigation-->
<?php if (isset($next)): ?>
<div class="nav">
<a href='/infinite-scroll?p=<?php echo $next?>'>Next</a>
</div>
<?php endif?>
</div><!--.wrap-->
</body>
</html>
Re: Automatic page adding more items, ajax pagination?
Posted: Tue Jul 14, 2015 11:47 am
by Celauran
Missing a colon in your jQuery script tag. http//
Re: Automatic page adding more items, ajax pagination?
Posted: Tue Jul 14, 2015 11:58 am
by simonmlewis
Fantastic, that's got it.
Why does it load some automatically, and then after two lots, says "Load more Items" as a button?
Re: Automatic page adding more items, ajax pagination?
Posted: Tue Jul 14, 2015 12:31 pm
by Celauran
That's controlled by triggerPageThreshold setting, so you can set that to whatever you like.
Re: Automatic page adding more items, ajax pagination?
Posted: Tue Jul 14, 2015 1:38 pm
by simonmlewis
I've worked out a few things on this, and gradually getting it CSS'd up, but one odd issue.
Every 4 DIVs I am removing the right margin, but it seems to get to 30 and then start over.
I'm naming my count as $count, and that is not used elsewhere as far as I can see.
After the while, I am entering the $count ++.
Is it because after 30 it is kind of "reloading" it, so starting over? If so, how do I hold that $count, so it is used throughout?
Code: Select all
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/infinite-scroll/jquery-ias.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.wrap', // main container where data goes to append
item: '.item', // single items
pagination: '.nav', // page navigation
next: '.nav a', // next page selector
loader: '<img src="/js/infinite-scroll/ajax-loader.gif"/>', // loading gif
triggerPageThreshold: 3 // show load more if scroll more than this
});
});
</script>
<link rel="stylesheet" media="all" href="/js/infinite-scroll/style.css">
<?php
include('dbconn.php');
$limit = 30; #item per page
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
# sql query
$sql = "SELECT * FROM products WHERE catid = '532' ORDER BY id DESC";
# find out query stat point
$start = ($page * $limit) - $limit;
# query for page navigation
if( mysql_num_rows(mysql_query($sql)) > ($page * $limit) ){
$next = ++$page;
}
$query = mysql_query( $sql . " LIMIT {$start}, {$limit}");
if (mysql_num_rows($query) < 1) {
header('HTTP/1.0 404 Not Found');
echo 'Page not found!';
exit();
}
$count = 0;
?>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Load While Scroll</title>
</head>
<body>
<div class="wrap">
<!-- loop row data -->
<?php while ($row = mysql_fetch_array($query)):
$title = $row['title'];
$findtitle ="/ /";
$replacetitle ="-";
$titlereplace = preg_replace ($findtitle, $replacetitle, $title);
$categ = $row['catname'];
$findcateg ="/ /";
$replacecateg ="-";
$categreplace = preg_replace ($findcateg, $replacecateg, $categ);
$subcateg = $row['subname'];
$findsubcateg ="/ /";
$replacesubcateg ="-";
$subcategreplace = preg_replace ($findsubcateg, $replacesubcateg, $subcateg);
$count ++;
?>
<div class="home_popular"<?php
if (($count % 4) == 0)
{
echo "style=' margin-right: 0px'";
}
echo "id='item-$row[id]'>
<img src='http://www.site.co.uk/images/productphotos/small/$row[photoprimary]' alt='$row[title]' />";
?>
<span class='home_popular_title'><?php echo $row['title']?></span>
<span class='home_popular_title'><?php echo $count;?></span>
</div>
<?php endwhile?>
<!--page navigation-->
<?php if (isset($next)): ?>
<div class="nav">
<a href='/infinite-scroll?p=<?php echo $next?>'>Next</a>
</div>
<?php endif?>
</div><!--.wrap-->
</body>
</html>
Re: Automatic page adding more items, ajax pagination?
Posted: Tue Jul 14, 2015 1:53 pm
by Celauran
Should be pretty easy to check; change the number of items per page to a multiple of four
Re: Automatic page adding more items, ajax pagination?
Posted: Tue Jul 14, 2015 1:58 pm
by simonmlewis
If I change it from 30 to 35, it then resets that $count to 1 again. So what's causing that? I have to keep that counter going right thru.....
Re: Automatic page adding more items, ajax pagination?
Posted: Tue Jul 14, 2015 2:02 pm
by Celauran
You've got the current page and the number of items per page, you can always compute it.
Re: Automatic page adding more items, ajax pagination?
Posted: Tue Jul 14, 2015 2:05 pm
by simonmlewis
Sorry?
I'm guessing I somehow add the end $count to the new count - but how?
Re: Automatic page adding more items, ajax pagination?
Posted: Wed Jul 15, 2015 3:30 am
by simonmlewis
I'm trying... and failing. All I can do is make the count jump from 44 to 88.
I need it to go from 44 to 45... or 88 to 89...etc.
Code: Select all
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/infinite-scroll/jquery-ias.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.wrap', // main container where data goes to append
item: '.item', // single items
pagination: '.nav', // page navigation
next: '.nav a', // next page selector
loader: '<img src="/js/infinite-scroll/ajax-loader.gif"/>', // loading gif
triggerPageThreshold: 3 // show load more if scroll more than this
});
});
</script>
<link rel="stylesheet" media="all" href="/js/infinite-scroll/style.css">
<?php
include('dbconn.php');
$limit = 44; #item per page
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
# sql query
$sql = "SELECT * FROM products WHERE catid = '532' ORDER BY id DESC";
# find out query stat point
$start = ($page * $limit) - $limit;
# query for page navigation
if( mysql_num_rows(mysql_query($sql)) > ($page * $limit) ){
$next = ++$page;
if ($page >= 2)
{
$pageminus = $page - 1;
$count = $page * $limit;
echo "$count";
}
}
$query = mysql_query( $sql . " LIMIT {$start}, {$limit}");
if (mysql_num_rows($query) < 1) {
header('HTTP/1.0 404 Not Found');
echo 'Page not found!';
exit();
}
$count = 0;
?>
<div class="wrap">
<!-- loop row data -->
<?php while ($row = mysql_fetch_array($query)):
$title = $row['title'];
$findtitle ="/ /";
$replacetitle ="-";
$titlereplace = preg_replace ($findtitle, $replacetitle, $title);
$categ = $row['catname'];
$findcateg ="/ /";
$replacecateg ="-";
$categreplace = preg_replace ($findcateg, $replacecateg, $categ);
$subcateg = $row['subname'];
$findsubcateg ="/ /";
$replacesubcateg ="-";
$subcategreplace = preg_replace ($findsubcateg, $replacesubcateg, $subcateg);
$count ++;
?>
<div class="home_popular"<?php
if (($count % 4) == 0)
{
echo "style=' margin-right: 0px'";
}
echo "id='item-$row[id]'>
<img src='http://www.justbbguns.co.uk/images/productphotos/small/$row[photoprimary]' alt='$row[title]' />";
?>
<span class='home_popular_title'><?php echo $row['title']?></span>
<span class='home_popular_title'><?php echo $count;?></span>
</div>
<?php endwhile?>
<!--page navigation-->
<?php if (isset($next)): ?>
<div class="nav">
<a href='/infinite-scroll?p=<?php echo $next?>'>Next</a>
</div>
<?php endif?>
</div><!--.wrap-->
Re: Automatic page adding more items, ajax pagination?
Posted: Wed Jul 15, 2015 5:05 am
by simonmlewis
Also, I am trying to convert it to PDO, as that is how my site is fully written.
But am having a problem on this line at the moment.
[text]$query = mysql_query( $sql . " LIMIT {$start}, {$limit}");[/text]
[text]Catchable fatal error: Object of class PDOStatement could not be converted to string in C:\xampp\phpmyadmin\site\includes\categ.inc on line 183[/text]
It's not in PDO, I think I can see that much, but not seeing this kind of code before, I don't knw what it should be.
Code: Select all
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
# sql query
$result = "SELECT * FROM products WHERE catid = :c AND pause = 'off' ORDER BY rcstock ASC, $order";
$sql = $pdo->prepare($result);
$sql->execute(array(':c' => $_GET['c']));
$num_rows = $sql->rowCount();
# find out query stat point
$start = ($page * $limit) - $limit;
# query for page navigation
if(($num_rows) > ($page * $limit) ){
$next = ++$page;
if ($page > 2)
{
$pageminus = $page - 1;
$count = $page + $limit;
echo "$page - $count";
}
else
{
$count = 0;
}
}
/// THIS ONE HERE !!!!!!!!
$query = mysql_query( $sql . " LIMIT {$start}, {$limit}");
if (mysql_num_rows($query) < 1) {
header("HTTP/1.1 404 Not Found", true, 404);
include ("custom_404.php");
exit();
}
?>
I thought I might have to adjust the lower part to this:
Code: Select all
$query = $sql . " LIMIT {$start}, {$limit}";
$sql2 = $pdo->query($query);
$num_rows2 = $sql2->rowCount();
if ($num_rows2 < 1) {
header("HTTP/1.1 404 Not Found", true, 404);
include ("custom_404.php");
exit();
}
But that doesn't work either.
Re: Automatic page adding more items, ajax pagination?
Posted: Wed Jul 15, 2015 5:29 am
by simonmlewis
Ok, I have worked out how to make it work in PDO.
But now after the first lot of 44 entries, all the pricedrop, rcstock etc, disappears. Why?
Code: Select all
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/infinite-scroll/jquery-ias.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.wrap', // main container where data goes to append
item: '.item', // single items
pagination: '.nav', // page navigation
next: '.nav a', // next page selector
loader: '<img src="/js/infinite-scroll/ajax-loader.gif"/>', // loading gif
triggerPageThreshold: 3 // show load more if scroll more than this
});
});
</script>
<link rel="stylesheet" media="all" href="/js/infinite-scroll/style.css">
<?php
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
include('dbconn.php');
$c = isset($_GET['c']) ? $_GET['c'] : null;
$query = ("SELECT * FROM categorybanners WHERE catid =:c");
$result = $pdo->prepare($query);
$result->execute(array(':c' => $_GET['c']));
$num_rows = $result->rowCount();
$query = ("SELECT categories FROM categories WHERE id =:c");
$result = $pdo->prepare($query);
$result->execute(array(':c' => $_GET['c']));
while ($row = $result->fetch(PDO::FETCH_OBJ))
{
echo "</div><div class='cat_head'><h1>$row->categories</h1></div>";
}
$query = ("SELECT * FROM categories WHERE id = :c AND introtext <> ''");
$result = $pdo->prepare($query);
$result->execute(array(':c' => $_GET['c']));
if (isset($_SESSION["loggedin"]))
{
$usertype = $_SESSION["usertype"];
if ($usertype == "admin")
{
$num_rows = $result->rowCount();
if ($num_rows == 0)
{
echo "<div class='cat_adminlink' style='float: left'><a href='/index.php?page=a_catbanners&ctype=cat&id=$c&p=y'><i class='fa fa-pencil-square-o'></i> Edit/Add Text</a></div>";
}
}
}
while ($row = $result->fetch(PDO::FETCH_OBJ))
{
echo "<div class='category_intro'>";
if (isset($_SESSION["loggedin"]))
{
$usertype = $_SESSION["usertype"];
if ($usertype == "admin")
{
echo "<div class='cat_adminlink'><a href='/index.php?page=a_catbanners&ctype=cat&id=$c&p=y'><i class='fa fa-pencil-square-o'></i> Edit/Add Text</a></div>";
}
}
echo "$row->introtext</div>";
}
echo "<div style='clear: both' /></div><div class='mainbodybox'>";
echo "<div class='categ_topbox'><div class='categ_subbox'>";
$query = "SELECT subname, subid, catname FROM products WHERE catid = :c AND pause = 'off' GROUP BY subname";
$result = $pdo->prepare($query);
$result->execute(array(':c' => $_GET['c']));
while ($row = $result->fetch(PDO::FETCH_OBJ))
{
$subcateg = "$row->subname";
$findsubcateg ="/ /";
$replacesubcateg ="-";
$subcategreplace = preg_replace ($findsubcateg, $replacesubcateg, $subcateg);
$categ = "$row->catname";
$findcateg ="/ /";
$replacecateg ="-";
$categreplace = preg_replace ($findcateg, $replacecateg, $categ);
echo "<div class='categ_subcateg'><a href='/subcateg/$c/$categreplace/$row->subid/$subcategreplace/'>$row->subname</a></div>";
}
echo "</div>";
if (isset($_REQUEST['order'])) {
$order = $_REQUEST['order'];
$_SESSION['order'] = $_REQUEST['order'];
} else if (isset($_SESSION['order'])) {
$order = $_SESSION['order'];
}
if(empty($_REQUEST['order']))
{ $order = "subname ASC";}
echo "<div class='categ_sortbox'><div class='";
if(isset($order))
{
if ($order == "title ASC") { echo "categ_orderon";}
else
{
echo "categ_order";
}
}
echo "'><a href='/categ/$c/$categreplace&order=title ASC' style='text-decoration: none'>A-Z</a></div>";
echo "<div class='";
if(isset($order))
{
if ($order == "title DESC") { echo "categ_orderon";}
else
{
echo "categ_order";
}
}
echo "'><a href='/categ/$c/$categreplace&order=title DESC' style='text-decoration: none'>Z-A</a></div>
<div class='";
if(isset($order))
{
if ($order == "price ASC") { echo "categ_orderon";}
else
{
echo "categ_order";
}
}
echo "'><a href='/categ/$c/$categreplace&order=price ASC' style='text-decoration: none'>Price (Low-High)</a></div>
<div class='";
if(isset($order))
{
if ($order == "price DESC") { echo "categ_orderon";}
else
{
echo "categ_order";
}
}
echo "'><a href='/categ/$c/$categreplace&order=price DESC' style='text-decoration: none'> (High-Low)</a></div>
</div><div style='clear: both; width: 500px'/></div></div><br/>";
if ( $detect->isMobile() && !$detect->isTablet() ) {
$limit = 30; #item per page
}
else
{
$limit = 44; #item per page
}
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
# sql query
$result = "SELECT * FROM products WHERE catid = :c AND pause = 'off' ORDER BY rcstock ASC, $order";
$sql = $pdo->prepare($result);
$sql->execute(array(':c' => $_GET['c']));
$num_rows = $sql->rowCount();
# find out query stat point
$start = ($page * $limit) - $limit;
# query for page navigation
if(($num_rows) > ($page * $limit) ){
$next = ++$page;
if ($page > 2)
{
$pageminus = $page - 1;
$count = $page + $limit;
echo "$page - $count";
}
else
{
$count = 0;
}
}
$num_rows = 0;
$query = $result . " LIMIT $start, $limit";
$sql = $pdo->prepare($query);
$sql->execute(array(':c' => $_GET['c']));
$num_rows = $sql->rowCount();
if ($num_rows < 1) {
header("HTTP/1.1 404 Not Found", true, 404);
include ("custom_404.php");
exit();
}
?>
<div class="wrap">
<!-- loop row data -->
<?php while ($row = $sql->fetch(PDO::FETCH_OBJ)):
$todaydate = date('Y-m-d');
$backinstock = NULL;
$newdate = strtotime("$todaydate");
$datebackinstock = strtotime($row->datebackinstock);
$i=30;
$checkBackinstock = strtotime(date("Y-m-d", strtotime($row->datebackinstock)) . " +".$i."days");
if ($checkBackinstock >= $newdate) { $backinstock = "enable"; }
$title = $row->title;
$findtitle ="/ /";
$replacetitle ="-";
$titlereplace = preg_replace ($findtitle, $replacetitle, $title);
$categ = $row->catname;
$findcateg ="/ /";
$replacecateg ="-";
$categreplace = preg_replace ($findcateg, $replacecateg, $categ);
$subcateg = $row->subname;
$findsubcateg ="/ /";
$replacesubcateg ="-";
$subcategreplace = preg_replace ($findsubcateg, $replacesubcateg, $subcateg);
$count ++;
?>
<div class="home_popular"<?php
if (($count % 4) == 0)
{
echo "style=' margin-right: 0px'";
}
echo "id='item-$row->id'>";
if(isset($backinstock) && $row->pricedropenable != "yes" && $row->rcstock == "in stock")
{
if ($backinstock == "enable")
{
echo "<div id='home_popular_backinstock'><a href='/product/$row->catid/$categreplace/$row->subid/$subcategreplace/$row->id/$titlereplace'>✔ BACK IN STOCK</a></div>";
}
}
if(isset($row->pricedropenable))
{
if ($row->pricedropenable == "yes")
{
echo "<div id='home_popular_pricedrop'><a href='/product/$row->catid/$categreplace/$row->subid/$subcategreplace/$row->id/$titlereplace'>▼ PRICE DROP</a></div>";
}
}
echo "<a href='/product/$row->catid/$categreplace/$row->subid/$subcategreplace/$row->id/$titlereplace'><img src='http://www.site.com/images/productphotos/small/$row->photoprimary' alt='$row->title' />
<div class='home_popular_title'>$row->title</div><div class='home_popular_title'>$count</div></a>
<div id='home_popular_base'>
<div class='home_popular_stock'>";
if ($row->preorder == "yes") { echo "pre-order only";}
else if ($row->comingsoon == "yes") { echo "coming soon";}
else
{
echo "$row->rcstock";
}
echo "</div>
<div class='home_popular_price'>";
if ($row->pricedropenable == "yes") { echo "<font color='#ff0000'>▼</font> Only $";
printf ("%.2f", $row->price);
echo "</font> Was <s>$";
printf ("%.2f", $row->pricedrop);
echo "</s>";
}
else {
echo "Only ";
printf ("$%.2f", $row->price);}
echo "</div></div>";
?>
</div>
<?php endwhile?>
<!--page navigation-->
<?php if (isset($next)): ?>
<div class="nav">
<a href='/infinite-scroll?p=<?php echo $next?>'>Next</a>
</div>
<?php endif?>
</div><!--.wrap-->
The DIV named "home_popular_base", is set to bottom: 0; and the home_popular is set to position: relative.
The DIV appears in the first 44 lot that comes out, but thereafter the DIV won't display.
Odd!
Re: Automatic page adding more items, ajax pagination?
Posted: Wed Jul 15, 2015 6:42 am
by Celauran
There's a ton going on this page. I'm noticing you're using $_GET['c'] at the top of the page but not including that parameter in the link where you're fetching new results. I'd start there.