How Do i use JQuery to update the data

Ok so i am having a problem with figuring this problem out. I have a dynamic page that has records pulled out of a mysql database. The php code works great. The code is below

$catagory = $_GET['type'];
$query = "SELECT p.name, p.price, pc.quantity, p.image, p.descr FROM products ... where category_name = $catagory "; 
$result = mysql_query($query);
$related = array();
while($row_r = mysql_fetch_assoc($result)){
   $related[] = $row_r;
}

later on down the page I loop through them

<div class="main-b开发者_运维知识库lue">
<div class="blue-items">
<?php foreach ($related as $row_r) { ?>
    <span class="digit"><span class="digit-r"><?php print $row_r["quantity"] ?></span></span>
    <h3><?php print $row_r['name'] ?></h3>
.....

The problem is I have a

<div class="dropdown">
<ul>
<li><a href="#" class="icon-s icon-s1">Grocery</a></li>
<li><a href="#" class="icon-s icon-s2">Pizza</a></li>
<li><a href="#" class="icon-s icon-s3">Quick Service</a></li>
<li><a href="#" class="icon-s icon-s4">Retail</a></li>
<li><a href="#" class="icon-s icon-s5">Salon</a></li>
<li><a href="#" class="icon-s icon-s6">Bar</a></li>
</ul>

I need to be able to select one of the dropdowns like for example Bar I need to regrab the record from mysql and make the page load with the records for Bar without refreshing .

like

$catagory = "Bar";
$query = "SELECT p.name, p.price, pc.quantity, p.image, p.descr FROM products ... where category_name = $catagory "; 

---

You need to use some sort of AJAX implementation to get this to work.

It will allow Js to query your PHP script to get a table or new JSON data to repopulate the table.

It doesn't look like you have any jQuery at the moment, give it a go to start with!

This question is very similar