Ludovic ROLAND - Le blog

Blog technique sur mes expériences de développeur

Une fenêtre de confirmation à la suppression des lignes de vos tableaux avec jquery !

| Comments

Je vous propose aujourd’hui de mettre en place une fenêtre de confirmation avant la suppression d’une ligne dans un tableau d’une application web grâce au composant Dialog de JQuery UI.

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

Motivation

Bien évidemment, on pourrait se contenter d’utiliser la fonction confirm() que propose le langage Javascript, mais dans mon cas, j’avais besoin d’une fenêtre un peu plus esthétique et JQuery est une référence en la matière.

Si je fais cet article, c’est que j’ai un peu galéré à obtenir le résultat que je voulais pour la simple et bonne raison que c’était la toute première fois que je touchais à JQuery. Je me dis que je ne suis pas le seul et que cet article sera certainement utile à d’autres !

JQuery et JQuery UI

Téléchargement

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

Rendez-vous maintenant sur le site de JQuery UI afin d’y choisir un thème et le télécharger. Dans la capture d’écran ci-dessus, c’est le thème Smoothness qui a été choisi. Pour utiliser le même thème que moi, rendez-vous directement sur cette page pour le télécharger.

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.

1
2
3
<!-- JS -->
<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.22.custom.min.js"></script>

Puis le fichier CSS :

1
2
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.22.custom.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 à JQuery 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.

1
2
3
4
5
6
<div id="dialog-confirm" title="Confirmation de la suppression" style="display:none;">
  <p>
    <span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
    Etes-vous sûr de vouloir supprimer cet élément ?
    </p>
</div>

Comme vous pouvez le constater, l’identifiant est dialog-confirm. Grâce à la balise title, il est possible de choisir le titre de la pop-up.  Dans cette div, il suffit alors de créer un paragraphe pour le contenu de la pop-up. Comme moi, vous pouvez ajouter une icône si vous le souhaitez.

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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table class="datatable width-100-p">
    <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="confirmModal" 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 :

1
2
3
$(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 :

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

Nous allons maintenant définir les caractéristiques de notre pop-up :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function() {
    var theHREF;

    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:160,
        width:500,
        autoOpen: false,
        modal: true,
        buttons: {
            "Oui": function() {
                $( this ).dialog( "close" );
                window.location.href = theHREF;
            },
            "Annuler": function() {
                $( this ).dialog( "close" );
            }
         }
    });
});

Comme vous pouvez le constater, la taille de notre boite de dialogue est fixe (160x500), elle ne s’ouvre pas automatiquement au chargement de la page et elle est de type modal.

Notre pop-up contient deux boutons. Un bouton Oui, qui quand on clique dessus ferme la boite de dialogue avant de rediriger l’utilisateur et un bouton Annuler qui se contente de ferme la boite de dialogue.

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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(document).ready(function() {
    var theHREF;

    $( "#dialog-confirm" ).dialog({
        resizable: false,
        height:160,
        width:500,
        autoOpen: false,
        modal: true,
        buttons: {
            "Oui": function() {
                $( this ).dialog( "close" );
                window.location.href = theHREF;
            },
            "Annuler": function() {
                $( this ).dialog( "close" );
            }
        }
    });

    $("a.confirmModal").click(function(e) {
        e.preventDefault();
        theHREF = $(this).attr("href");
        $("#dialog-confirm").dialog("open");
    });
});

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.

A lire aussi…

Comments