Доступ к родительскому элементу, из которого был вызван диалог - PullRequest
Новая
       31

Доступ к родительскому элементу, из которого был вызван диалог

0 голосов
/ 05 июля 2011

У меня есть функция перетаскивания для элементов формы.Структура перетаскиваемого элемента: 

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

Как добавить строку в этот код обновления, чтобы метка обновлялась как значение, введенное пользователем ???

Ответы [ 3 ]

2 голосов
/ 05 июля 2011

Вы можете сохранить выбранный объект с помощью .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()

Надеюсь, это поможет.Приветствия

0 голосов
/ 05 июля 2011

Попробуйте это: 

 $('.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')
0 голосов
/ 05 июля 2011

Вы можете взять глобальный элемент, скажем selectedObject = null, как только вы выбрали что-то (в событии щелчка), установите selectedObject = Object, который вы выбрали.При нажатии кнопки «Отмена» снова сделать выбранный объект пустым

Это будет работать только в том случае, если в любой момент времени имеется только один выбранный элемент

...