Page is a not externally linkable
- Code, Content, and Presentation
-- JavaScript and AJAX
---- Adding Ajax pagination?


glenrogers - 11:27 pm on Feb 2, 2013 (gmt 0)


Hi. I have a php web page with image links in one div(from a mysql table), i click on a link and some ajax code sends the product_id value to another php file(showproducts.php) this the get data from another mysql table that has the same product_id as was sent. Sends this data back to the origional file to display in another div. I need to paginate the div containing the results.

I have tried using all sorts of ajax pagination plugins with no luck. can any help.

Here are my 2 files.

index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link href="../css/template.css" rel="stylesheet" type="text/css" />
<link href="../css/cat_image.css" rel="stylesheet" type="text/css" />
<link href="../css/index.css" rel="stylesheet" type="text/css" />

<script src="../jquery/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


<title>Adult Toys</title>
</head>

<body>
<div class="wrap">
<div id="header">
<div id="logo">
<a href="home.php"><img src="../images/siteimages/logo.gif" alt="Logo image" /></a>
</div>
</div>
<div id="menu">
<div id='cssmenu'>
<ul>
<li><a href='home.php'><span>Home</span></a></li>
<li><a href='page1.php'><span>Page 1</span></a> </li>
<li><a href='page2.php'><span>Page 2</span></a></li>

</ul>
</div>
</div>
<div id="content">
<div class="categories">

<?php
include'connect.php';
$q = "SELECT * FROM cat_images WHERE cat_id=1";

if($r = mysql_query($q)){

while($row=mysql_fetch_array($r)){

echo "<div class='image'>
<a href='{$row['product_id']}' class='category'>
<img class='cat_image' name='cat_image' src='{$row['imagepath']}' alt='{$row['name']}.Image' title='{$row['name']}' />
<div class='imgLabel'>{$row['name']}
</div></a></div>";
}
}
else{
echo mysql_error();
}
?>
<div style="clear: both;">&nbsp;</div>
</div>
<div id="info">hi</div>
<script>
// whenever a link with category class is clicked
$('a.category').click(function(e) {
// first stop the link to go anywhere
e.preventDefault();
// you can get the text of the link by converting the clicked object to string
// you something like 'http://mysite/categories/1'
// there might be other methods to read the link value
var linkText = new String(this);
// the value after the last / is the category ID
var categoryValue = linkText.substring(linkText.lastIndexOf('/') + 1);
// send the category ID to the getProductData.php script using jquery ajax post method
// send along a category ID
// on success insert the returned text into the product-data div
$.post('showproducts.php', {category: categoryValue}, function(data) {
$('#info').html(data);
});
});
</script>



</div>

<div id="footer">
Footer Text
</div>
</div>
</body>
</html>


showpruducts.php
<?php
include 'connect.php';

// if no category was sent, display some error message
if(!isset($_POST['category'])) {
die('No category has been chosen');
}

// cast the category to integer (just a little bit of basic security)
$category = (int) $_POST['category'];
// this will be the string that you will return into the product-data div
$returnHtml = '';
$q = "SELECT * FROM products WHERE product_id='$category' ORDER BY id DESC";
if($r = mysql_query($q)) {
// construct the html to return
while($row = mysql_fetch_array($r)) {
$returnHtml .= "<div class='image1'><a><img ";
$returnHtml .= "class='cat_image1' ";
$returnHtml .= "name='cat_image' ";
$returnHtml .= "src='{$row['imagepath']}'";
$returnHtml .= "alt='{$row['product_name']}' ";
$returnHtml .= "title='{$row['product_name']}' />";
$returnHtml .= "<div class='imgLabel1'>{$row['product_name']} <br />&pound {$row['price']}</div></a></div>";
}
}
// display the html (you actually return it this way)
echo $returnHtml;
?>


Thanks for looking

Glen


Thread source:: http://www.webmasterworld.com/javascript/4541861.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com