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