How to write properly an "Are you sure you want to delete/create/etc?" dialog box in jquery

Question

I have posted on this thread - How do I pass function as a parameter in javascript for creating pop up box request with several functionality.

One of the answers there stated a problem that I thought should have a new thread.

My task is this - I have several buttons for each item (let's say I have several articles and each one I can delete, edit etc..) - for each button I want a pop up box that asks me if I'm sure or not sure I want to do this task.

How do I do it correctly?

this is an example for what happens when I click on of the delete buttons:

$('.delete').click(function(){
    var obj={title:"The Header",someText:"Are you sure?"};
    DisplayPopUp(obj,function(){console.log('going to delete');});
});

after I have the "are you sure?" pop up - this is the pop up function:

function DisplayPopUp(obj, callback) {

    //On Action Clicked
    $('#actionButton').click(function(e){
       e.preventDefault();
       callback(obj);
    });
}

My main concern is that each time I click the delete button - I multiply the "are you sure" button function. How do I delete this event before I re-create it? Where do I need to put it?

and in general - is this the right method to do it or is there a better, cleaner code (assuming I need to do it without using jQuery-UI?

take to consideration that I want it to be fluid and to work on several tasks like create/delete/edit etc...

thanks, Alon

=========== THE HTML ==============

looks like this: - I use $('content').html(theContentIneed) to fill the content and toggle display modes to hide/unhide it.

<div id="popup">
   <div id="content">
   </div>
   <a id="actionButton">action</a>
</div>

The code you posted is missing any existing HTML or any code that creates or deletes DOM objects. As such, we cannot advise on adding/removing event handlers if we don't understand the lifetime of the HTML objects. In jQuery, you can unhook an event handler with `.unbind()` or by getting rid of the object with `.remove()`. — jfriend00, Dec 18 '11 at 18:16

score 0 · Answer 1 · answered Dec 18 '11 at 18:17

You might want to use the jQuery plugin pattern:

$.fn.displayPopUp = function(data, callback) {
    return this.each(function() {
        // popup stuff
        if (typeof callback == 'function') {
            callback.call(this);
        }
    };
});


$('.delete').click(function(){
    $(this).displayPopUp({
        title: "The Header",
        someText: "Are you sure?"
    }, function() {
        console.log('going to delete');
    });
});

score 0 · Answer 2 · answered Dec 18 '11 at 19:01

Now that we can see that you're only hiding/showing the HTML (not creating/destroying it), you can solve the issue of too many click handlers by assinging the event handler once before anything starts and use the .data() method to store your context:

$('#actionButton').click(function(e){
   e.preventDefault();
   var fn = $(this).data("callback");
   fn();
});

function DisplayPopUp(obj, callback) {
    $('#actionButton').data("callback) = function() {callback(obj);};
    // do other stuff here to make the popup visible, etc...
}

Or, if you really wanted to do it the way you were doing it and are using jQuery 1.7+:

function DisplayPopUp(obj, callback) {

    //On Action Clicked
    $('#actionButton').on('click', (function(e){
       $(this).off('click');
       e.preventDefault();
       callback(obj);
    });
}

How to write properly an "Are you sure you want to delete/create/etc?" dialog box in jquery

2 Answers2

Linked