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

问题

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

回答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));
})

回答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;
    }
});

回答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.

回答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"});

来源：https://stackoverflow.com/questions/7919845/how-to-build-a-jquery-dialog-for-confirmation-yes-no-that-can-work-anywhere-in