访问调用对话框的父项答案

【问题标题】：Accessing the parent Item from where the dialog was called访问调用对话框的父项
【发布时间】：2011-09-28 12:44:56
【问题描述】：

我有表单元素的拖放功能。可拖动元素的结构是

<div class="tools">
 <ul>
<li class="draggable" >
  <div class="control">
    <label>&nbsp;</label>
    <input type="text" name="txt" value="" />
    <span class="controlText"> Text Box </span>
    <div class="delete" style="display:none"><sup>x</sup></div>
    <div class="properties txtbox" style="display:none">Properties</div>
  </div>
</li>

可放置区域有以下代码。元素添加在这个

<div class="editor">
<ul class="sortable" id="leftColumn">
<li style="visibility:hidden" class="ui-state-default">Test</li>
</ul>
</div><!-- editor -->

删除删除后，属性与该元素一起显示。现在，当我单击属性时，我会通过以下方式获得一个对话框

 $('.txtbox').live('click', function() {
     //get the label
        var label = $(this).parent().find('label').html();
        $("#textbox_label").val(label);
        $( "#dialog-textbox" ).dialog( "open" );
        return false;
    });

当对话结束时

<div id="dialog-textbox" title="Text Box Properties" style="display:none">
 <p>This is the Text Box Properties Form.</p> 
 <form>
<fieldset>
  <label for="textbox_label">Enter Label </label>
  <input type="text" name="textbox_label" id="textbox_label" class="text ui-widget-content ui-corner-all" />
</fieldset>

现在我正在做的是当用户在对话框表单中为标签输入一个值时，它应该直接在元素上更新，并且它的标签应该是用户输入的内容

我正在做的更新代码结构是这样的

$("#dialog-textbox").dialog({
autoOpen: false,
height: 300,
                        width: 350,
                        modal: true,
                        buttons: {
                                "Apply": function(){
                                     //code to update element goes here...
                                    var label = $("#textbox_label").val()
                                    alert("New Label "+label);
                                    // here i need to access the item on which the user clicked                                     
                                    },
                                Cancel: function() {
                                            $( this ).dialog( "close" );
                                        }
                        }
                         });

我应该如何在此更新代码中添加一行，以便将标签更新为用户输入的值???

【问题讨论】：

标签： javascript jquery jquery-ui jquery-selectors jquery-ui-dialog

【解决方案1】：

您可以获取一个全局项目，例如 selectedObject = null，只要您选择了某些内容（在单击事件中），就设置 selectedObject = 您选择的对象。单击 Cancel 使 selectedObject 再次为 null

只有在任何时间点只有一个选定的项目时，这才有效

【讨论】：

【解决方案2】：

你可以用.data()存储被点击的对象，像这样：

   $('.txtbox').live('click', function() {
        ...
        $( "#dialog-textbox" ).data("elem_clicked", $(this)); //This stores
        $( "#dialog-textbox" ).dialog( "open" );
        return false;
    });

然后，您可以像这样检索它：

buttons: {
    "Apply": function(){
        ...
        var $elem_clicked = $("#dialog-textbox").data('elem_clicked'); //This retrieves
     },
  ...
 }

如您所见，我们将在对话框中单击的元素存储为.data()

希望这会有所帮助。干杯

【讨论】：

嘿嘿嘿，希望我们不要都疯了
@Edgar 当我从对话框中应用新标签，然后再次将标签拖到默认应用的旧标签上时？你有什么想法吗？我正在使用助手克隆进行拖动。

【解决方案3】：

试试这个：

 $('.txtbox').live('click', function() {
     //get the label
        var label = $(this).parent().find('label').html();
        $("#textbox_label").val(label);
        $( "#dialog-textbox" ).data('clicked_div',$(this)).dialog( "open" );
        return false;
    });

还有这个：

var label = $("#textbox_label").val()
alert("New Label "+label);
// clicked element is $("#dialog-textbox").data('clicked_div')

【讨论】：