11484 sujets

JavaScript, DOM et API Web HTML5

Salut à tous,
je précise de suite que je suis une quiche en JS. Donc j'ai récupéré un script JS de filtre produits qui me convient en partie. j'ai modifié des checkbox en dropdown.
j'ai besoin de lié la dropdown département a la dropdown ville.
par contre la je patauge un petit peu si qql'un peu donner un petit coup de main ca serait pas de refus
index.php
 ...
<div class="container">
        <div class="row">
        	<br />
        	<h2 align="center">Advance Ajax Product Filters in PHP</h2>
        	<br />
            <div class="col-md-3">                				
				<div class="list-group">
					<h3>Price</h3>
					<input type="hidden" id="hidden_minimum_price" value="0" />
                    <input type="hidden" id="hidden_maximum_price" value="65000" />
                    <p id="price_show">1000 - 65000</p>
                    <div id="price_range"></div>
                </div>				
                <div class="list-group">
					<h3>Département</h3>
                       <div> 
                    <select name="departement" class="common_selector departement">
                    <option selected="selected">--Sélectionner un departement--</option>
					<?php
                    $query = "
                           SELECT DISTINCT(departement) FROM bien WHERE type_offre BETWEEN '0' AND '8' " ; 
                    $statement = $DB_con->prepare($query);
                    $statement->execute();
                    $result = $statement->fetchAll();
                    foreach($result as $row)
                    {
                    ?>
                    <option class="common_selector departement" value="<?php echo $row['departement']; ?>"><?php echo $row['departement']; ?></option>
                    <?php
                    }
                    ?>
                </select>
                    </div>
                </div>

				<div class="list-group">
					<h3>Ville</h3>
                    <select name="ville" class="common_selector ville">
                    <option selected="selected">--Sélectionner une ville--</option>
                    <?php
                
                    $query = "
                    SELECT DISTINCT(ville) FROM bien WHERE type_offre BETWEEN '0' AND '8' ORDER BY ville ASC" ; 
                    $statement = $DB_con->prepare($query);
                    $statement->execute();
                    $result = $statement->fetchAll();
                    foreach($result as $row)
                    {
                    ?>
                    <option class="common_selector ville" value="<?php echo $row['ville']; ?>"><?php echo $row['ville']; ?></option>
                    <?php    
                    }
                    ?>
                    </select>
                </div>
				
				<div class="list-group">
					<h3>Catégorie</h3>
					<?php
                    $query = "
                    SELECT DISTINCT(categorie) FROM bien ORDER BY categorie ASC";
                    $statement = $DB_con->prepare($query);
                    $statement->execute();
                    $result = $statement->fetchAll();
                    foreach($result as $row)
                    {
                    ?>
                    <div class="list-group-item checkbox">
                        <label><input type="checkbox" class="common_selector categorie" value="<?php echo $row['categorie']; ?>"  > <?php echo $row['categorie']; ?></label>
                    </div>
                    <?php
                    }
                    ?>	
                </div>
            </div>

            <div class="col-md-9">
            	<br />
                <div class="row filter_data">
                </div>
            </div>
        </div>
    </div>
<style>
#loading
{
	text-align:center; 
	background: url('loader.gif') no-repeat center; 
	height: 150px;
}
</style>

<script>
$(document).ready(function(){

    filter_data();

    function filter_data()
    {
        $('.filter_data').html('<div id="loading" style="" ></div>');
        var action = 'fetch_data';
        var minimum_price = $('#hidden_minimum_price').val();
        var maximum_price = $('#hidden_maximum_price').val();
        var departement = get_filter('departement');
        var ville = get_filter('ville');
        var categorie = get_filter('categorie');
        $.ajax({
            url:"fetch_data.php",
            method:"POST",
            data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, departement:departement, ville:ville, categorie:categorie},
            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').change(function(){
        filter_data();
    });
    $('#price_range').slider({
        range:true,
        min:1000,
        max:65000,
        values:[1000, 65000],
        step:500,
        stop:function(event, ui)
        {
            $('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
            $('#hidden_minimum_price').val(ui.values[0]);
            $('#hidden_maximum_price').val(ui.values[1]);
            filter_data();
        }
    });
});
</script>


fetch_data.php

include('dbconfig.php');

if(isset($_POST["action"]))
{
	$query = "
		SELECT * FROM bien WHERE type_offre BETWEEN '0' AND '8' " ; // type_offre BETWEEN '0' AND '8' pour tous ce qui est vente 1 a 7 --- BETWEEN '10' AND '15' pour la loc 11 à 14
	if(isset($_POST["minimum_price"], $_POST["maximum_price"]) && !empty($_POST["minimum_price"]) && !empty($_POST["maximum_price"]))
	{
		$query .= "
		 AND loyer BETWEEN '".$_POST["minimum_price"]."' AND '".$_POST["maximum_price"]."'
		";
	}
	if(isset($_POST["departement"]))
	{
		$brand_filter = implode("','", $_POST["departement"]);
		$query .= "
		 AND departement IN('".$brand_filter."') 
		";
	}	
	if(isset($_POST["ville"]))
	{
		$ram_filter = implode("','", $_POST["ville"]);
		$query .= "
		 AND ville IN('".$ram_filter."')
		";
	}
	if(isset($_POST["categorie"]))
	{
		$storage_filter = implode("','", $_POST["categorie"]);
		$query .= "
		 AND categorie IN('".$storage_filter."')
		";
	}
	echo $query."<br>";
	$statement = $DB_con->prepare($query);
	$statement->execute();
	$result = $statement->fetchAll();
	$total_row = $statement->rowCount();
	$output = '';
	if($total_row > 0)
	{
		foreach($result as $row)
		{
			$output .= '
			<div class="col-sm-4 col-lg-3 col-md-3">
				<div style="border:1px solid #ccc; border-radius:5px; padding:16px; margin-bottom:16px; height:450px;">
					<img src="image/'. $row['photo_1'] .'" alt="" class="img-responsive" >
					<p align="center"><strong><a href="#">'. $row['categorie'] .'</a></strong></p>
					<h4 style="text-align:center;" class="text-danger" >'. $row['loyer'] .' €</h4>
					<p>Cp : '. $row['cp'].' <br />
					Département : '. $row['departement'] .' <br />
					Ville : '. $row['ville'] .' <br />
					Chauffage : '. $row['nature_chauffauge'] .' </p>
				</div>
			</div>
			';
		}
	}
	else
	{
		$output = '<h3>No Data Found</h3>';
	}
	echo $output;
}


Merci d'avance de votre aide
Cdt
Modifié par spawns (21 Sep 2020 - 15:26)
Modérateur
Bonjour,

La question n'est pas claire. Que veux-tu dire par "lier" la dropdown département à la dropdown ville ?

Amicalement,
Bonjour,
Je veux dire que lorsque tu sélectionnes un département dans le dropdown "département", il faut que dans le dropdown "ville", cela affiche uniquement les villes du département sélectionné dans le dropdown "département".
Ex : je sélectionne le département "Gironde 33"
dans le dropdown ville apparait que les viles de Gironde "Bordeaux" "Arcachon" etc...
Modérateur
Bonjour,

Et où est rangé l'information disant qu'une ville est dans quel département ?

Amicalement,
En base de donnée.
id | ville | departement | .....
tu peux le voir sur la requête pour le dropdown ville
Modérateur
Bonjour,

Bon, pour les villes d'un département, finalement, je crois voir comment faire la liste (on peut aller piocher dans les adresses, ce n'est pas extra, mais ça peut marcher).

Et la base, elle est grosse ?

Amicalement,
Modérateur
Bonjour,

Il me semble que tu peux t'en sortir en rajoutant simplement juste après
    $('.common_selector').change(function(){
        filter_data();
    });

... un truc du genre
    $('.common_selector.departement').change(function(){
        // rajouter ici le code qui va changer le contenu du <select> qui liste les villes
        filter_data();
    });

Je ne sais pas si ça te suffit comme indication, ou bien s'il faut détailler encore plus.

Amicalement,
re,
non cela ne fonctionne pas, si tu peux détailler un peu.
Tu peux faire un test avec ce code car il est quasi complet, cela sera peut être plus simple pour toi.
tu fais une mini bdd avec les champs suivant
id | ville | departement | type_offre | prix
1 | bordeaux | 33 | 1 | 200
2 | arcachon | 33 | 1 | 300
3 | angouleme| 16 | 1 | 230
4 | cognac | 16 | 1 | 250
etc
Modérateur
Bonjour,

Il y avait bien sûr du code à rajouter à la place de ma phrase :
// rajouter ici le code qui va changer le contenu du <select> qui liste les villes Smiley smile

Une possibilité est que ce code soit similaire à la fonction filter_data(), mais au lieu d'aller pêcher dans la base de données une liste de biens, ce code doit, via une requête ajax comme dans filter_data(), aller pêcher la liste des villes pour le département présentement sélectionné dans le <select> des départements, et à la fin du code, il doit remplacer le contenu du <select> listant les villes par ce qu'il vient de pêcher dans la base.

Il faut aussi bien sûr faire un script php similaire à fetch_data.php, qui sera utilisé par la requête ajax, qui contiendra le code qui interrogera la base, fera la liste des villes, et fabriquera le html à mettre dans le <select> des villes.

Ce n'est pas plus compliqué que de faire la requête qui récupère la liste des bien et l'affiche dans la page.

On aurait donc par exemple :
$('.common_selector.departement').change(function(){
        filter_ville();
        filter_data();
    });

function filter_ville()
{
// ici un code similaire à la fonction filter_data, mais pour aller chercher les villes
// et qui finit par la requête ajax suivante
        $.ajax({
            url:"fetch_ville.php",
            method:"POST",
            data:{action:action, departement:departement},
            success:
               // ici la fonction qui met à jour le html du <select> des villes
                ;
            }
}


Et le fetch_ville.php

include('dbconfig.php');

if(isset($_POST["action"]))
{
 	// ici le code qui fait la requête mysql appropriée
 	// ici le code qui fabrique le html construisant le <select> des villes
 	echo $output;
}


Je vois si j'ai le temps de finir ce code (je ne sais pas quand). Ce n'est pas dur (surtout vu qu'à peu près la même chose est déjà fait pour les biens), ça prend juste un peu de temps.

Amicalement
Merci pour les précisions,
j'ai essayé plusieurs truc mais cela ne fonctionne pas.
Si tu as un peu de temps pour te pencher sur le truc, je suis preneur si tu trouve une solution.
Normalement tu as la partie la plus importante des fichiers et la structure bdd.

Cdt
Modérateur
Bonjour,

Alors voilà !

La partie javascript de index.php
$(document).ready(function(){

    filter_data();

    function filter_data()
    {
        $('.filter_data').html('<div id="loading" style="" ></div>');
        var action = 'fetch_data';
        var minimum_price = $('#hidden_minimum_price').val();
        var maximum_price = $('#hidden_maximum_price').val();
        var departement = get_filter('departement');
        var ville = get_filter('ville');
        var categorie = get_filter('categorie');
        $.ajax({
            url:"fetch_data.php",
            method:"POST",
            data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, departement:departement, ville:ville, categorie:categorie},
            success:function(data){
                $('.filter_data').html(data);
            }
        });
    }
    // ajout d'une fonction qui va déclencher l'exécution du script  "fetch_ville.php"
    // et qui va remplacer le contenu de la balise <select> des villes
    // par ce que va renvoyer "fetch_ville.php"
    function filter_ville()
    {
    	$('select[name="ville"]').html('');
		var action = 'fetch_ville';
        var departement = get_filter('departement');
        $.ajax({
            url:"fetch_ville.php",
            method:"POST",
            data:{action:action, departement:departement},
            success:function(data){
                $('select[name="ville"]').html(data);
            }
        });
    }
    function get_filter(class_name)
    {
        var filter = [];
        $('.'+class_name+':checked').each(function(){
            filter.push($(this).val());
        });
        return filter;
    }
    $('.common_selector').change(function(){
        filter_data();
    });
    // ajout d'une fonction qui se déclenche quand on change le département
    $('.common_selector.departement').change(function(){
        filter_ville();
        filter_data();
    });
    $('#price_range').slider({
        range:true,
        min:1000,
        max:65000,
        values:[1000, 65000],
        step:500,
        stop:function(event, ui)
        {
            $('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
            $('#hidden_minimum_price').val(ui.values[0]);
            $('#hidden_maximum_price').val(ui.values[1]);
            filter_data();
        }
    });
});


Et voilà le script fetch_ville.php qui s'inspire de fetch_data.php, et qui sera appelé par ajax pour récupérer la liste des villes et construire la liste des <option> du <select> des villes.

Comme fetch_data.php, il comprend 2 parties : 1 partie qui interroge la base et une partie qui fabrique le code html listant les <option> à mettre dans le <select> des villes.
include('dbconfig.php');

if(isset($_POST["action"]))
{
	$query = "
		SELECT * FROM bien" ;
	if(isset($_POST["departement"]))
	{
		$brand_filter = implode("','", $_POST["departement"]);
		$query .= "
		 	WHERE departement IN('".$brand_filter."') 
			";
	}	
	$statement = $DB_con->prepare($query);
	$statement->execute();
	$result = $statement->fetchAll();
	$total_row = $statement->rowCount();
	$output =  '<option selected="selected">--Sélectionner une ville--</option>';
	if($total_row > 0)
	{
		foreach($result as $row)
		{
			$output .= '
			<option class="common_selector ville" value="'.$row['ville'].'">'.$row['ville'] .'</option>';
		}
	}
	echo $output;
}


EDIT : j'ai modifié (plusieurs fois) fetch_ville.php depuis mon premier post (il contenait quelques petits bugs qui empêchaient le <select> des villes de fontionner). C'est encore perfectible. J'ai en particulier dû m'y reprendre à plusieurs fois pour traiter le cas d'un utilisateur qui aurait sélectionné un département, puis qui serait revenu sélectionner la ligne "--Sélectionner un departement--". Un utilisateur retort sans aucun doute, mais il fallait prévoir le cas.

A priori, ça fonctionne sur une petite démo chez moi. Ça devrait donc aussi fonctionner chez toi.

Amicalement,
Modifié par parsimonhi (26 Sep 2020 - 08:04)
Grand merci a toi parsimonhi,
ca marche nickel en plus je comprends bien comment cela fonctionne du coup.
histoire de dire Smiley smile Smiley smile
il fallait rajouter une petit
WHERE departement IN('".$brand_filter."')  GROUP BY ville

dans le fetch_ville.php pour éviter les doublons dans le select.

Encore Merci

Cdt
Modifié par spawns (28 Sep 2020 - 17:31)