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

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:

onclick=return confirm()

dans ma balise

Code:

<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 !

Bonjour,

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

Code:

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>

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:

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:

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:

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 !

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:

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(); } }); }

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

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:

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);

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

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

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.

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