1,105,375 Community Members

Ajax pagination?

Member Avatar
GlenRogers
Posting Whiz
329 posts since Jan 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Hi.
I have a php file with image links(mysql data) in one div, when a link is clicked the product_id is sent to another php file that builds the html to display all images(in another mysql table) with that product_id in another div. Someone else helped me out withsome ajax to do this without a page refresh. I now need to add ajax pagination to that div also. Can anyone help me out with this?

Here are my file so far.

main file.

<!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='page1.php'><span>Page 1</span></a> </li>
                     <li><a href='page2.php'><span>Page 2</span></a></li>
                     <li><a href='page3.php'><span>Page 3</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
            <script>
               $(document).ready(function() {
               // 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">
        footer Content
        </div>
     </div>
   </body>
</html>

And this is my showproducts.php file

<?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
echo $returnHtml;
?>

Thanks for looking

Glen..

Member Avatar
soapyillusion
Junior Poster in Training
88 posts since Dec 2009
Reputation Points: 0 [?]
Q&As Helped to Solve: 6 [?]
Skill Endorsements: 0 [?]
 
0
 

You might want to look into using jqGrid, its a plugin for jquery. It allows for the use of Pagenation with ease. you can find a download here.

http://www.trirand.com/blog/?page_id=6

Question Answered as of 1 Year Ago by soapyillusion
You
This question has already been solved: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article