Как построить диалог JQuery для подтверждения (да / нет), который может работать в любом месте приложения?

Question

У меня есть следующее:

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

То, что я хочу сделать здесь, это в любое время, когда нажимают .delete, я хочу показать пользовательский диалог jQuery для подтверждения, Да или Нет .... Если пользователь говорит «да», продолжайте нажимать кнопку удаления, где он будет удалено как есть сегодня.

Как создать диалоговое окно jQuery UI, которое будет статичным и будет работать с любым количеством элементов списка? Еще лучше, если в моем приложении все будет работать, так что это не просто список.

Идеи? Спасибо

Answer 1

Пример использования диалогового окна JQuery UI -

Демонстрация - 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));
})

С живым -

Демонстрация - http://jsfiddle.net/CdwB9/4/

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

Answer 2

Я сделал нечто подобное.На очень высоком уровне вы должны остановить распространение клика, отобразить диалоговое окно, а затем снова запустить клик на основе ответа.

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

Вы можете обернуть свою диалоговую логику в объект контроллера.

Затем, когда вы создаете экземпляр объекта контроллера, вы можете передать его в элемент, с которым будет работать диалог, а также с данными ajax submision.эти данные содержатся в вашем контроллере, и вы можете просто отправить его.

Примерно так:

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

Затем вы можете сделать что-то вроде:

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

Answer 4

Вы можете использовать эту библиотеку: http://labs.abeautifulsite.net/projects/js/jquery/alerts/demo/

Тогда вы можете сделать что-то вроде:

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

Мне нравится использовать плагин livequery, потому что он работает с элементами DOM, добавленными послестраница загружена.Но если вас это не беспокоит, замените livequery на bind.