Page 1 of 1
php,ajax,mysql~ pagination problems
Posted: Mon Sep 27, 2010 12:03 am
by hkxo
I was given the task at work to create a page using ajax that loads an image, title and comment from a MySQL database.
I must use pagination in the form of a next and back button to scroll between the db entries (only one per page).
When I load my page (pagination.php), the first db entry appears (as it should), but when I click on the next and back buttons, two problems arise:
1) the next and back buttons only go back once and next once, i.e.:
from: GET
http://dev2.matrix.msu.edu/~sarah.godos ... php?page=1
to: GET
http://dev2.matrix.msu.edu/~sarah.godos ... php?page=6 (clicking 'back')
or,
GET
http://dev2.matrix.msu.edu/~sarah.godos ... php?page=2 (clicking 'next')
2) even though it appears as if it is getting the other pages of the data, it still only loads the page 1 image, title and comment
Here is a link to my code:
http://gist.github.com/595946
Please help me someone, I am pretty much trying to learn this all on my own and I would greatly appreciate any help.
Thank you all!!
Sarah
Re: php,ajax,mysql~ problems loading query results
Posted: Tue Sep 28, 2010 8:20 pm
by hkxo
anyone??
Re: php,ajax,mysql~ problems loading query results
Posted: Tue Sep 28, 2010 9:55 pm
by John Cartwright
Can't help you much without seeing your code..
Re: php,ajax,mysql~ problems loading query results
Posted: Wed Sep 29, 2010 11:50 am
by hkxo
config.php
Code: Select all
<?php
$mysqli_hostname= "rush.matrix.msu.edu";
$mysqli_user= "sarah";
$mysqli_pass= "-----(pw.here)-----";
$mysqli_db= "sarah_dev";
$db= mysqli_connect($mysqli_hostname,$mysqli_user,$mysqli_pass) or
die("problem connecting");
//select db
mysqli_select_db($db,$mysqli_db) or
die("problem accessing db");
?>
pagination.php
Code: Select all
<html>
<head>
<title>AJAX Image Viewer
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery_pagination.js"></script>
<style>
#loading
{
width: 100%;
position: absolute;
}
li
{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:dashed 1px #1F1F1F;
color:#00B8F5;
}
li:hover
{
color:#00B8F5;
cursor: crosshair;
}
</style>
</head>
<?php
include('config.php');
$per_page = 1;
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
//calculates total pages
$sqli = "SELECT * FROM Images";
$result = $db->query($sqli);
$count = mysqli_num_rows($result);
$pages = ceil($count/$per_page);
?>
<div id="loading"></div>
<div id="content"></div>
<ul id="pagination">
<?php
////pagination
$prev= $page-1;
$forw= $page+1;
$back = '';
$next = '';
if ($pages > 1) {
$back .= '<li id="';
$next .= '<li id="';
//Back Button
if ($page > 1) {
echo $prev.'if';
$back .= $prev.'">Back</li>';
} else {
echo $pages;
$back .= $pages.'">Back</li>';
}
//Next Button
if ($page < $pages) {
echo $forw.'if';
$next .= $forw.'">Next</li>';
} else {
$next .= '1">Next</li>';
}
}
echo $back,$next;
?>
</ul>
</html>
jquery_pagination.js
Code: Select all
$(document).ready(function() {
//Display Loading Image
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='loadingGIF.gif'>");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#00B8F5'}).css({'border' : 'dashed #1F1F1F 1px'});
Display_Load();
$("#content").load("pagination_data.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function() {
Display_Load();
//CSS Style
$("#pagination li")
.css({'border' : 'dashed #1F1F1F 1px'})
.css({'color' : '#00B8F5'});
$(this)
.css({'color' : '#00F5B8'})
.css({'border' : 'solid #1F1F1F 1px'});
//Loading Data
var pageNum = this.id;
$("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
});
});
pagination_data.php
Code: Select all
<?php
include ('config.php');
$per_page = 1;
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 0;
$start = 0;
$sqli = "SELECT Location, Title, Comment FROM Images LIMIT $start,$per_page";
$result = mysqli_query($db, "SELECT Location, Title, Comment FROM Images LIMIT $start,$per_page");
?>
<table width="500px">
<?php
$data = $result->fetch_assoc();
$title = $data['Title'];
$location = $data['Location'];
$comment = $data['Comment'];
?>
<tr>
<td><?php echo $title;?></td>
</tr>
<tr>
<td><?php echo $comment;?></td>
</tr>
<tr><td><img src="http://dev2.matrix.msu.edu/~sarah.godoshian/training/<?php echo $location;?>"></td>
</tr>
</table>
Re: php,ajax,mysql~ problems loading query results
Posted: Wed Sep 29, 2010 11:51 am
by hkxo
I'm sorry!
but thank you for the heads up

Re: php,ajax,mysql~ problems loading query results
Posted: Wed Sep 29, 2010 7:02 pm
by McInfo
The Back and Next buttons do not update because the JavaScript does not update them.
The image does not change because, in pagination_data.php, the $page variable has no effect. Instead, $start is always 0, (zero) so the first image is always returned.
Re: php,ajax,mysql~ problems loading query results
Posted: Fri Oct 01, 2010 11:24 am
by hkxo
ohh, I see..
how to send the $page variable from pagination_data.php to jquery_pagination.js?
(assuming that's what I need to do... lol)
Re: php,ajax,mysql~ problems loading query results
Posted: Fri Oct 01, 2010 1:43 pm
by hkxo
I tried to rework pagination.php and jquery_pagination.js so javascript would be updating the 'back' and 'next' buttons.. but I'm still not getting it to work properly.
I think it has something to do with how I tried to get the current_page in the javascript... (I am really not sure how to go about it)..
here is my new code
pagination.php
Code: Select all
<html>
<head>
<title>AJAX Image Viewer
</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery_pagination.js"></script>
<style type="text/css">
#loading
{
width: 100%;
position: absolute;
}
li
{
list-style: none;
float: left;
margin-right: 16px;
padding:5px;
border:dashed 1px #1F1F1F;
color:#00B8F5;
}
li:hover
{
color:#00B8F5;
cursor: crosshair;
}
</style>
</head>
<?php
include('config.php');
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$per_page = 1;
//calculates total pages
$sqli = "SELECT * FROM Images";
$result = $db->query($sqli);
$count = mysqli_num_rows($result);
$pages = ceil($count/$per_page);
?>
<div id="loading"></div>
<div id="content"></div>
<ul id="pagination">
<?php
////pagination
echo '<li id="back">Back</li>';
echo '<li id="next">Next</li>';
?>
</ul>
</html>
jquery_pagination.js
Code: Select all
$(document).ready(function() {
//Display Loading Image
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src='loadingGIF.gif' />");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first").css({'color' : '#00B8F5'}).css({'border' : 'dashed #1F1F1F 1px'});
Display_Load();
$("#content").load("pagination_data.php?page=1", Hide_Load());
var current_page = '<?=$_GET["page"]>';
//Pagination Click Back
$("#pagination li").click(function() {
Display_Load();
//CSS Style
$("#pagination li")
.css({'border' : 'dashed #1F1F1F 1px'})
.css({'color' : '#00B8F5'});
$(this)
.css({'color' : '#00F5B8'})
.css({'border' : 'solid #1F1F1F 1px'});
if (this.id == "back") {
//Loading Data
$.get('pagination_data.php?page=' + current_page - 1, function(data) {
$("#content").html(data);
}, Hide_Load());
};
if (this.id == "next") {
$.get('pagination_data.php?page=' + current_page + 1, function(data) {
$("#content").html(data);
}, Hide_Load());
};
});
});
(I have left pagination.php and config.php unchanged...)