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

Goal

I've got a web page with a table of items. Each item has a delete button beside it. When that button is clicked, I want to

我有一个带有项目表的网页。每个项目旁边都有一个删除按钮。单击该按钮时，我想

• Ask the user to confirm
• 要求用户确认
• Delete the corresponding item from the database
• 从数据库中删除相应的项目
• Remove that item's row from the list
• 从列表中删除该项目的行

Current solution

Right now, I'm doing something like this:

现在，我正在做这样的事情：

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

This solution works because each button.delete can determine which row and item it belongs to, and act accordingly.

此解决方案有效，因为每个button.delete可以确定它所属的行和项，并采取相应的行动。

Desired solution

Instead of the clunky "OK or Cancel" alert box, I'd like to use a jQuery UI dialog box. But I'm not sure how to let the dialog know which row and item it should handle on any given click.

我不想使用笨重的“确定或取消”警告框，而是使用jQuery UI对话框。但我不知道如何让对话框知道它应该在任何给定的点击上处理哪一行和项目。

Here's how you set it up:

这是你如何设置它：

1) Define a dialog box div

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) Set up the dialog box behavior

2）设置对话框行为

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

3) Set the click event that will open the dialog

3）设置将打开对话框的单击事件

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

In this last step, I'd like to be able to pass some information to the dialog - which delete button was clicked, for example. But I don't see a way to do that.

在最后一步中，我希望能够将一些信息传递给对话框 - 例如，单击了删除按钮。但我没有办法做到这一点。

I could insert a hidden dialog div.dialog into each item row up front, or insert one into a particular row after its button is clicked. Then the $(this).parent() references would grab the correct row...

我可以在前面的每个项目行中插入一个隐藏的对话框div.dialog，或者在单击其按钮后将其插入特定的行。然后$（this）.parent（）引用将获取正确的行...

Is there an easier way to do this?

有更简单的方法吗？

5 个解决方案

#1

i do something like this:

我做这样的事情：

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

and then call my function from the click event.

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

#2

It ended up being most straightforward to set up the dialog behavior inside the click function itself. Actually, it's not much different than my original example.

最终在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;
  });

Since div#dialogbox doesn't get hidden until $('#dialogbox').dialog() is called, I just gave it an inline style of display:none.

由于div＃dialogbox在$（'＃dialogbox'）。dialog（）被调用之前不会被隐藏，我只是给它一个内联样式display：none。

If I end up needing something that can be generalized, as hyun suggested, I'll revisit the issue.

如果我最终需要一些可以推广的东西，正如hyun建议的那样，我会重新审视这个问题。

#3

You could store the row in a global variable, like this:

您可以将行存储在全局变量中，如下所示：

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

This will only work if the dialog is modal; otherwise, the user could click two different delete links, and you'd need multiple dialogs.

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

#4

Why can't you just call a setup method to build the dialog as you see fit?

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

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

Alternatively, just store the information in global space before you show the dialog. Remember that your javascript variables can have global scope, or you can store information arbitrarily on objects/functions (which are just objects).

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

myDataStore = {};

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

#5

You could add the "rel" attribute to the dialog and store it there, instead. That way you don't need to worry about global variables, and it's semantically not-too-bad, since you are defining a relationship between the dialog and a row. So it'd just be $('#confirmdeleteitem').attr('rel', $(this).parent().attr('id').dialog('open');

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