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

此解决方案有效，因为每个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()引用将获取正确的行...

有更简单的方法吗？

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

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

Answer 2

最终在click函数本身内设置对话行为最为直截了当。实际上，它与我原来的例子没什么不同。

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

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

这仅在对话框为模态时才有效;否则，用户可以单击两个不同的删除链接，您需要多个对话框。

Answer 4

为什么你不能只调用一个设置方法来构建你认为合适的对话框？

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

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

myDataStore = {};

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

Answer 5

您可以将“rel”属性添加到对话框并将其存储在那里。这样你就不必担心全局变量了，而且它在语义上也不是太糟糕，因为你在对话框和行之间定义了一个关系。所以它只是$（'＃confirmdeleteitem'）。attr（'rel'，$（this）.parent（）。attr（'id'）。dialog（'open'）;

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

目标

当前解决方案

期望的解决方案

5 个答案: