How to build a jQuery dialog for confirmation (yes/no) that can work anywhere in an app?

Question

I have the following:

<ol id="listItems>
    <li id="listItem-1">
        <span class="title">Item 1</span>
        <span class="delete">delete</span>
    </li>
    <li id="listItem-2">
        <span class="title">Item 2</span>
        <span class="delete">delete</span>
    </li>
    <li id="listItem-3">
        <span class="title">Item 3</span>
        <span class="delete">delete</span>
    </li>
    <li id="listItem-4">
        <span class="title">Item 4</span>
        <span class="delete">delete</span>
    </li>
</ol>

What I want to do here is anytime .delete is clicked, I want to show a jQuery ui-dialog for confirmation, Yes or No.... If the user says yes then continue with the delete click where it will be deleted as is today.

How can I build a jQuery UI Dialog that is static and would work for any number of list items? Better yet would work for anything in my app so it's not just list specific.

Ideas? Thanks

Answer 1

Example using JQuery UI dialog -

Demo - http://jsfiddle.net/CdwB9/3/

function yesnodialog(button1, button2, element){
  var btns = {};
  btns[button1] = function(){ 
      element.parents('li').hide();
      $(this).dialog("close");
  };
  btns[button2] = function(){ 
      // Do nothing
      $(this).dialog("close");
  };
  $("<div></div>").dialog({
    autoOpen: true,
    title: 'Condition',
    modal:true,
    buttons:btns
  });
}
$('.delete').click(function(){
    yesnodialog('Yes', 'No', $(this));
})

With live -

Demo - http://jsfiddle.net/CdwB9/4/

$('.delete').live('click', function(){
    yesnodialog('Yes', 'No', $(this));
})

Answer 2

I've done something similar. On a very high level, you have to stop the propagation of the click, display the dialog, then trigger the click again based on the response.

var confirmed = false;

$('span.delete').click(function(e) {
    if (!confirmed) {
        var that = $(this);

        $( "#dialog-confirm" ).dialog({
            buttons: {
                "Delete": function() {
                    confirmed = true;
                    that.trigger('click');
                    $(this).dialog("close");
                },
                Cancel: function() {
                    $(this).dialog( "close" );
                }
            }
        });

        e.stopPropagation();
    } else {
        confirmed = false;
    }
});

Answer 3

You could use this library: http://labs.abeautifulsite.net/projects/js/jquery/alerts/demo/

Then you could do something like:

$(function(){
    $(".delete").livequery('click', function(){
        jConfirm('Message', 'Title', function(confirmed){
            if(confirmed){
                alert('Delete confirmed');
            }
        });
    });
});

I like to use the livequery plugin because it works with DOM elements added after the page has loaded. But if you're not worried about that, change livequery with bind .

Answer 4

You can wrap your dialog logic in a controller object.

Then when you instantiate the controller object you can pass it in the element the dialog will act on as well as the ajax submision data.

When the user clicks yes in the dialog you now have that data contained in your controller and you can just submit it.

Something like this:

MyApp = {}
MyApp.MyDialog = function(context, ajaxData) {
    this.context = context;
    this.ajaxData = ajaxData;
    this.initializeDialog();
}

MyApp.MyDialog.prototype.initializeDialog = function(){
    $(this.context).dialog({
         //Your other dialog options here,
         buttons: {
             "yes": function(){
                  //Do ajax post with this.ajaxData
              },
              "No": function(){
                  this.context.dialog("close");
              }
          }
    });
}

You can then do something like:

var dialog = new MyApp.MyDialog("#myElement", {foo: "bar"});