0

I dont even know if this is an ajax problem, but maybe someone can help me!!

I have a menu php file that containd-s categories of products, some of these categories have subcategories.
I have it working that when you click a category then it shows all the products for that category, but I cant get it to work when I click a subcategory that the products for that subcategory are displayed!

The category and subcategory links are both <li>s

My code at the minute does nothing when I click on a subcategory.

this is my php menu file.

<?php
   include 'connect.php';
   $q = "SELECT c.category, c.cat_id, GROUP_CONCAT(s.subcategory) AS sublist FROM categories AS c LEFT JOIN subcategories AS s ON c.cat_id = s.cat_id GROUP BY c.cat_id ORDER BY c.cat_id ";
   $r = mysql_query($q) or die( 'Could not execute query: ' . mysql_error() );;
   $output = '<ul id="nav">';
   while($data = mysql_fetch_array($r)){
      $output .= "<li><a href={$data['cat_id']} class='category'>{$data['category']}</a>";
      if(!empty($data['sublist'])){
        $subcats = explode(",", $data['sublist']);
        $output .="<ul>";
        foreach($subcats as $s){
           $output .= "<li><a href='news.php' class='subcategory'>$s</a></li>";
        }
        $output .= "</ul>";
      }
      $output .="</li>";
   }
   $output .= '</ul>';
   echo $output;
?>

This is my showproducts.php file

<?php
   include 'connect.php';
   if(isset($_POST['category'])){
      // cast the category to integer (just a little bit of basic security)
      $cat = (int) $_POST['category'];
      $q = "SELECT * FROM products WHERE cat_id=$cat ORDER BY id DESC";
      // this will be the string that you will return into the product-data div
      $returnHtml = '';

      if($r = mysql_query($q)) {
         // construct the html to return
         while($row = mysql_fetch_array($r)) {

        $returnHtml .= "<div class='image'><a><img ";
        $returnHtml .= "class='cat_image' ";
        $returnHtml .= "name='cat_image' ";
        $returnHtml .= "src='{$row['imagepath']}'";
        $returnHtml .= "alt='{$row['product_name']}' ";
        $returnHtml .= "title='{$row['product_name']}' />";
        $returnHtml .= "<div class='imgLabel'>{$row['product_name']} <br />&pound {$row['product_price']}</div></a></div>";

         }
       }
   }

   else if(isset($_POST['subcategory'])){
      // cast the category to integer (just a little bit of basic security)
      $subcat = (int) $_POST['subcategory'];
      $q = "SELECT * FROM products WHERE subcat_id=$subcat ORDER BY id DESC";
      // this will be the string that you will return into the product-data div
      $returnHtml = '';

      if($r = mysql_query($q)) {
         // construct the html to return
         while($row = mysql_fetch_array($r)) {

        $returnHtml .= "<div class='image'><a><img ";
        $returnHtml .= "class='cat_image' ";
        $returnHtml .= "name='cat_image' ";
        $returnHtml .= "src='{$row['imagepath']}'";
        $returnHtml .= "alt='{$row['product_name']}' ";
        $returnHtml .= "title='{$row['product_name']}' />";
        $returnHtml .= "<div class='imgLabel'>{$row['product_name']} <br />&pound {$row['product_price']}</div></a></div>";

         }
       }
   }
   else{
      die('No category has been chosen');
   }
   // display the html (you actually return it this way)
   echo $returnHtml;

?>

And this is my jquery/ajax script

/ whenever a link with clategory class is clicked
$('a.category, a.subcategory').click(function(e) {
// first stop the link to go anywhere
e.preventDefault();
//get the text of the link by converting the clicked object to string
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 chosen div
$.post('../inc/showproducts.php', {category: categoryValue}, function(data) {
//find total number of records
var totalRecords = $(data).length;
//define how many records shown per page
var pageSize = 6;
//work out number of pages needed to hold records
var numOfPages = Math.ceil(totalRecords / pageSize);
//make page links
var i,
  pageLinks = '<div class="pageLinks">';
for (i = 0; i < numOfPages; i++) {
  pageLinks += '<a href="#" onclick="showProductPage(' + i + ');return false;">' + (i + 1) + '<\/a> ';
}
pageLinks += '<\/div>';
//display returned data and page links in chosen div ('info)
$('#catcontent').html(pageLinks + data);
showProductPage(0);
});
});
//function to slice up records into pages
function showProductPage( pageNo ) { 
    var perPage = 6; 
    var start = pageNo * perPage; 
    var end = start + perPage; 
    $('.image').hide().filter(function(index) { 
        return ( (index > (start-1)) && ( index < end ) ); 
    } ).show(); 
}

Can anyone help me out here?~

Thanks
Glen

2
Contributors
2
Replies
22
Views
4 Years
Discussion Span
Last Post by GlenRogers
1

Yeah, kind of impatient of me! This got sorted last night thanks to pixiesoul.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.