Question

I have a UL list in one div, built using php that retrieves data from mysql. Here is the code:

<div class="sidebar_section">
<h1>Browse Categories</h1>
<?php
include('config.php');
//Connect to mysql server
...
//Select database
...
$categories_sql = "SELECT * FROM tbl_catagory";
$categories_query = mysql_query($categories_sql) or die (mysql_error());
$rsCategories = mysql_fetch_assoc($categories_query);
?>
<form>
<ul>
<?php do { 
?>
<li><a href = "#" id="cat_<?php echo $rsCategories['ID']; ?>"><?php echo $rsCategories['CatagoryName']; ?></a></li>
<?php
} while ($rsCategories = mysql_fetch_assoc($categories_query));
?>
</ul>
</form>
</div>

How do I get the user’s selection into another .php file so that I can display only the products associated with this category? Of course, in the other file I’d do SELECT * FROM table WHERE categoryname=whatever the user selected.

Answer 1

The answer to this varies a lot.

First I will try to answer with the easiest approach I can think of:

Make the href of the anchor something like this:

<li><a href="category.php?catId=<?php echo $rsCategories['ID']; ?>" 
       id="cat_<?php echo $rsCategories['ID']; ?>">
    <?php echo $rsCategories['CatagoryName']; ?></a></li>

Then just create a category.php script in which you use the id from the $_GET array.

<?php
$categoryId = mysql_real_escape_string($_GET['catId']);
$products_sql = "SELECT * FROM ebook WHERE category = '$categoryId'";
//proceed with the rest
?>

Since you’re going with links in a list and you are using # as href, I will consider that you might desire on using AJAX. Here is one way of doing all this.

First: let’s give those lists a class, which we will call “category-choose” (awful naming, sorry, just change it as you wish). This will allow that a single jQuery .click or .live(‘click’, …) will be enough, instead of having to add one event per id.

<li><a href="#<?php echo $rsCategories['ID']; ?>" 
       class="category-choose">
    <?php echo $rsCategories['CatagoryName']; ?></a></li>

Second: just to make it easy on us, let’s use the href as “#” (where is just a number indicating the id). Now we can do the following jQuery code:

$(document).ready(function() {
    $('.category-choose').live('click', function () {
        var catId = this.href.substr(1);
        $("#content_right").load('content_displaycatproducts.php?catId=' + catId);
    });
});

Now, in the PHP script you do the same done in the previous method.

Hopefully I didn’t screw up somewhere since I have no way to test this code 🙂 Any errors or malfunctioning you get, please report and I will fix ASAP.