Current location: Hot Scripts Forums » General Web Coding » JavaScript » Ajax pagination on a div

Ajax pagination on a div

Reply
  #1 (permalink)  
Old
New Member
 
Join Date: Jan 2013
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Ajax pagination on a div

Hi.

I have a php file with a div that contains image links(from a mysql table). This page has some ajax code that sends the product_id of the clicked image to another php file that gets all the products from another table that have the same product_id then sends them back to the first file to display in another div. I have this working. I need to add pagination to this div now, to break up the results.

I have no clue on how to do this! Can anyone help?

This is my first file with the 2 divs and the ajax
index.php

Code:
<!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 type="text/javascript" src="../jquery/jquery.simplePagination.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='forher.php'><span>For Her</span></a> </li>
                     <li><a href='forhim.php'><span>For Him</span></a></li>
                     <li><a href='couples.php'><span>For Couples</span></a></li>
         	         <li><a href='anal.php'><span>Anal Delights</span></a></li>
					 <li><a href='stimulators.php'><span>Massagers/Stimulators</span></a></li>
         	         <li><a href='lubes.php'><span>Lubes and Oils</span></a></li>
					 <li><a href='novelty.php'><span>Novelty</span></a></li>
					 <li><a href='clothing.php'><span>Clothing</span></a></li>
					 <li><a href='other.php'><span>Other</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">
			Vibrators
			<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>
		
		<div id="footer">
	       <p>Copyright of TrunxSexToys 2012<br />Site Developed by Webslinger Design and Development</p>
		</div>
     </div>
   </body>
</html>


showproducts.php

[CODE]<?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;
?><?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;
?>[/CODE

Thanks for looking!

Glen
Reply With Quote

Featured Marketplace Scripts (view more)

Reply

Bookmarks

Tags
ajax, pagination


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Space Above Form xavier039 CSS 1 07-13-09 11:52 PM
div css theighost CSS 11 09-14-08 03:30 AM
load ajax - function into div contatiner vivabensmith JavaScript 3 12-06-06 10:11 AM
Getting the updated value of a div property? (AJAX??) drky JavaScript 12 08-17-06 03:11 AM
Can't Understand java script maverickminds JavaScript 1 07-16-06 02:23 PM


All times are GMT -5. The time now is 08:15 PM.
vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.