Remplir une liste déroulante à l’aide de jQuery.ajax()

Voici une figure de cas intéressante : une page Web écrite en PHP affiche un formulaire qui contient, entre autres, une liste déroulante. Les valeurs de cette liste sont tirées de la base de données.

On pourra faire appel à jQuery.ajax() pour remplir cette liste déroulante dès que le DOM sera chargé en mémoire. De cette façon, le code HTML de la page sera affiché le plus rapidement possible. La lecture dans la base de données pour remplir la liste déroulante sera donc effectuée dans un deuxième temps, sans ralentir l'affichage initial.

▼Publicité

Voici le code PHP qui effectuera la lecture dans la base de données. Ce code sera placé dans un fichier que j'ai nommé generer-options-categories.php :

PHP

// retourne les balises <option> pour remplir un <select> de catégories à partir des données d'une table

// ce code est destiné à être appelé via AJAX

// si problème rencontré, retournera plutôt une des chaînes suivantes :

// REQUETE : la requête a planté

// AUCUNEDONNEE : la requête n'a retourné aucune donnée

// NONDETERMINE : le programme a rencontré une erreur non déterminée

 

// si le code serveur effectuait une tâche réservée à certains usagers,

// il faudrait mettre en place un mécanisme pour vérifier les droits de l'usager authentifié. 

// ...

 

// pour les opérations critiques, il faudrait également utiliser un mécanisme de nonce et vérifier ici si le nonce est valide

// ...

 

// branchement à la base de données

// ...

 

// montage des balises HTML à partir des données de la BD

$retour = "";

$requete = "SELECT categorie_id, categorie_description FROM categorie ORDER BY categorie_description";

$resultat = $mysqli->query($requete);     // exécute la requête

 

if ($resultat) {    // si la requête a fonctionné

    if ($mysqli->affected_rows != 0) {    // si la requête a retourné au moins un enregistrement

 

        while ($enreg = $resultat->fetch_row()) {     // extrait chaque ligne une à une

            $retour .= "<option value='$enreg[0]'>$enreg[1]</option>";

        }

    }

    else {

        $retour = "AUCUNEDONNEE";

    }

}

else {

    $retour = "REQUETE";

}

 

// ne devrait jamais renter ici mais on conserve ce test au cas où

if ("" == $retour) {

    $retour = "NONDETERMINE";

}

 

echo $retour; // il faut faire un echo de code html puisque l'appel AJAX a été fait avec dataType: "html"

La page Web affichant le formulaire pourra faire appel à ce code par AJAX comme suit :

HTML

<form method="post">

    <label for="categorie">Catégorie :</label>

    <select name="categorie" id="categorie" required></select>

    <input type="submit" value="Envoyer" />

</form>

 

<script>

    $(function () {

        remplirListeCategories();

    });

 

    function remplirListeCategories() {

        var jqxhr = $.ajax({

            type: 'get',    // on n'a pas de paramètres à envoyer alors GET est sécuritaire

            url: 'generer-options-categories.php',

            dataType: "html",    // le fichier php fait un echo de code HTML

            contentType: "application/x-www-form-urlencoded; charset=UTF-8",

            data: ""

        })

        .done(function (response, textStatus, jqXHR) {

            // Appel réussi : on affiche le code HTML généré par le code serveur

            // Si message d'erreur, on le place dans un <option> pour qu'il s'affiche dans la liste déroulante

            if ("REQUETE" == response) {

                $("#categorie").html("<option value=''>Un problème technique nous empêche de retrouver les catégories (code R).</option>");

            }

            else if ("AUCUNEDONNEE" == response) {

                $("#categorie").html("<option value=''>Il n'y a actuellement aucune catégorie dans le système.</option>");

            }

            else if ("NONDETERMINE" == response) {

                $("#categorie").html("<option value=''>Un problème technique nous empêche de retrouver les catégories (code I).</option>");

            }

            else if (response.indexOf('<option') != 0) {

                // la chaîne ne débute pas par <option donc c'est probablement un message d'erreur PHP retourné par AJAX

                $("#categorie").html("<option value=''>Un problème technique nous empêche de retrouver les catégories (code E).</option>");

            }

            else {

                $("#categorie").html("<option value=''>Veuillez choisir...</option>" + response);

            }

        })

        .fail(function (jqXHR, textStatus, errorThrown) {

            // Réagit si le code serveur n'a pas pu être appelé par AJAX, s'il a planté ou s'il n'a pas retourné le bon type de données

            $("#categorie").html("<option value=''>Un problème technique nous empêche de retrouver les catégories (code A).</option>");

        });

    }

</script>

Merci de partager ! Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on StumbleUponEmail this to someone
Catégories