Как я могу передать элемент в диалоговое окно jQuery UI? - PullRequest
Новая
       13

Как я могу передать элемент в диалоговое окно jQuery UI?

4 голосов
/ 14 декабря 2009

Цель

У меня есть веб-страница с таблицей предметов. Каждый элемент имеет кнопку удаления рядом с ним. Когда эта кнопка нажата, я хочу

  • Попросить пользователя подтвердить
  • Удалить соответствующий элемент из базы данных
  • Удалить строку этого элемента из списка

Текущее решение

Прямо сейчас я делаю что-то вроде этого: 

$('button.delete').click(function(){
  thisRow = $(this).parent();
  itemID = $(this).parent().attr('id');
  if (confirm('Are you sure?')){
   $.post('/manage_items.php', {"action":"delete", "itemid":itemID}, function(){
     thisRow.hide("slow").remove();
   });
  } 
}

Это решение работает, потому что каждый button.delete может определить, к какой строке и элементу он принадлежит, и действовать соответственно.

Желаемое решение

Вместо неуклюжего окна «ОК или Отмена» я бы хотел использовать диалоговое окно jQuery UI. Но я не уверен, как сообщить диалогу, какую строку и элемент он должен обрабатывать в любой данный клик.

Вот как это настроить:

1) Определить диалоговое окно div 

<div class="dialogbox" id="confirmdeleteitem" title="Really DELETE this item?">
   <p>Gee golly, are you s-s-s-sure you want to do that?!</p>
</div>

2) Настройка поведения диалогового окна 

$('#cofirmdeleteitem').dialog({
    //other options - not relevant here
    buttons: {
        "Nevermind": function() {
            //do nothing
        },
        "Alright! Woo!": function(){
            //do something
        }
    }
});

3) Установите событие нажатия, которое откроет диалоговое окно 

$('button.delete').click(function(){
    $('#confirmdeleteitem').dialog('open');    
});

На этом последнем шаге я хотел бы иметь возможность передавать некоторую информацию в диалоговое окно - например, какая кнопка удаления была нажата. Но я не вижу способа сделать это.

Я мог бы вставить скрытый диалог div.dialog в каждую строку элемента впереди или вставить один в определенную строку после нажатия на кнопку. Тогда ссылки $(this).parent() будут содержать правильную строку ...

Есть ли более простой способ сделать это?

Ответы [ 5 ]

2 голосов
/ 15 декабря 2009

Оказалось, что проще всего настроить поведение диалога внутри самой функции щелчка. На самом деле, это не сильно отличается от моего первоначального примера. 

$('button.delete').click(function(){
    thisRow = $(this).parent().parent();
    thisRow.css("background-color","red");
    skuid = $(this).parent().parent('tr').attr('id').substr(5);
    $('#dialogbox').dialog({
      autoOpen: false,
      modal: true,
      draggable: true,
      width: 600,
      buttons: {
        "Actually, I can just mark it inactive": function() {
          thisRow.css("background-color","inherit");
          $(this).dialog("close");
        },
        "This SKU needs to be deleted": function() {
          $.post('/intranet/backstage/modify_sku_info.php', {"action":"delete", "skuid":skuid}, function(result){
            thisRow.hide("slow").remove();
          });
          $(this).dialog("close");
        }
      }
    });
    $('#dialogbox').dialog('open');
    return false;
  });

Поскольку div#dialogbox не скрывается, пока не будет вызван $('#dialogbox').dialog(), я просто присвоил ему встроенный стиль display:none.

Если мне понадобится что-то, что можно обобщить, как предложено hyun , я вернусь к вопросу.

2 голосов
/ 14 декабря 2009

я делаю что-то вроде этого: 

        function ConfirmationDialog(title, question, options) {
            var d = $('<div title="' + title + '"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>' + question + '</p></div>');
            d.dialog({
                bgiframe: true,
                resizable: false,
                height: 190,
                width: 350,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
                },
                buttons: options
            });
        }

, а затем вызвать мою функцию из события щелчка.

1 голос
/ 14 декабря 2009

Вы можете сохранить строку в глобальной переменной, например: 

var deletingId;
$('button.delete').click(function() {
    deletingId = $(this).parent().attr('id');

    $('#confirmdeleteitem').dialog('open');    
});
$('#confirmdeleteitem').dialog({
    //other options - not relevant here
    buttons: {
        "Never mind": function() { },
        "Alright! Woo!": function(){
            $.post(
                '/manage_items.php', 
                { action: "delete", itemid: deletingId },
                function() {
                    $('#' + deletingId).hide("slow").remove();
                }
            );
        }
    }
});

Это будет работать, только если диалог модальный; в противном случае пользователь может щелкнуть две разные ссылки удаления, и вам потребуется несколько диалогов.

0 голосов
/ 14 декабря 2009

Вы можете добавить атрибут rel в диалог и сохранить его там. Таким образом, вам не нужно беспокоиться о глобальных переменных, и это семантически неплохо, так как вы определяете отношения между диалогом и строкой. Так что это просто будет $ ('# verifydeleteitem'). Attr ('rel', $ (this) .parent (). Attr ('id'). Dialog ('open');

0 голосов
/ 14 декабря 2009

Почему вы не можете просто вызвать метод установки, чтобы построить диалог по своему усмотрению? 

setupMyDialog( '#confirmdeleteitem', info1, info2 ); 
$('#confirmdeleteitem').dialog...

В качестве альтернативы, просто сохраните информацию в глобальном пространстве, прежде чем показывать диалог. Помните, что ваши переменные javascript могут иметь глобальную область видимости, или вы можете произвольно хранить информацию об объектах / функциях (которые являются просто объектами). 

myDataStore = {};

myDataStore.row = foo;
myDataStore.col = bar;
...