php,ajax,mysql~ pagination problems

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

Post Reply
User avatar
hkxo
Forum Newbie
Posts: 7
Joined: Sun Sep 26, 2010 11:49 pm

php,ajax,mysql~ pagination problems

Post 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
Last edited by hkxo on Fri Oct 01, 2010 1:59 pm, edited 1 time in total.
User avatar
hkxo
Forum Newbie
Posts: 7
Joined: Sun Sep 26, 2010 11:49 pm

Re: php,ajax,mysql~ problems loading query results

Post by hkxo »

anyone??
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: php,ajax,mysql~ problems loading query results

Post by John Cartwright »

Can't help you much without seeing your code..
User avatar
hkxo
Forum Newbie
Posts: 7
Joined: Sun Sep 26, 2010 11:49 pm

Re: php,ajax,mysql~ problems loading query results

Post 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>
Last edited by hkxo on Wed Sep 29, 2010 11:52 am, edited 1 time in total.
User avatar
hkxo
Forum Newbie
Posts: 7
Joined: Sun Sep 26, 2010 11:49 pm

Re: php,ajax,mysql~ problems loading query results

Post by hkxo »

I'm sorry!
but thank you for the heads up :)
User avatar
McInfo
DevNet Resident
Posts: 1532
Joined: Wed Apr 01, 2009 1:31 pm

Re: php,ajax,mysql~ problems loading query results

Post 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.
User avatar
hkxo
Forum Newbie
Posts: 7
Joined: Sun Sep 26, 2010 11:49 pm

Re: php,ajax,mysql~ problems loading query results

Post 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)
User avatar
hkxo
Forum Newbie
Posts: 7
Joined: Sun Sep 26, 2010 11:49 pm

Re: php,ajax,mysql~ problems loading query results

Post 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...)
Post Reply