Accessing the parent Item from where the dialog was called

I have a drag and drop functionality for form elements. The structure of the draggable element is

<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>

The droppable area has the following code. The elements are added in this

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

On dropping the delete and the properties are displayed with that element. Now when i click on the properties i get a dialog box through the following

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

while the dialog is

<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>

Now what i am doing is when the user enters a value in the dialog form for the label it should be updated directly on the element and its label should be what the user has entered

The update code structure what i am doing is like

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

How should i add a line in this update code so that the label is updated as the value entered by the user???

You could store the clicked object with .data(), like this:

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

Then, you can retrieve it like this:

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

As you can see, we're storing the element clicked in the dialog with .data()

Hope this helps. Cheers

You can take a global item, say selectedObject = null, as soon as you selected something (in click event) set selectedObject = Object which you selected. On click of Cancel make selectedObject null again

This will work only if there is only one selected item at any point of time

Try this:

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

And this:

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