Product didn't diplay on ecommerce website

Question

i created the e-commerce website. category and brands both are displayed successfully. my problem is if I click the category. the product should display based on the category what I clicked. Example: if I click Tv as a category all tv product should display.like that
what i tried so far. i attached the code below.when i running the programming and click the category i got the error as "Uncaught ReferenceError: cid is not defined"

This code I wrote for display category but all category displayed successfully.

 $('#categories').append('<a href="#" cid= '+ id + '  class="list-group-item list-group-item-action">' + '<b>'+ data[i].catname + '<b>' + '</a>');

Full code for category

Category

  function getCategory(){
            $.ajax({
                type: 'GET',
                url: 'get_category.php' ,
                dataType: 'JSON',
                success: function (data)
                {
                    for (var i = 0; i < data.length; i++)
                    {
                        var catname = data[i].catname;
                        var id = data[i].id;

 $('#categories').append('<a href="#" cid= '+ id + '  class="list-group-item list-group-item-action">' + '<b>'+ data[i].catname + '<b>' + '</a>');
                    }
                },
                error: function (xhr, status, error)
                   {
                    console.log(xhr.message)
                }

            });
        }


                    }

when i click the category the relevant product should be displayed I wrote the code below

$("#categories").click(function ()
{
$.ajax({
    type: 'post',
    url: 'get_product.php' ,
    data: {cid:cid},
    dataType: 'JSON',
    success: function (data) {
        console.log(data);

        for (var i = 0; i < data.length; i++)
        {
            var price = data[i].price;
            var image = data[i].image;
            var description = data[i].description;

            $("#Products").append("<div class='col-md-4'> " +
            "<div class='panel panel-info' id='Products'>" +
            "<div class='card-body'>" +
            "<div class='panel-heading'>"  +  "<h4> "  +  description + "</h4> " +
            "<p class='panel-body'>"+  "<h3> "  +  price + "</h3>" +
            "<p class='panel-body'> <img class='card-img-top' style='width:250px' height='250px' id='theImg' src='images/"  + image  + "' /> </p>" +
            " <a href='#' class='btn btn-primary'>View More</a> </div> </div></div> </div>");
        }
    },
    error: function (xhr, status, error) {
        alert(xhr.responseText);
    }
});
});

get_product.php page

<?php
include("db.php");
$stmt = $conn->prepare("select id,cat_id,brand_id,price,description,image,keywords from products where id = ? order by RAND() LIMIT 0,6");
$stmt->bind_result($id,$cat_id,$brand_id,$price,$description,$image,$keywords);

$cid = $_POST["cid"];
$stmt->bind_param("s", $cid);


if ($stmt->execute()) {
    while ( $stmt->fetch() ) {
        $output[] = array ("id"=>$id, "cat_id"=>$cat_id,"brand_id"=>$brand_id,"price"=>$price,"description"=>$description,"image"=>$image,"keywords"=>$keywords);
    }
    echo json_encode($output);
}
$stmt->close();
?>

Answer 1

I think this gives you error, you need to get clicked category id

var cid = $(this).attr('cid'); // Use this and try
 data: {cid:cid},

Answer 2

You are calling click event on categories; you should call click event on a tag;

Replace you click event;

$("#categories").click(function ()
{ 
// You code here
}

with this code;

$("a.list-group-item").click(function ()
{ 
var cid = $(this).attr('cid');
// You code here
}

Hope this will be useful for you!