Ludovic ROLAND

Blog technique sur mes expériences de développeur.

Bootstrap : une fenêtre modale à la suppression des lignes de vos tableaux

7 juin 2013

Il y a quelques temps, déjà, j’avais écrit montrant comment utiliser les fenêtres modales de Jquery UI comme moyen de confirmation avant de supprimer une ligne d’un tableau. Lire l’article.

Puisque le framework Bootstrap est de plus en plus utilisé, je vous propose de reprendre cet article en utilisant ce coup-ci les fenêtres modales du framework de Twitter.

Voici ce qu’on obtiendra à la fin de cet article :

JQuery et Bootstrap

Téléchargement

La première étape consiste à télécharger JQuery sur cette page.

Rendez-vous maintenant sur le site de Bootstrap afin d’y télécharger les différents composants du framework (CSS et JS).

Mise en place dans le projet

Maintenant que tout est téléchargé, nous allons déployer les différents fichiers téléchargés dans notre projet.

Nous allons tout d’abord importer les fichiers Javascript.

<!-- JS -->
<script src="/js/jquery-1.9.1.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

Puis le fichier CSS :

<!-- CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css"  media="screen" />

La pop-up

La pop-up dont j’ai fait la capture d’écran plus haut est en réalité tout simplement une div HTML avec un identifiant qui permet à Bootstrap de l’afficher uniquement quand nécessaire.

Vous pouvez insérer ce morceau de code n’importe entre les balises body de votre page HTML.

<div class="modal hide fade" id="confirmModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	<h3>Confirmation de la suppression</h3>
    </div>
    <div class="modal-body">
        <p>Etes-vous sûr de vouloir supprimer cet élément ?</p>
    </div>
    <div class="modal-footer">
    	<a href="#" class="btn" id="confirmModalNo">Non</a>
	<a href="#" class="btn btn-primary" id="confirmModalYes">Oui</a>
    </div>
</div>

La page HTML

Notre page HTML va contenir un tableau. Sur chacune des lignes du tableau, il convient de placer un lien vers une page permettant de supprimer un élément.

Voici ce que vous pourriez avoir :

<table>
    <tr>
        <th>#</th>
        <th>Libellé</th>
        <th>Action</th>
    </tr>
    <?php foreach($objetList as $objet) {
    <tr>
        <td><?php echo $objet->id(); ?></td>
        <td><?php echo $objet->libelle(); ?></td>
	<td>
            <a class="confirmModalLink" href="/objet-delete.php?id=<?php echo $objet->id(); ?>">X</a>
        </td>
    </tr>
    <?php } ?>
</table>

Comme vous pouvez le voir, j’ai spécifié une classe à mon lien. Cette classe, va nous servir au travers de JQuery à détecter un click.

Le Javascript

Le principe

Le principe de fonctionnement est ici très basique.

L’objectif est ici de détecter lorsqu’il y a un click sur notre lien. Cela signifie que l’utilisateur souhaite supprimer une ligne du tableau. A ce click, nous allons afficher la pop-up de confirmation.

Si l’utilisateur confirme la suppression, on le redirige vers la page de suppression, dans le cas contraire, on ne fait rien.

Mise en pratique

La première chose à faire est de créer le corps de notre fonction Jquery :

$(document).ready(function() {

});

Nous allons immédiatement déclarer une variable qui aura pour objectif de stocker le lien vers lequel nous devons rediriger l’utilisateur s’il confirme la suppression :

$(document).ready(function() {
    var theHREF;
});

Il nous reste maintenant deux choses à faire : détecter quand l’utilisateur clique sur l’un des liens et récupérer le bon lien afin de le rediriger en cas de confirmation.

C’est ce que nous allons faire maintenant :

$(document).ready(function () {
    var theHREF;

    $(".confirmModalLink").click(function(e) {
        e.preventDefault();
	      theHREF = $(this).attr("href");
	      $("#confirmModal").modal("show");
    });

    $("#confirmModalNo").click(function(e) {
        $("#confirmModal").modal("hide");
    });

    $("#confirmModalYes").click(function(e) {
        window.location.href = theHREF;
    });
});

La ligne e.preventDefault(); permet d’annuler le comportement par défaut du lien. La ligne suivante permet de récupérer la cible du lien et la dernière ligne permet d’ouvrir la boite de dialogue.

Commentaires