Message d'alert avant suppression

Version imprimable

Bonjour,

Je viens demander un peu d'aide, s'il vous plait.

J'ai une liste d'image dans un tableaux, avec des cases à cocher. Avec la possibilité de supprimer des images. Mais je veux un message du style "Etes vous sur de vouloir supprimer ces images... ?".

Donc j'avais ce code :

Code:

1
2
 
onSubmit="return(confirm('Etes vous sur de vouloir supprimer ces images... ?'

Mais je ne trouve pas ça joli, donc je veux le faire avec jQuery UI (dialog).

Voici mes codes :

HTML :

Code:

1
2
3
4
5
 
<select name="action_check" id="action_check">
     <option value="99">Choisir...</option>
     <option value="1">Supprimer</option>
</select>

jQuery :

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
 
$('.input-appliquer').click(function(){
	if($('#action_check').val() == 1){   // si on click avec la valeur supprimer
 
		$('#dialog')
			.attr('title', 'Etes vous sur de Supprimer ?')
			.html('Oui : Confirmer.<br>Non : Annuler')
			.dialog({
				buttons: {
					'Oui': function(){
						// C'est ICI que je ne sais pas quoi faire ?
                                                // j'ai essayé de mettre return true. mais sans succés...
					},
					'Annuler': function(){
						$(this).dialog('close');   // fermer
					}
				},
 
			});
 
		return false;  // pour empêcher la soumission du <form>
 
	}
})

Mon problème est lorsqu'on clique sur 'Oui', il ne se passe rien.

Merci beaucoup.

02/07/2015, 19h39
Watilin

J'imagine que ton .input-appliquer n'est pas de type submit sinon ça marcherait. Dans ce cas tu dois appeler la méthode .submit() de ton form, au moyen de jQuery. Quelque chose comme $("#tonForm").submit().

Merci pour ta réponse.

Si, il est de type submit.
Code:

1 2 3 4 5 6 7 8 9 10 <div class="trait_checkbox_bibl"> <input class="input-appliquer" type="submit" name="submit_check" value="Appliquer"> <select name="action_check" id="action_check"> <option value="99">Choisir...</option> <option value="1">Supprimer</option> </select> </div> <div id="dialog"></div>
En fait, quand je clique le input de type submit .input-appliquer, et que la valeur du select est value="1", le dialog s'ouvre bien, avec comme choix 2 boutons "oui" et "non". Si je clique sur "non", le dialog se ferme bien. Par contre, si je clique sur "oui", je souhaiterais que le formulaire se soumette.

Merci

03/07/2015, 00h17
Watilin

Ok, alors essaye de remplacer ça :

Code:

$('.input-appliquer').click(function(){

par ça :

Code:

$('#tonForm').submit(function(){

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
<head>
    <meta http-equiv="cache-control" content="public, max-age=60">
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="author" content="Daniel Hagnoul">
    <title>Test</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/sunny/jquery-ui.css">
    <style>
 
        #dialog { display: none; }
 
    </style>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        "use strict";
 
        $( function(){ // forme abrégée de $(document).ready(function(){
 
            $( '#maForm' ).on( "submit", function( ){
 
                if ( $( '#action_check' ).val() == 1 ){
 
                    $( '#dialog' ).dialog({
                        "width" : "600px",
                        "title" : 'Supprimer les images ?',
                        "buttons" : {
                            'Oui': function(){
                                $( this ).dialog( 'close' );
 
                                // debug
                                console.log( "OK on supprime" );
 
                                // votre code
                                // pour supprimer les images ?
                                // pour soumettre le formulaire avec une transaction AJAX
                            },
                            'Non': function(){
                                $( this ).dialog( 'close' );
                            }
                        }
                    });
 
                }
 
                return false;
            });
 
        });
 
        $( window ).load( function(){
 
        });
    </script>
</head>
<body>
 
    <form id="maForm">
        <select name="action_check" id="action_check">
            <option value="99">Choisir...</option>
            <option value="1">Supprimer</option>
        </select>
        <input type="submit" value="Go">   
    </form>
    <div id="dialog">
        <p>Merci de cliquer sur "Oui" pour confirmer l'action ou sur "Non" pour annuler.</p>
    </div>
 
</body>
</html>

03/07/2015, 09h30
stephweb

Citation:

Envoyé par Watilin

...

ok merci. mais ça ne fonctionne pas. ça soumet le formulaire sans même avoir le temps de cliquer sur "oui" ou "non".
Ce que je veux: C'est que ça soumet le formulaire uniquement si on clic sur "oui"
03/07/2015, 09h35
stephweb

Citation:

Envoyé par danielhagnoul

...

Oui, mes input checkbox c'est pour supprimer les images (sans Ajax, juste avec la fonction PHP unlink() ).
Lors qu'on clic sur le submit, je veux que le dialog de jQuery UI s'ouvre (ça, ça marche).
Et si on clic sur "Non", je veux que le dialog se ferme sans soumettre le formulaire (mais ceci ça marche),
Et je veut surtout que le formulaire se soumette uniquement si on clic sur "Oui" (ça je n'arrive pas à le faire fonctionner).
Merci
03/07/2015, 10h17
tse_jc

Bonjour,

Un formulaire html est toujours prioritaire sur du code js. Donc si vous souhaitez poster votre formulaire en ajax par exemple, il vous faudra retirer la balise <form> de votre document html.
Ensuite, retirez votre votre bouton submit qui doit être un <input> par un <bouton> sur lequel vous rajoutez l'évènement onclick="submit()".
Et là, c'est vous qui gérez en manuel l'envoi de votre formulaire.

Bonne journée.

Citation:

Envoyé par tse_jc

Bonjour,

Un formulaire html est toujours prioritaire sur du code js. Donc si vous souhaitez poster votre formulaire en ajax par exemple, il vous faudra retirer la balise <form> de votre document html.
Ensuite, retirez votre votre bouton submit qui doit être un <input> par un <bouton> sur lequel vous rajoutez l'évènement onclick="submit()".
Et là, c'est vous qui gérez en manuel l'envoi de votre formulaire.

Bonne journée.

C'est faux… http://jsfiddle.net/hnap4q6b/

Et tu rajoutes inutilement de la complexité. Je ne suis pas d'accord avec les conseils que tu prodigues. Dans la mesure du possible, on construit d'abord un HTML sain, et après on « l'améliore » avec du JS. Et il se trouve que dans le cas présent c'est possible.

Un form doit avoir un bouton submit au moins pour la raison de l'accessibilité. Par exemple, un utilisateur sans souris (typiquement, un aveugle avec un lecteur d'écran) veut pouvoir valider le form avec la touche entrée. Avec un bouton onclick ça ne marche pas.

@stephweb : Mes excuses, une chose m'a échappé dans ma première analyse de ton problème. Le type du bouton n'était pas important, même si, tu l'auras compris, il vaut mieux surveiller l'évènement submit plutôt que click.

Ce qui est important c'est que tu veux, dans un premier temps, empêcher la soumission immédiate du formulaire, pour la déclencher toi-même dans un second temps. C'est sur ce second temps que nous allons avoir un problème, car si on ne prend pas de précautions, la soumission que nous déclenchons nous-mêmes sera annulée par le script du premier temps.

Pour corriger ça, on peut bricoler une solution pas totalement fiable à base de variables globales, ou bien simplement sérialiser le form et l'envoyer par ajax, ce qui évite de redéclencher un submit. À mon avis c'est plus simple, et c'est la solution que je vais te proposer.
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 $("#tonForm").submit(function() { var $form = $(this); ... buttons: { "Oui": function() { $.ajax({ data: $form.serialize(), method: $form.attr("method") || "GET", url: $form.attr("action") || "", }) .done(function(data) { console.log(data); }) .fail(function(jqxhr, status, error) { console.log(error); }); $(this).dialog("close"); }, "Non": ... } ... return false; });
Évidemment il reste un petit peu de travail.
– Remplace "#tonForm" par le véritable id de ton form.
– Les points de suspension représentent les parties inchangées de ton code.
– Quant aux console.log, ils affichent les messages dans ta console de ton navigateur (touche F12). Tu devras les remplacer par des messages à l'attention de l'utilisateur : en cas de succès (méthode .done()), un message de confirmation que son image a bien été supprimée ; en cas d'échec (.fail()), un message lui suggérant de recommencer plus tard. À toi de choisir la façon dont tu affiches ces messages. Personnellement, je pense qu'un autre dialog fait l'affaire.

ok merci.

Quand je clic sur "Oui", ça ne marche toujours pas. Le formulaire ne se soumet toujours pas (mais le dialog se ferme bien).

Je me retrouve donc avec ce code:

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
 
$("#form-bibli").submit(function() {
	var form = $(this);
 
	if($('#action_check').val() == 1){
 
		$('#dialog')
			.attr('title', 'Supprimer ?')
			.html('Oui : Confirmer.<br>Non : Annuler')
			.dialog({
				buttons: {
					'Oui': function() {
						$.ajax({
							data: form.serialize(),
							method: form.attr("method") || "GET",
							url: form.attr("action") || "",
						})
						.done(function(data) {
							console.log(data);
						})
						.fail(function(jqxhr, status, error) {
							console.log(error);
						});
						$(this).dialog("close");
					},
					'Annuler': function(){
						$(this).dialog('close');
					}
				}
			});
 
	}
 
	return false;
 
});

Merci

En effet le formulaire ne se soumet plus, c'est ce que j'ai expliqué dans mon dernier post : il est remplacé par une requête ajax. Cette requête a le même effet que la soumission du formulaire, le serveur ne fait pas la différence et la traite de la même façon.

Avec mon console.log(data) tu devrais avoir la réponse du serveur dans ta console. As-tu regardé ?

Bonus. Je viens de voir qu'on peut modifier le titre et le contenu d'un dialog après initialisation. Du coup tu pourrais très bien afficher le message retour dans le même dialog :

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
    $("#form-bibli").submit(function() {
      var form = $(this);
 
      if ("1" === $("#action_check").val()) {
        $("#dialog")
          .html("Oui\xA0: Confirmer.<br />Non\xA0: Annuler")
          .dialog({
            title: "Supprimer\xA0?",
            buttons: {
 
              "Oui": function() {
                var $thisDialog = $(this)
                  .html("<img src='spinner.gif' alt='' /> Chargement…");
 
                $.ajax({
                  data: form.serialize(),
                  method: form.attr("method") || "GET",
                  url: form.attr("action") || "",
                })
                .done(function(data) {
                  console.log(data);
                  $thisDialog
                    .dialog("option", { title: "Succès" })
                    .html("Suppression réussie\xA0!");
                })
                .fail(function(jqxhr, status, error) {
                  console.error(error);
                  $thisDialog
                    .dialog("option", { title: "Échec" })
                    .html("Il y a eu une erreur, veuillez réessayer.");
                })
                .always(function() {
                  $thisDialog.dialog("option", {
                    buttons: {
                      "Ok": function() {
                        $(this).dialog("close");
                      }
                    }
                  });
                });
              },
 
              "Non": function() {
                $(this).dialog("close");
              }
 
            }
          });
      }
 
      return false;
    });

03/07/2015, 20h06
stephweb

ok merci.
Avec le console.log(data) je voix que ça charge bien la page qu'il y a dans le action="" de mon formulaire.
En Ajax je m'y connais pas trop en fait
10/07/2015, 10h41
tse_jc

Bonjour,

Citation:

C'est faux… http://jsfiddle.net/hnap4q6b/

Et tu rajoutes inutilement de la complexité. Je ne suis pas d'accord avec les conseils que tu prodigues. Dans la mesure du possible, on construit d'abord un HTML sain, et après on « l'améliore » avec du JS. Et il se trouve que dans le cas présent c'est possible.

Un form doit avoir un bouton submit au moins pour la raison de l'accessibilité. Par exemple, un utilisateur sans souris (typiquement, un aveugle avec un lecteur d'écran) veut pouvoir valider le form avec la touche entrée. Avec un bouton onclick ça ne marche pas.

Un formulaire HTML est conçu pour envoyer sur une autre page (donc avec rechargement en mode synchrone) à travers un attribut action qui est obligatoire dans une balise form lorsque on est soucieux d'avoir un code html5 W3C compliant, et donc un formulaire "sain". Ensuite, s'il est vrai que je me suis permis de dire une inexactitude en disant que le html est toujours prioritaire sur js, pour faire ce que vous dites, cela vous oblige quand même à lancer un gestionnaire d'event à partir de l'espace global js, ce qui complique les choses inutilement dans un contexte de simple site web, pour poster un formulaire en ajax.
Pour terminer, bien que je ne voie pas pourquoi vous avez parlé de l'accessibilité dans le problème qui nous préoccupe, j'espère que vous ne limitez pas votre conception de la gestion de l'accessibilité d'un formulaire html à une simple validation par la touche entrée.

Bonne journée
10/07/2015, 17h57
Watilin
@tse_jc, je te laisse la liberté et le plaisir de coder tes propres applications comme tu l'entends. Mais quand il s'agit de donner des conseils dans un espace public, il faut veiller à ne pas véhiculer de mauvaises pratiques. D'accord, on ne peut pas déterminer objectivement ce qui est une bonne ou une mauvaise pratique, alors disons qu'il y a ton point de vue et le mien.

Citation:

cela vous oblige quand même à lancer un gestionnaire d'event à partir de l'espace global js, ce qui complique les choses inutilement dans un contexte de simple site web

« Lancer un gestionnaire d'event à partir de l'espace global js », de grands mots pour peu de choses. Ça fait partie des premières choses qu'on apprend avec jQuery, intercepter un évènement de manière non intrusive, et c'est une pratique (bonne à mon avis) que ce framework a réussi à démocratiser largement.

J'ai l'impression qu'il y a quelque chose qui te dérange avec « l'espace global JS ». Est-ce que tu as l'impression que c'est moins performant ? Ou est-ce que tu es simplement gêné par la séparation des codes HTML et JS ?

Une autre pratique que jQuery soutient est l'amélioration progressive. Cela suppose de commencer par concevoir un site qui marche sans JS dans un premier temps. Ainsi le <form> est obligatoire pour envoyer des données au serveur. Ensuite, pas question de supprimer le <form> au moment de rajouter la couche JS. L'ajax est une amélioration du formulaire.

Je précise au cas où ça ne serait pas clair que les pratiques de codage non intrusif et d'amélioration progressive ne sont pas dépendantes de jQuery : on peut les appliquer à d'autres frameworks, aussi bien qu'à du JS pur.

Si je n'ai pas mal interprété ton point de vue, tu préfères supprimer le <form>, le remplacer par d'autres balises HTML qui reproduisent son comportement, en plus d'y ajouter du JS dans des attributs comportementaux comme onclick.

Citation:

bien que je ne voie pas pourquoi vous avez parlé de l'accessibilité dans le problème qui nous préoccupe, j'espère que vous ne limitez pas votre conception de la gestion de l'accessibilité d'un formulaire html à une simple validation par la touche entrée.

Si j'interprète correctement ton point de vue, tu considères qu'il y a des applications dont l'accessibilité n'est pas importante. Je ne veux pas te choquer en disant ça, mais je trouve que c'est une forme légère de discrimination.

Outre cette considération presque « éthique », l'accessibilité me préoccupe toujours, et je suis convaincu que tout le monde devrait s'en préoccuper, car j'ai vu de nombreux cas où sa prise en compte permettait de régler des problèmes à première vue sans rapport, notamment des problèmes de mise en page.

La touche entrée n'était qu'un exemple. Il s'agit (à mon avis) de respecter le principe de moindre surprise : l'utilisateur s'attend à pouvoir valider un formulaire avec la touche entrée, comme il s'attend à pouvoir faire défiler la page vers le bas en tournant la molette de sa souris ou en glissant le doigt sur son écran. Si on tente de créer son propre mécanisme pour telle ou telle chose, non seulement on risque de faire moins bien que le navigateur, mais l'utilisateur aura en plus un effort d'adaptation à fournir, ce qui risque de l'agacer ou de lui faire passer à côté de certains aspects de l'application.

Attention, je ne dis pas qu'on doit s'interdire de créer des interfaces innovantes ; mais dans la mesure où un mode d'interaction existe déjà (ou quelque chose de proche), il faut être prudent, ou avoir de bonnes raisons de s'écarter du chemin.

Citation:

à travers un attribut action qui est obligatoire dans une balise form lorsque on est soucieux d'avoir un code html5 W3C compliant

Non. https://validator.w3.org/#validate_by_input
Code:

1 2 3 4 5 <!DOCTYPE html> <title>Un formulaire sans attribut action</title> <form method="POST"> <input type="submit" /> </form>
Tu devrais vérifier tes propos avant de poster. Mais je reconnais qu'il est mieux de toujours mettre les attributs action et method. Écrire du code explicite, c'est une bonne pratique, je crois qu'on est tous les deux d'accord là-dessus.