如何将一个元素传递给jQuery UI对话框框？

Question

目标

我有一个带有物品列表的网页。每个物品旁边都有一个删除按钮。当用户点击该按钮时，我想要：

• 询问用户确认
• 从数据库中删除相应的物品
• 从列表中删除该物品的行

当前解决方案

目前，我正在执行类似于以下操作：

$('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();
   });
  } 
}

这个解决方案可行是因为每个按钮都可以确定它属于哪一行和项目，并相应地执行操作。

期望的解决方案

不想使用笨重的“确定”或“取消”警告框，我想使用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()的引用将抓取正确的行...

有更简单的方法吗？

- Nathan Long

Answer 1

我会做这样的事情：

我会像这样做：

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

然后从点击事件中调用我的函数。

- hyun

Answer 2

最终，将对话框行为设置在单击函数内部是最简单的。实际上，这与我的原始示例并没有太大区别。

$('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 建议的那样，我会重新审视这个问题。

- Nathan Long

Answer 3

你可以将行存储在全局变量中，像这样：

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

只有在对话框是模态的情况下才能起作用；否则，用户可能会单击两个不同的删除链接，而您需要多个对话框。

- SLaks

Answer 4

为什么你不能只调用一个设置方法来构建对话框，使其符合你的要求呢？

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

或者，在显示对话框之前，只需将信息存储在全局空间中。请记住，您的JavaScript变量可以具有全局作用域，或者您可以任意地将信息存储在对象/函数上（它们只是对象）。

myDataStore = {};

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

- Stefan Kendall

Answer 5

你可以将"rel"属性添加到对话框中并将其存储在那里，而不是担心全局变量的问题。这样做的好处是语义上也不错，因为你正在定义对话框与行之间的关系。所以代码可以写成：$('#confirmdeleteitem').attr('rel', $(this).parent().attr('id')).dialog('open');

- Overflowed