Debian
Debian-France
Debian-Facile
Debian-fr.org
Forum-Debian.fr
Debian ?
Communautés
Vous n'êtes pas identifié(e).
L'icône rouge permet de télécharger chaque page du wiki visitée au format
PDF et la grise au format ODT →
Ci-dessous, les différences entre deux révisions de la page.
| — |
utilisateurs:hypathie:tutos:php_jquery-ajax_autocomplete [09/06/2021 18:36] (Version actuelle) Hypathie créée |
||
|---|---|---|---|
| Ligne 1: | Ligne 1: | ||
| + | ====== PHP_Jquery_AJAX_Autocomplete ====== | ||
| + | |||
| + | * Objet : Remplir un menu déroulant avec le data d'une base de données | ||
| + | * Niveau requis : {{tag>avisé}} | ||
| + | * Commentaires : //Contexte d'utilisation du sujet du tuto. // FIXME | ||
| + | * Débutant, à savoir : [[:doc:systeme:commandes:le_debianiste_qui_papillonne|Utiliser GNU/Linux en ligne de commande, tout commence là !.]] :-) | ||
| + | |||
| + | ===== Code ===== | ||
| + | |||
| + | === Jquery fonction $.ajax === | ||
| + | |||
| + | <code php> | ||
| + | // file name : formulairePersonne.php | ||
| + | |||
| + | <div> | ||
| + | |||
| + | |||
| + | <div class="formulaire"> | ||
| + | <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> | ||
| + | <input type="text" hidden name="idMembre" value="<?php echo $infosAdrr['idMembre'] ?>"> | ||
| + | <legend> Informations complémentaires : </legend> | ||
| + | </br> | ||
| + | <label style="font-weight:bold;">Pour le membre :</label> | ||
| + | <label> <?php echo $infosAdrr['nom'] ?> </label> | ||
| + | <label><?php echo $infosAdrr['prenom'] ?></label> | ||
| + | </br> | ||
| + | <label style="font-weight: bold;">Pseudo :</label> | ||
| + | <label><?php echo $infosAdrr['pseudo'] ?></label> | ||
| + | </br> | ||
| + | <p><span class="error">* Champs obligatoires</span></p> | ||
| + | <label style="font-weight:bold;">Numéro de rue</label> | ||
| + | </br> | ||
| + | <input style="width:40px;" type="text" name="numRue" value="<?php echo $infosAdrr['numRue'] ?>"> | ||
| + | </br></br> | ||
| + | <label style="font-weight:bold;">Libellé adresse</label> | ||
| + | <span class="error">*</span> | ||
| + | </br> | ||
| + | <input style="width:350px;" type="text" name="adrrText" value="<?php echo $infosAdrr['adrrText'] ?>"> | ||
| + | </br></br> | ||
| + | <label style="font-weight:bold;">Département</label> | ||
| + | <span class="error">*</span> | ||
| + | </br> | ||
| + | <input style="width:150px;" type="text" name="dpt" id="rechercheDepartements" value="<?php echo $infosAdrr['dpt'] ?>"> | ||
| + | <script language='javascript'> | ||
| + | $('#rechercheDepartements').autocomplete({ | ||
| + | source: function( request, response ) { | ||
| + | $.ajax({ | ||
| + | url : '../../outils/autocomplete.php', | ||
| + | dataType: "json", | ||
| + | data: { | ||
| + | filtreDepartement: request.term, | ||
| + | type: 'departements' | ||
| + | }, | ||
| + | success: function( data ) { | ||
| + | response( $.map( data, function( item ) { | ||
| + | return { | ||
| + | label: item, | ||
| + | value: item | ||
| + | } | ||
| + | })); | ||
| + | } | ||
| + | }); | ||
| + | }, | ||
| + | autoFocus: true, | ||
| + | minLength: 0 | ||
| + | }); | ||
| + | </script> | ||
| + | </br></br> | ||
| + | <label style="font-weight:bold;">Ville</label> | ||
| + | <span class="error">*</span> | ||
| + | </br> | ||
| + | <input style="width:150px;" type="text" name="ville" id="rechercheVilles" value="<?php echo $infosAdrr['ville'] ?>"> | ||
| + | <script language='javascript'> | ||
| + | $('#rechercheVilles').autocomplete({ | ||
| + | source: function( request, response ) { | ||
| + | $.ajax({ | ||
| + | url : '../../outils/autocomplete.php', | ||
| + | dataType: "json", | ||
| + | data: { | ||
| + | filtreVille: request.term, | ||
| + | filtreDepartement : $('#rechercheDepartements').val(), | ||
| + | type: 'villes' | ||
| + | }, | ||
| + | success: function( data ) { | ||
| + | response( $.map( data, function( item ) { | ||
| + | return { | ||
| + | label: item, | ||
| + | value: item | ||
| + | } | ||
| + | })); | ||
| + | } | ||
| + | }); | ||
| + | }, | ||
| + | autoFocus: true, | ||
| + | minLength: 2 | ||
| + | }); | ||
| + | </script> | ||
| + | </br></br> | ||
| + | <label style="font-weight:bold;">Code postal</label> | ||
| + | <span class="error">*</span> | ||
| + | </br> | ||
| + | <input style="width:53px;" type="text" name="codePostal" id="rechercheCp" value="<?php echo $infosAdrr['codePostal'] ?>"> | ||
| + | <script language='javascript'> | ||
| + | $('#rechercheCp').autocomplete({ | ||
| + | source: function( request, response ) { | ||
| + | $.ajax({ | ||
| + | url : '../../outils/autocomplete.php', | ||
| + | dataType: "json", | ||
| + | data: { | ||
| + | filtreCp: request.term, | ||
| + | filtreV : $('#rechercheVilles').val(), | ||
| + | type: 'codePostal' | ||
| + | }, | ||
| + | success: function( data ) { | ||
| + | response( $.map( data, function( item ) { | ||
| + | return { | ||
| + | label: item, | ||
| + | value: item | ||
| + | } | ||
| + | })); | ||
| + | } | ||
| + | }); | ||
| + | }, | ||
| + | autoFocus: true, | ||
| + | minLength: 0 | ||
| + | }); | ||
| + | </script> | ||
| + | </br></br> | ||
| + | <label style="font-weight:bold;">Téléphone</label> | ||
| + | <span class="error">*</span> | ||
| + | </br> | ||
| + | <input style="width:110px;" type="text" name="telephone" value="<?php echo $infosAdrr['telephone'] ?>"> | ||
| + | </br></br> | ||
| + | <label style="font-weight:bold;" >Genre</label> | ||
| + | <span class="error">*</span></br> | ||
| + | </br> | ||
| + | <label style="border:1px;border-radius:5px; box-shadow:1px 1px 2px #C0C0C0 inset; | ||
| + | background-color:#F2F2F2; margin-left:6px; padding:3px;">Femme</label> | ||
| + | <input style="margin-left:50px;" type="radio" name="sexe" | ||
| + | <?php if (isset($infosAdrr['sexe']) && $infosAdrr['sexe']=="F") echo "checked"; ?> value="F"> | ||
| + | |||
| + | </br></br> | ||
| + | <label style="border:1px;border-radius:5px; box-shadow:1px 1px 2px #C0C0C0 inset; | ||
| + | background-color:#F2F2F2; margin-left:6px; padding:3px;">Homme</label> | ||
| + | <input style="margin-left:48px;" type="radio" name="sexe" | ||
| + | <?php if (isset($infosAdrr['sexe']) && $infosAdrr['sexe']=="M") echo "checked";?> value="M"> | ||
| + | <input hidden type="radio" name="sexe" value="pasRepondu" | ||
| + | <?php if ($infosAdrr['sexe']=="") echo "checked";?> | ||
| + | <?php if (isset($infosAdrr['sexe']) && $infosAdrr['sexe']!="pasRepondu") echo "unchecked";?>> | ||
| + | </br></br> | ||
| + | <label style="font-weight:bold;">Mot de passe actuel</label> | ||
| + | <span class="error">*</span> | ||
| + | </br> | ||
| + | <input style="width:150px;" type="password" name="motPasse" placeholder="**************" | ||
| + | value="<?php echo $infosAdrr['motPasse'] ?>"> | ||
| + | </br></br></br> | ||
| + | <input type="submit" value="Envoyer" | ||
| + | <?php '<script type="text/javascript">location.reload();</script>' ?> | ||
| + | /> | ||
| + | </form> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | </code> | ||
| + | |||
| + | |||
| + | |||
| + | === Requetage php servi à ajax === | ||
| + | |||
| + | |||
| + | <code php> | ||
| + | <?php | ||
| + | |||
| + | require 'ManagerAutocomplete.class.php'; | ||
| + | $managerAutocomplete = new ManagerAutocomplete(); | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | if($_GET['type'] == 'departements'){ | ||
| + | |||
| + | $data = $managerAutocomplete->getNomsDepartements($_GET['filtreDepartement'].'%'); | ||
| + | echo json_encode($data); | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | if($_GET['type'] == 'villes'){ | ||
| + | |||
| + | $data = $managerAutocomplete->getVillesFranceParDpt($_GET['filtreVille'].'%', $_GET['filtreDepartement'].'%'); | ||
| + | echo json_encode($data); | ||
| + | } | ||
| + | |||
| + | |||
| + | if($_GET['type'] == 'codePostal'){ | ||
| + | |||
| + | $data = $managerAutocomplete->getCodePostalParVille($_GET['filtreCp'].'%', $_GET['filtreV'].'%'); | ||
| + | echo json_encode($data); | ||
| + | } | ||
| + | |||
| + | </code> | ||
| + | |||
| + | <code php> | ||
| + | // file name : ManagerAutocomplete.class.php | ||
| + | |||
| + | <?php | ||
| + | |||
| + | error_reporting(E_ALL); | ||
| + | ini_set('display_errors', '1'); | ||
| + | include_once '../dto/RequetesMembre.class.php'; | ||
| + | |||
| + | class ManagerAutocomplete | ||
| + | { | ||
| + | |||
| + | private $requete; | ||
| + | |||
| + | public function __construct() | ||
| + | { | ||
| + | $this->requete = new RequetesMembre(); | ||
| + | } | ||
| + | |||
| + | //////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
| + | /////////////////////////////////////////// Gestion affichage des pages /////////////////////////////////// | ||
| + | //////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
| + | |||
| + | public function getNomsDepartements($filtreDpt) | ||
| + | { | ||
| + | $data = $this->requete->getNomsDepartements($filtreDpt); | ||
| + | return $data; | ||
| + | } | ||
| + | |||
| + | |||
| + | public function getVillesFranceParDpt($filtreVille, $filtreDpt) | ||
| + | { | ||
| + | $data = $this->requete->getVillesFranceParDpt($filtreVille, $filtreDpt); | ||
| + | return $data; | ||
| + | } | ||
| + | |||
| + | public function getCodePostalParVille($filtreCodePostal, $filtreVille) | ||
| + | { | ||
| + | $data = $this->requete->getCodePostalParVille($filtreCodePostal, $filtreVille); | ||
| + | return $data; | ||
| + | } | ||
| + | |||
| + | |||
| + | public function estUnePersonne($idMembre) | ||
| + | { | ||
| + | $bool = $this->requete->estUnePersonne($idMembre); | ||
| + | return $bool; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | </code> | ||
| + | |||
| + | === Requetes === | ||
| + | |||
| + | <code php> | ||
| + | // RequetesMembre.class.php | ||
| + | |||
| + | <?php | ||
| + | error_reporting(E_ALL); | ||
| + | ini_set('display_errors', '1'); | ||
| + | |||
| + | require 'Connexion.class.php'; | ||
| + | |||
| + | class RequetesMembre | ||
| + | { | ||
| + | |||
| + | public function __construct() | ||
| + | { | ||
| + | $this->pdo = Database :: connect(); | ||
| + | $this->pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); | ||
| + | } | ||
| + | | ||
| + | public function estUnePersonne($idMembre) | ||
| + | { | ||
| + | $sql="select personne.personne_id from personne"; | ||
| + | $sql.=" join membre on personne.idMembre=membre.membre_id where membre.membre_id=$idMembre;"; | ||
| + | $q = $this->pdo->query($sql)->fetchColumn(); | ||
| + | return (bool)$q; | ||
| + | } | ||
| + | |||
| + | public function getNomsDepartements($filtreDpt) | ||
| + | { | ||
| + | | ||
| + | $result = $this->pdo->prepare("SELECT nom FROM Departements WHERE nom LIKE :paramDepartement"); | ||
| + | $result->execute(array(':paramDepartement' => $filtreDpt)); | ||
| + | $data = array(); | ||
| + | foreach($result as $row) | ||
| + | { | ||
| + | array_push($data, $row['nom']); | ||
| + | } | ||
| + | return $data; | ||
| + | |||
| + | } | ||
| + | | ||
| + | |||
| + | public function getVillesFranceParDpt($filtreVille, $filtreDpt) | ||
| + | { | ||
| + | $result = $this->pdo->prepare("SELECT Villes_france.ville_nom_reel FROM Villes_france INNER JOIN Departements ON Villes_france.departement_code=Departements.num_departement WHERE Villes_france.ville_nom_simple LIKE :paramVille AND Departements.nom LIKE :paramDepartement"); | ||
| + | $result->execute(array(':paramVille' => $filtreVille, ':paramDepartement' => $filtreDpt)); | ||
| + | $data = array(); | ||
| + | foreach($result as $row) | ||
| + | { | ||
| + | array_push($data, $row['ville_nom_reel']); | ||
| + | } | ||
| + | return $data; | ||
| + | } | ||
| + | |||
| + | |||
| + | public function getCodePostalParVille($filtreCodePostal, $filtreVille) | ||
| + | { | ||
| + | $result = $this->pdo->prepare("select ville_code_postal from Villes_france where ville_nom_reel LIKE :paramVille AND ville_code_postal LIKE :paramCp"); | ||
| + | $result->execute(array(':paramCp' => $filtreCodePostal, ':paramVille' => $filtreVille)); | ||
| + | $data = array(); | ||
| + | foreach($result as $row) | ||
| + | { | ||
| + | array_push($data, $row['ville_code_postal']); | ||
| + | } | ||
| + | return $data; | ||
| + | } | ||
| + | | ||
| + | } | ||
| + | |||
| + | |||
| + | </code> | ||
| + | |||
