Как сделать так, чтобы страница отображала товары в правильном порядке, используя php, ajax, jquery и выпадающее меню

Question

Я пытаюсь создать выпадающее меню, из которого можно отсортировать страницу «цена-максимум-минимум» или «цена-минимум-максимум».

Это HTML-код с id = "show_product"

<div class="row" id ="notification-bar"></div>
<div class="row" id="show_product">Here comes the table with products</div>

Это HTML-код выпадающего меню:

<select name="sort" id="sort">
    <option value="asc">Price low - high</option>
    <option value="desc">Price high - low</option>
</select>

Jquery для этого:

$(document).ready(function(){
    $('#sort').change(function() {      
        var sort = $(this).val();               
        $.ajax({
            url:"load_products.php",
            method:"POST",
            data: {sort:sort},
            succes:function(data){
                $('#notification-bar').text('The page has been successfully loaded');
                $('#show_product').html(data);
           },
           error: function() {
               $('#notification-bar').text('An error occurred');
           }
        });     
    });
});

И, наконец, load_products.php:

<?php
include("inc/connect.php");

$output = '';

if($_POST["sort"] != '') {
    $query = "SELECT * FROM shop ORDER BY price " . $_POST["sort"];
    $result   = mysqli_query($con, $query);
    while($row = mysqli_fetch_array($result)) {
        $output .= '<div class="col-lg-4 col-md-6">';
        $output .= '<div class="single-product">';
        $output .= '<img class="img-fluid" src="' . $row["imageURL"] . '">';
        $output .= '<div class="product-details">';
        $output .= '<h6 class="text-center">' . $row["title"] . '</h6>';
        $output .= '<div class="price text-center">';
        $output .= '<h6>&euro; ' . $row["price"] . '</h6>';
        $output .= '</div>';
        $output .= '</div>';
        $output .= '</div>';
        $output .= '</div>';
    }   
    return $output;
} else {
    $query  = "SELECT * FROM shop ORDER BY price ASC";
    $result = mysqli_query($con, $query);
    while($row = mysqli_fetch_array($result)) {
        $output .= '<div class="col-lg-4 col-md-6">';
        $output .= '<div class="single-product">';
        $output .= '<img class="img-fluid" src="' . $row["imageURL"] . '">';
        $output .= '<div class="product-details">';
        $output .= '<h6 class="text-center">' . $row["title"] . '</h6>';
        $output .= '<div class="price text-center">';
        $output .= '<h6>&euro; ' . $row["price"] . '</h6>';
        $output .= '</div>';
        $output .= '</div>';
        $output .= '</div>';
        $output .= '</div>';
    }   
    return $output;         
}   
?>

Проблема в том, что когда я меняю опцию из выпадающего списка, идентификатор "show_product" не заполняется данными из load_products.php.

Есть идеи, что происходит не так?

С уважением,

Arie

Answer 1

Ну, я не мог видеть ваш метод формы, но я надеюсь, что вы проверите для мелочей, как установлено POST.Также да, если вы не используете ООП, попробуйте санировать входы.Включите отображение ошибок в PHP.ini, поскольку это также помогает нам, если вы показали точное отображение эффекта при выполнении кода.