Message d'alert avant suppression

**stephweb** · 02/07/2015, 18h52

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 html :

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

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 html :

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

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 :

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
 
$('.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.

**Watilin** · 02/07/2015, 19h39

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().

**stephweb** · 02/07/2015, 20h02

Merci pour ta réponse.

Si, il est de type submit.

Code html :

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

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

**Watilin** · 03/07/2015, 00h17

Ok, alors essaye de remplacer ça :

Code :

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

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

par ça :

Code :

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

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

**stephweb** · 03/07/2015, 09h30

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"

**danielhagnoul** · 03/07/2015, 00h40

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

**stephweb** · 03/07/2015, 09h35

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

**tse_jc** · 03/07/2015, 10h17

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.

Message d'alert avant suppression

jQuery

Vue hybride

Discussions similaires

Partager

Partager