Impossible d'empêcher la redirection avec confirm()

**saninx** · 18/02/2016, 18h53

Bonjour,

J'aimerais pouvoir empêcher ou confirmer la redirection sur une page ou se situe une requête AJAX à exécuter. cependant avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick=return confirm()

dans ma balise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href=""><a>

, même quand je click sur annuler, le lien est validé et ma requête AJAX est excécutée.

quelqu'un s'aurait comment empêcher sa ?

Merci !

**micetf** · 18/02/2016, 19h49

Bonjour,

Il faut désactiver le comportement par défaut : event.preventDefault()

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <a href="http://www.developpez.net" id="link">Lien</a>
    <script>
    document.getElementById('link').addEventListener('click', function (e) {
        if (!window.confirm("T'es sûr ?")) {
            e.preventDefault();
        }
    });
    </script>
</body>
</html>

**saninx** · 19/02/2016, 12h05

après avoir annulé le e.preventdefault de mon fichier .js la suppression s'éffectue quand même :
voici la totalité de mon code pour plus d'éclairage :

annulation.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<?php
require_once '../fonctions/connexion.php';
require_once '../fonctions/DateCsv.php';
?>
 
<!DOCTYPE html>
<html>
<head>
    <title>Annulation Chèque</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http - equiv ="X-UA-Compatible " content ="IE= edge">
    <meta name =" viewport " content =" width =device -width , initial-scale =1.0">
    <!--Inclusion Bootstrap CSS-->
    <link rel="shortcut icon" href="../img/LogoScribe.jpg">
    <link rel="stylesheet" type="text/css" href="../bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../styles/style.css">
 
</head>
<body>
 
<?php
 
if(isset($_POST) && !empty($_POST))
{
    extract($_POST);
    $d = array
    (
        'tbq' => $bq,
        'tdp' => $dp,
        'tfp' => $fp,
    );
    //if
}
?>
<header class="header_container">
    <?php require_once ('HautPage.php'); ?>
</header>
<div class="row">
    <div class="col-sm-3" id="barre1">Accueil > Chèques > Administration > Annulation</div>
    <div class="col-sm-9" id="barre2">&nbsp</div>
</div>
<div class="separateur-small">&nbsp</div>
<?php include "MenuChqAdmin.php"; ?>
<div class="container">
    <div class="row">
        <div class="col-sm-12"><H2 class="titre"></H2></div>
    </div>
    <div class="row">
        <div class="col-sm-offset-1 col-sm-10 col-sm-offset-1" style="">
            <form action="" method="post" class="form-horizontal col-sm-12">
                <fieldset>
                    <legend class="entete">Informations Chèque</legend>
                    <div class="form-group">
                        <label class="col-sm-3">Banque :</label>
                        <div class="col-sm-3">
                            <select id="select" name="bq" class="form-control" required>
                                <option value="" selected="selected"></option>
                                <?php
                                $sql = "SELECT Code_Banque, Lib_Banque FROM paramcheque ORDER BY Lib_Banque ASC";
                                $req = $DB->query($sql);
                                while ($donne = $req->fetch())
                                {
                                    ?><option value="<?php echo $donne['Code_Banque']; ?>" ><?php echo $donne['Lib_Banque']; ?></option>
                                    <?php
                                }
                                ?>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3">Début période :</label>
                        <div class="col-sm-3">
                            <input type="date" name="dp" class="form-control" required/>
                        </div>
                        <label class="col-sm-3">Fin période :</label>
                        <div class="col-sm-3">
                            <input type="date" name="fp" class="form-control" required/>
                        </div>
                    </div>
 
                </fieldset>
                <div class="separateur">&nbsp</div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-3">
                        <button type="submit" class="btn btn-primary btn-block">
                            <span class="glyphicon glyphicon-eye-open"></span>
                            &nbsp;&nbsp;&nbsp;Rechercher</button>
                    </div>
                    <div class="col-sm-3">
                        <input type="reset" value="Annuler" class="btn btn-primary btn-block">
                    </div>
                </div>
                <div class="separateur">&nbsp</div>
            </form>
        </div>
    </div>
    <?php
    if (isset($bq, $dp, $fp))
    {
    $sql1 = "SELECT Lib_Banque FROM paramcheque WHERE Code_Banque = '$bq' ";
    $req1 = $DB->query($sql1);
    $d1 = $req1->fetch();
    ?>
    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-primary">
                <table class="table table-striped table-condensed">
                    <div class="panel-heading">
                        <h3 class="panel-title">Résultats</h3>
                    </div>
                    <thead>
                    <tr>
                        <th>ACTION</th>
                        <th>N° CHEQUE</th>
                        <th>BENEFICIAIRE</th>
                        <th>MONTANT REGLEMENT</th>
                        <th>DATE CHEQUE</th>
                        <th>BANQUE</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php
 
                    $bank = $d1['Lib_Banque'];
                    $datdeb = dateUSW($dp);
                    $datfin = dateUSW($fp);
 
                    $sql = "SELECT id_cheque, NumChq, Beneficiaire, MontRgl, DateChq, Banque
                                                                                                FROM prestation
                                                                                                WHERE (Banque = '$bank'
                                                                                                                AND DateChq BETWEEN '$datdeb' AND '$datfin'
                                                                                                                AND Etat = 'Tiré')";
                    $req = $DB->query($sql);
                    while ($d = $req->fetch())
                    {
                        ?>
                        <tr>
 
                            <td><?php echo $d['NumChq']; ?></td>
                            <td><?php echo $d['Beneficiaire']; ?></td>
                            <td><?php echo number_format($d['MontRgl'], 0, ',', ' '); ?></td>
                            <td><?php echo dateFRW($d['DateChq']); ?></td>
                            <td><?php echo $d['Banque']; ?></td>
                            <td><a href="reqanul.php?id=<?php echo $d['id_cheque']; ?>" class="btn btn-danger" id="link" >X</a></td>
                        </tr>
                        <?php
                    }
                    }
                    header("Location : Validation.php");
                    ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<footer class="row col-sm-12">
 
</footer>
 
</body>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/annulchq.js"></script>
<script type="text/javascript">
document.getElementById('link').addEventListener('click', function(e){
    if (window.confirm("Valider annulation !")){
        e.preventDefault();
    }
}) ;
</script>
</html>

reqanul.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
require_once '../fonctions/connexion.php';
 
if (isset($_GET['id']))
{
    $idc = $_GET['id'];
 
    $sql2= "DELETE FROM prestation WHERE (id_cheque = '$idc')";
    $req2 = $DB->exec($sql2);
    header("Location: Annulation.php");
}
else
{
    header('500 Internal server error', true, 500);
    die('Impossible de valider ce chèque');
}
 
?>

annulchq.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
(function($){
    $('.btn-danger').on('click', function(e){
        //e.preventDefault();
        var $a = $(this);
        var url = $a.attr('href');
        $a.css("background-color", "green");
        $a.text('Annulation');
        $.ajax(url)
            .done(function(data, text, jqxhr){
                $a.parents('tr').fadeOut();
            })
            .fail(function(jqxhr){
                alert(jqxhr.responseText);
            })
            .always(function(){
                $a.text('X');
            });
    });
})(jQuery);

Merci !

**micetf** · 19/02/2016, 12h33

Bonjour,

A priori, tu as plusieurs lignes du tableau qui proposent le bouton (x) d'annulation. Tu ne peux donc utiliser un id, tu dois identifier chaque lien par un class="annuler" (par exemple) et alors :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
var links = document.getElementsByClassName('annuler');
for (var i = 0; i < links.length; i += 1) {
    links[i].addEventListener('click', function(e){
      if (window.confirm("Valider annulation !")){
        e.preventDefault();
      }
    });
}

**saninx** · 19/02/2016, 13h04

Merci pour ton aide, mais c'est pareil il n'arrive toujours pas à annuler !

**micetf** · 19/02/2016, 13h15

Bonjour,

Etant donnée la demande de départ (basique), je n'avais pas plus fait attention que cela au code jQuery qui suivait.
Il n'est pas nécessaire de rajouter le code JS à la fin du HTML,
il suffit de traiter la confirmation dans annulchq.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
(function($){
    $('.btn-danger').on('click', function(e){
        e.preventDefault();
        if (!window.confirm("Valider annulation !")){
            return;
        }
        var $a = $(this);
        var url = $a.attr('href');
        $a.css("background-color", "green");
        $a.text('Annulation');
        $.ajax(url)
            .done(function(data, text, jqxhr){
                $a.parents('tr').fadeOut();
            })
            .fail(function(jqxhr){
                alert(jqxhr.responseText);
            })
            .always(function(){
                $a.text('X');
            });
    });
})(jQuery);

**micetf** · 19/02/2016, 13h45

Mais comme tu utilises bootstrap,
peut-être serait-il plus élégant de gérer la confirmation au moyen d'une fenêtre modale...

**saninx** · 19/02/2016, 14h44

ok, merci pour le tuyau des fenêtres modales, je crois que je vais voir de ce coté !

**saninx** · 19/02/2016, 16h57

je vien de découvrir les fenêtres modales avec bootstrap et la je ne sais pas comment m'y prendre pour les utiliser dans mon cas.

**micetf** · 19/02/2016, 19h18

Oups ! Je n'aurais pas dû parler des modales. Cela ne change rien au problème (voire ça le complexifie).

Est-ce que tu es parvenu à faire fonctionner l'annulation avec le window.confirm ?
Les deux points clés, sont :
1 - la méthode preventDefault() annule l'action par défaut du click sur le lien créé par la balise a.
2 - ne pas envoyer la requête $.ajax si la suppression n'est pas validée.

micetf

Impossible d'empêcher la redirection avec confirm()

JavaScript

Discussions similaires

Partager

Partager