Question

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

Answer 1

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