Продукт не отображается на сайте электронной коммерции

Question

я создал сайт электронной коммерции. категория и бренды оба отображаются успешно. моя проблема, если я нажму на категорию. продукт должен отображаться в зависимости от категории, на которую я нажал. Пример: если я выберу телевизор в качестве категории, все продукты ТВ должны отображаться. Вот так
что я пробовал до сих пор я прикрепил код ниже. Когда я запускаю программирование и нажимаю категорию, я получил ошибку как «Uncaught ReferenceError: cid не определен»

Этот код, который я написал для категории отображения, но все категории отображаются успешно.

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

Полный код для категории

Категория

  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)
                }

            });
        }


                    }

когда я нажимаю на категорию, соответствующий продукт должен отображаться, я написал код ниже

$("#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

Вы звоните click событие по категориям; Вы должны вызвать click событие на теге a;

Заменить событие клика;

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

с этим кодом;

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

Надеюсь, это будет полезно для вас!

Answer 2

Я думаю, что это дает вам ошибку, вам нужно получить идентификатор категории клик

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