Affichage filtré dynamique

Créateur

Sujet
janvier 24, 2024 à 6:33 pm #35315
Bot
Participant
Bonjour
J’essaie de faire une sorte de boutique en ligne qui updates automatiquement la vue pour n’avoir que les offres qui correspondent aux filtres que l’utilisateur applique à l’aide de sliders. J’ai utilisé la méthode de ce tutoriel: https://www.webslesson.info/2018/08/how-to-make-product-filter-in-php-using-ajax.html
Mon problème est que rien ne s’affiche. Quand je regarde le tab network dans mon navigateur en jouant avec les filtres il semble que les requêtes sont envoyées sans problèmes.
La page web, vehicules-occasion.php:
```
    
    
    Garage V. Parrot

    

    
    

    

    
    

    
    

    
```
——————–
dragonicat – Envoyé depuis le Discord : Culte du code
Créateur

Sujet

Vous lisez 3 fils de discussion

Auteur

Réponses

janvier 24, 2024 à 6:34 pm #35316

Bot

Participant

html

Véhicules disponibles

Kilométrage

100000 km – 200000 km

Prix

4000 € – 10000 €

Années

2000 – 2020


     include('components/header/header.php');   

    
        
    

    
        Véhicules disponibles

        
            
            
                Kilométrage
                
                    
                    
                    
                    
                    
                    
                
                
                
                100000 km - 200000 km

            

            

                Prix  
                
                    
                    
                    
                    
                    
                    
                
                
                
                4000 € - 10000 €

            
            

                Années  
                
                    
                    
                    
                    
                    
                    
                
                
                
                2000 - 2020

——————–
dragonicat – Envoyé depuis le Discord : Culte du code

janvier 24, 2024 à 6:34 pm #35317

Bot

Participant

javascript

$(document).ready(function(){
filter_data();
function filter_data() {
$(‘.filter_data’).html(‘

‘);
var action = ‘fetch_data’;
var minimum_km = $(‘#hidden_minimum_km’).val();
var maximum_km = $(‘#hidden_maximum_km’).val();
var minimum_prix = $(‘#hidden_minimum_prix’).val();
var maximum_prix = $(‘#hidden_maximum_prix’).val();
var minimum_age = $(‘#hidden_minimum_age’).val();
var maximum_age = $(‘#hidden_maximum_age’).val();
$.ajax({
url: »includes/vehicules_controller.php »,
method: »POST »,
data:{action:action, minimum_km:minimum_km, maximum_km:maximum_km,
minimum_prix:minimum_prix, maximum_prix:maximum_prix,
minimum_age:minimum_age, maximum_age:maximum_age,},
success:function(data) {
$(‘.filter_data’).html(data);
}
});
}
function get_filter(class_name) {
var filter = [];
$(‘.’+class_name+’:checked’).each(function(){
filter.push($(this).val());
});
return filter;
}
$(‘.common_selector’).click(function(){
filter_data();
});
$(‘#km_range’).slider({
range:true,
min:100000,
max:200000,
values:[100000, 200000],
step:500,
stop:function(event, ui) {
$(‘#km_show’).html(ui.values[0] + ‘ – ‘ + ui.values[1]);
$(‘#hidden_minimum_km’).val(ui.values[0]);
$(‘#hidden_maximum_km’).val(ui.values[1]);
filter_data();
}
});
$(‘#prix_range’).slider({
range:true,
min:4000,
max:10000,
values:[4000, 10000],
step:100,
stop:function(event, ui) {
$(‘#prix_show’).html(ui.values[0] + ‘ – ‘ + ui.values[1]);
$(‘#hidden_minimum_prix’).val(ui.values[0]);
$(‘#hidden_maximum_prix’).val(ui.values[1]);
filter_data();
}
});
$(‘#age_range’).slider({
range:true,
min:2000,
max:2020,
values:[2000, 2020],
step:1,
stop:function(event, ui) {
$(‘#age_show’).html(ui.values[0] + ‘ – ‘ + ui.values[1]);
$(‘#hidden_minimum_age’).val(ui.values[0]);
$(‘#hidden_maximum_age’).val(ui.values[1]);
filter_data();
}
});
});

        
            
            
            
                $(document).ready(function(){
                filter_data();

                function filter_data() {
                    $('.filter_data').html('Loading...');
                    var action = 'fetch_data';
                    var minimum_km = $('#hidden_minimum_km').val();
                    var maximum_km = $('#hidden_maximum_km').val();

                    var minimum_prix = $('#hidden_minimum_prix').val();
                    var maximum_prix = $('#hidden_maximum_prix').val();

                    var minimum_age = $('#hidden_minimum_age').val();
                    var maximum_age = $('#hidden_maximum_age').val();

                    $.ajax({
                        url:"includes/vehicules_controller.php",
                        method:"POST",
                        data:{action:action, minimum_km:minimum_km, maximum_km:maximum_km,
                            minimum_prix:minimum_prix, maximum_prix:maximum_prix,
                            minimum_age:minimum_age, maximum_age:maximum_age,},
                        success:function(data) {
                            $('.filter_data').html(data);
                        }
                    });
                }

                function get_filter(class_name) {
                    var filter = [];
                    $('.'+class_name+':checked').each(function(){
                        filter.push($(this).val());
                    });
                    return filter;
                }

                $('.common_selector').click(function(){
                    filter_data();
                });

                $('#km_range').slider({
                    range:true,
                    min:100000,
                    max:200000,
                    values:[100000, 200000],
                    step:500,
                    stop:function(event, ui) {
                        $('#km_show').html(ui.values[0] + ' - ' + ui.values[1]);
                        $('#hidden_minimum_km').val(ui.values[0]);
                        $('#hidden_maximum_km').val(ui.values[1]);
                        filter_data();
                    }
                });

                $('#prix_range').slider({
                    range:true,
                    min:4000,
                    max:10000,
                    values:[4000, 10000],
                    step:100,
                    stop:function(event, ui) {
                        $('#prix_show').html(ui.values[0] + ' - ' + ui.values[1]);
                        $('#hidden_minimum_prix').val(ui.values[0]);
                        $('#hidden_maximum_prix').val(ui.values[1]);
                        filter_data();
                    }
                });

                $('#age_range').slider({
                    range:true,
                    min:2000,
                    max:2020,
                    values:[2000, 2020],
                    step:1,
                    stop:function(event, ui) {
                        $('#age_show').html(ui.values[0] + ' - ' + ui.values[1]);
                        $('#hidden_minimum_age').val(ui.values[0]);
                        $('#hidden_maximum_age').val(ui.values[1]);
                        filter_data();
                    }
                });

                });
            
            
            
        
    
    
     include('components/footer/footer.php');

——————–
dragonicat – Envoyé depuis le Discord : Culte du code

janvier 24, 2024 à 6:34 pm #35318

Bot
Participant
vehicules_controller.php:
php
prepare($query);
$stmt->bindParam(‘:minimum_km’, $minimum_km, PDO::PARAM_INT);
$stmt->bindParam(‘:maximum_km’, $maximum_km, PDO::PARAM_INT);
$stmt->bindParam(‘:minimum_prix’, $minimum_prix, PDO::PARAM_INT);
$stmt->bindParam(‘:maximum_prix’, $maximum_prix, PDO::PARAM_INT);
$stmt->bindParam(‘:minimum_age’, $minimum_age, PDO::PARAM_INT);
$stmt->bindParam(‘:maximum_age’, $maximum_age, PDO::PARAM_INT);
$stmt->execute();
$result = $stmt->fetchAll();
$total_row = $stmt->rowCount();
$output = »;
if($total_row > 0) {
foreach($result as $row) {
$output .= « »;
}
} else {
$output = ‘

Aucune offre ne correspond à vos critères.

‘;
}
echo $output;
}
Est-ce que quelqu’un peut m’aider?
```
require_once "dbh.inc.";

$minimum_km = $_POST["minimum_km"];
$maximum_km = $_POST["maximum_km"];

$minimum_prix = $_POST["minimum_prix"];
$maximum_prix = $_POST["maximum_prix"];

$minimum_age = $_POST["minimum_age"];
$maximum_age = $_POST["maximum_age"];

if(isset($_POST["action"])) {
    $query = "SELECT * FROM gvp_database.vehicule WHERE 1";

    if(isset($_POST["minimum_km"], $_POST["maximum_km"]) && !empty($_POST["minimum_km"]) 
        && !empty($_POST["maximum_km"]))
    {
        $query .= " AND kilometrage BETWEEN :minimum_km AND :maximum_km";
    }

    if(isset($_POST["minimum_prix"], $_POST["maximum_prix"]) && !empty($_POST["minimum_prix"]) 
        && !empty($_POST["maximum_prix"]))
    {
        $query .= " AND prix BETWEEN :minimum_prix AND :maximum_prix";
    }

    if(isset($_POST["minimum_age"], $_POST["maximum_age"]) && !empty($_POST["minimum_age"]) 
        && !empty($_POST["maximum_age"]))
    {
        $query .= " AND annee BETWEEN :minimum_age AND :maximum_age";
    }

    $stmt = $pdo->prepare($query);

    $stmt->bindParam(':minimum_km', $minimum_km, PDO::PARAM_INT);
    $stmt->bindParam(':maximum_km', $maximum_km, PDO::PARAM_INT);

    $stmt->bindParam(':minimum_prix', $minimum_prix, PDO::PARAM_INT);
    $stmt->bindParam(':maximum_prix', $maximum_prix, PDO::PARAM_INT);

    $stmt->bindParam(':minimum_age', $minimum_age, PDO::PARAM_INT);
    $stmt->bindParam(':maximum_age', $maximum_age, PDO::PARAM_INT);

    $stmt->execute();
    $result = $stmt->fetchAll();
    $total_row = $stmt->rowCount();
    $output = '';
    if($total_row > 0) {
        foreach($result as $row) {
            $output .= " include('./components/cards/offre-card.'); ";
        }
    } else {
        $output = 'Aucune offre ne correspond à vos critères.';
    }
    echo $output;
}
```
——————–
dragonicat – Envoyé depuis le Discord : Culte du code
janvier 29, 2024 à 5:53 pm #35470

Bot
Participant

tu ne devrais pas suivre ce tuto, il est obsolète et plein de mauvaises pratiques

——————–
mjollnir4 – Envoyé depuis le Discord : Culte du code