Creating a custom confirmation box using jquery,css

Question

 $(document).ready(function () {
     $('.del').click(function () {

         // var id = $(this).attr('cmnt-id');
         // $.post(url,{
         //data sent
         //},function(data){
         //remove the comment div

         //show the confirm box and ask for that question now
         confirmBox("Sure wanna delete this?");
         $('#console').append('deleted<br />');
         //});
     });

 });

 function confirmBox(text) {
     var c = $('.confirm');
     c.children('.confirm-text').text(text);
     c.show();
 }

When i click delete i want to confirm first and then delete by appending delete in #console.

I dont want any custom browser confirm() or any plugins.

But i cannot get how to implement the confirm box into action please help!

UPDATE

if i have something like this

<button data-id="10" id="send">SEND</button>

jQuery

$('.send').click(){
   var data_id = $(this).attr('data-id');

   $.post(url{
       data_id : data_id
   },function(){data}{

     $('#console').append('sent');    

   });
};

if i have something like this then how will i implement the confirmbox function in here ?

You can pass a function that performs the delete into your confirmBox function. Only call the passed in delete function if yes button has been clicked. — Ballbin, May 21 '14 at 06:07

reuelab · Answer 1 · 2014-05-21T07:58:47.383

Add click event listeners for the Yes button and No button of your confirm box.

Like this(jQuery):

$('.confirm > .yes').click(function () {
    $('#console').append('deleted<br />');

//OR DO WHAT YOU WANT WHEN 'YES' BUTTON IS CLICKED

    $('.confirm').hide();
});
$('.confirm > .no').click(function () {

//OR DO WHAT YOU WANT WHEN 'NO' BUTTON IS CLICKED

    $('.confirm').hide();
});

UPDATE // for the sake of "reusability"

Revised confirmBox() function so it would accept two parameters (the confirm box text,the function to execute when yes button is clicked).

Like:

function confirmBox(text,yesFunc) {
    var c = $('.confirm');
    c.children('.confirm-text').text(text);
    c.show();
    $('.confirm > .yes').click(function () {
         yesFunc();
         c.hide();
         yesFunc = function () {};
    });    
    $('.confirm > .no').click(function () {
         c.hide();
         yesFunc = function () {};
    });
}

Now call confirmBox() function inside of the event handler where whatever button(delete/create/etc.) is clicked and pass the actions/function of the corresponding button.

LIKE:

 $('.del').click(function () {
    confirmBox("Sure wanna delete this?", function () {
    $('#console').append('deleted<br />') //or whatever function
    });
});

$('.cre').click(function () {
    confirmBox("Sure wanna create this?", function () {
    $('#console').append('created<br />'); //or whatever function
    });
});

$('.send').click(function () {
    confirmBox("Sure wanna send this?", function () {
    $('#console').append('sent<br />'); //or whatever function 
    });
});

WORKING DEMO

but if i want somehthing like that reuses that code... for example if i also have a create button that creates after some confirmation request ? look at this fiddle jsfiddle.net/jj64k/8 — , May 21 '14 at 06:13
then put the two click event listener inside the event where that specific button is clicked like this : http://jsfiddle.net/jj64k/10/ — reuelab, May 21 '14 at 06:17
but int that writing `yes` and `no` function each and everythime ? — , May 21 '14 at 06:25
cannot we send our `different actions` in a function to `confirmBox()` ? — , May 21 '14 at 06:29
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/54086/discussion-between-froient-and-user3560703). — reuelab, May 21 '14 at 06:40
when i click `delete` and `no` it does not do anything. but when i again click `delete` and `yes` this time it appends `deleted
` **two** times — , May 21 '14 at 06:40

score 0 · Answer 2 · edited Jun 23 '14 at 14:20

0

You just need to assign the delete function to the 'yes' button

JsFIddle http://jsfiddle.net/jj64k/7/

 $('.yes').click(function () {
         $('#console').append('deleted<br />');
         $('.confirm').hide();

     });

edited Jun 23 '14 at 14:20

BenMorel

34,448
50
182
322

answered May 21 '14 at 06:09

Kevin Lynch

24,427
3
36
37

but if i want somehthing like that reuses that code... for example if i also have a `create` button that creates after some confirmation request ? look at this fiddle http://jsfiddle.net/jj64k/8/ – May 21 '14 at 06:12

Ballbin · Answer 3 · 2014-05-21T06:58:34.957

0

$(document).ready(function () {
     $('.del').click(function () {
         confirmBox("Sure wanna delete this?", function(){
           // var id = $(this).attr('cmnt-id');
           // $.post(url,{
           //data sent
           //},function(data){
           //remove the comment div

           //show the confirm box and ask for that question now
           $('#console').append('deleted
');
           //});
       });
    });
 });

 function confirmBox(text, yesFunc) {
     var c = $('.confirm');
     c.children('.confirm-text').text(text);
     c.show();

     $(".yes").unbind("click").click(function(){yesFunc(); c.hid();});
     $(".no").click(function(){c.hide();});
 }

edited May 21 '14 at 06:58

answered May 21 '14 at 06:16

Ballbin

717
6
12

but if i want somehthing like that reuses that code... for example if i also have a create button that creates after some confirmation request ? look at this fiddle jsfiddle.net/jj64k/8 – May 21 '14 at 06:30
You would pass in any function you want to be called if the yes button is click on the confirm box. So you have a function that create something then you pass that function in to `confirmBox`. `$('.cre').click(function(){confirmBox("text you want", function(){/*stuff to do the creating*/}});` – Ballbin May 21 '14 at 06:33
theres a bug....... just click delete then yes and then again click delete and then yes . you will see that "deleted" is appended 3 times!(but it should do 2 times since u clicked only 2 times) !! – May 21 '14 at 06:48
I forgot to unbind the first click event... Try this [fiddle](http://jsfiddle.net/jj64k/14/) – Ballbin May 21 '14 at 06:56

Kyo · Answer 4 · 2014-05-21T06:49:11.683

0

UPDATED to make the confirm box reusable, which required jQuery 1.9.1 instead:

$(document).ready(function () {
     $('.del').click(function () {
         //Delete confirm box. Attaching a callback function
         confirmBox("Sure wanna delete this?", function () {
             $('#console').append('deleted<br />');
             $('.confirm').hide();
         });
     });
     $('.cre').click(function () {
         // Create confirm box. Attaching a calling function
         confirmBox("Sure wanna append this?", function () {
             $('#console').append('appended<br />');
             $('.confirm').hide();
         });
     });
     // Genetic No button event
     $('.no').click(function () {
         $('.confirm').hide();
     });
 });

 // Notice the confirmBox function now takes a callback function for the yes button click event
 function confirmBox(text, callback) {
     var c = $('.confirm');
     c.children('.confirm-text').text(text);
     c.show();
     $(document).off('click', '.yes');           // Cancel previous click event listener
     $(document).on('click', '.yes', callback);  // New click event listener setup
 }

See working code at:

JSFiddle

edited May 21 '14 at 06:49

answered May 21 '14 at 06:18

Kyo

974
5
10

but if i want somehthing like that reuses that code... for example if i also have a create button that creates after some confirmation request ? look at this fiddle jsfiddle.net/jj64k/8 – May 21 '14 at 06:26
you will need to attach a callback to the yes and no button clicks instead. – Kyo May 21 '14 at 06:28
The answer has been updated to make the confirmBox reusable by adding callback parameter. Notice the JQuery was updated to 1.9.1 to use the event delegation feature. – Kyo May 21 '14 at 06:52
Notice how the "Yes" button click event handler is passed as a callback function, which is attached at the time when the function 'confirmBox()' is called. – Kyo May 21 '14 at 06:54
but what if i want to pass different numbers parameters in `delete` and `create` buttons `callback` ? – May 21 '14 at 06:55
Whenever you call the function confirmBox(), you will need to pass 2 paremeters, a string that is used to display on the confirmation box, and a callback function which lists the operations to be executed when the yes button is clicked. – Kyo May 21 '14 at 06:58
yes i got it so i the situation is like i want some `$.post` or `$.get` request to happen on clicking another button `AJAX` which sends parameters to php. Then how will i pass the parameters to `callback` ? – May 21 '14 at 06:59
not clear on what you mean by "pass the parameters to callback". – Kyo May 21 '14 at 07:02
Inside the post handling function, you would be calling 'confirmBox(, )' as usual, For the function pass the returned "data" and have the callback function manages the data dynamically. So, it would look like "confirmBox("bla bla", function(data){ // set the behaviors based o the data content ... }); – Kyo May 21 '14 at 07:12
but since `created` and `deleted` does not have parameters in callback and `send` has there would be any problem ? – May 21 '14 at 07:13
No. You will need to learn about closure in JavaScript. Here is a good link http://stackoverflow.com/questions/111102/how-do-javascript-closures-work – Kyo May 21 '14 at 07:16

Creating a custom confirmation box using jquery,css

4 Answers4