0

Hi, I use some jquery/ajax to try and get the id of a link button and display all the products associated with that id. I'm using the exact same code that worked for me on another site, but nothing happens when i click a button!

This is the menu of buttons all populated from mysql

 $q = "SELECT c.category, c.cat_id,GROUP_CONCAT(s.subcat_id,'|', s.subcategory ) AS sublist FROM categories AS c 
LEFT JOIN subcategories AS s ON c.cat_id = s.cat_id";
if(isset($_GET['subcat_id'])) $q .= " WHERE s.cat_id=".$_GET['subcat_id'];
$q .=" GROUP BY c.cat_id ORDER BY c.cat_id";
$result = $link->query($q);
   $output = '<ul id="nav">';
   while($data = mysqli_fetch_array($result)){
      $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 $pair) {
           list($subcat_id, $subcategory) = explode('|', $pair);
           // output link
           $output .= "<li><a href=$subcat_id class='subcategory'>$subcategory</a></li>";
        }
        $output .= "</ul>";
      }
      $output .="</li>";
   }
   $output .= '</ul>';
   echo $output;

This is the jquery/ajax

$('a.category, a.subcategory').click(function(e) {
    // first stop the link to go anywhere
    e.preventDefault();
    // get the class of the link
    var linkClass = $(this).attr("class");
    //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);
    // put the post parameters into 'params' to pass through the AJAX post request
    var params = {};
    params[linkClass] = categoryValue;  
    // 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', params, function(data) {
        //find total number of records
        var totalRecords = $(data).length;
        //define how many records shown per page
        var pageSize = 3;
        //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)
        $('.showproduct').html(pageLinks + data);
        showProductPage(0);
    });
});
//function to slice up records into pages
function showProductPage( pageNo ) { 
    var perPage = 3; 
    var start = pageNo * perPage; 
    var end = start + perPage; 
    $('.image').hide().filter(function(index) { 
        return ( (index > (start-1)) && ( index < end ) ); 
    } ).show(); 
}

And this is the showproducts.php file

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";
      $result = $link->query($q);
      // this will be the string that you will return into the product-data div
      $returnHtml = '';

         // construct the html to return
         while($row = mysqli_fetch_array($result)) {

        $returnHtml .= "<div class='productdiv'>";  
        $returnHtml .= "<div class='image'><img ";
        $returnHtml .= "class='cat_image' ";
        $returnHtml .= "name='cat_image' ";
        $returnHtml .= "src='{$row['filename']}'";
        $returnHtml .= "alt='{$row['name']}' ";
        $returnHtml .= "title='{$row['name']}' />";
        $returnHtml .= "<div class='imgLabel'>{$row['name']}</div>";
        $returnHtml .= "<p><span class='description'>Description</span></p>";
        $returnHtml .= "<p><span class='descriptiontext'>".nl2br($row['product_description'])."</span><p>";
        $returnHtml .= "<div class='imgLabel'>&pound {$row['price']}</div></div></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";
      $result = $link->query($q);
      // this will be the string that you will return into the product-data div
      $returnHtml = '';

      if($r = mysqli_query($result)) {
         // construct the html to return
         while($row = mysqli_fetch_array($r)) {

        $returnHtml .= "<div class='productdiv'>";  
        $returnHtml .= "<div class='image'><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']}</div>";
        $returnHtml .= "<p><span class='description'>Description</span></p>";
        $returnHtml .= "<p><span class='descriptiontext'>".nl2br($row['product_description'])."</span><p>";
        $returnHtml .= "<div class='imgLabel'>&pound {$row['product_price']}</div></div></div>";

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

I know its a lot of code, but can anyone see the problem?
Thanks

1
Contributor
1
Reply
8
Views
4 Years
Discussion Span
Last Post by GlenRogers
1

Sorted. I didnt have the correct path to the showproducts.php file!
Doh!

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.