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'>£ {$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'>£ {$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