Как добавить / изменить измененное содержимое диалоговой формы в вызывающий элемент - PullRequest
Новая
       16

Как добавить / изменить измененное содержимое диалоговой формы в вызывающий элемент

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

Я пытаюсь сделать перетаскиваемый параметр выбора, и когда он перетаскивается в Основную область содержимого, я добавляю к нему два элемента управления, чтобы удалить перетаскиваемый элемент и Другой для его свойств. Html для перетаскиваемого выбора похож на 

<div class="demo">
<div class="tools"> 
<ul>
    <li class="draggable" >
     <div class="control">
      <label class="orig">&nbsp;</label>
      <select><option> Select Option</option></select>
      <div class="delete" style="display:none"><sup>x</sup></div>
      <div class="properties select" style="display:none">Properties</div>
     </div> 
    </li>
 </ul>   
</div>        
</div>

Когда элемент управления Select отброшен, у меня есть следующий код, который запускается для добавления свойств и удаления параметров для него 

$('.select').live('click', function() {
        var label = $(this).parent().find('label').html();
        $("#select_label").val(label);
        var option = $(this).parent().find('select').children();
        $( "#dialog-select" ).dialog( "open" ).data('parent_div',$(this).parent());
        $('#add_more').live('click', function() {
        if(($(this).parent().prev().find("input").val()) == "")
        {
            alert("Please enter a value for option");
            $(this).parent().prev().find("input").focus();
            return (false);
        }
        else{// Add another option field to the form
            $(this).parent().prev().after('<fieldset><label for="select_option">Option</label>      <input type="text" name="select_option" class="text ui-widget-content ui-corner-all" /></fieldset>');
            }               
        });         
        return false;
});

Это добавляет X (для удаления элемента) и ссылку свойств на опцию выбора. Когда я нажимаю на Свойства, открывается следующая форма в модальном диалоге 

<div id="dialog-select" title="Select Properties" style="display:none">
<form>
<fieldset>
    <label for="select_label">Enter Label </label>
    <input type="text" name="select_label" id="select_label" class="text ui-widget-content ui-corner-all" />        
</fieldset>
<fieldset>
    <label for="select_option">Option</label>
    <input type="text" name="select_option" class="text ui-widget-content ui-corner-all" />     
</fieldset>

<fieldset>
    <input type="button" name="add_more" id="add_more" value="Add More Option" />
</fieldset>
</form>

Принимает от пользователя метку и параметры для параметров выбора,

Когда пользователь добавляет некоторые параметры и метку и нажимает кнопку «Применить», выполняется следующий код. 

 $("#dialog-select").dialog({
                        autoOpen: false,
                        height: 300,
                        width: 350,
                        modal: true,
                        buttons: {
                                "Apply": function(){
                                    var label = $("#select_label").val()
                                    var $elem_clicked = $("#dialog-select").data('parent_div'); 
                                    $elem_clicked.find('label').html(label); 
                                    // I need something to do here
                                    $( this ).dialog( "close" );                                        

                                    },
                                Cancel: function() {
                                            $( this ).dialog( "close" );
                                        }
                        }
                         });

СЕЙЧАС проблема в том, что то, что пользователь добавил в Параметры, не добавляется в выбранные Параметры, которые были перетащены в область содержимого. Как вы можете видеть здесь http://jsfiddle.net/bilalkhan/D7pMT/4/, что метка обновляется, но я не могу понять, как добавить / изменить параметры, добавленные пользователем в форме диалога. Пожалуйста, помогите мне с этим вопросом ..

1 Ответ

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

Я разобрался, как добавить вот этот код 

 // Add the Options to the Select Element Here
                                    $('input[name=select_option]').each(function(){
                                        // get the Values of options here
                                        $(this).attr("value", $(this).val());
                                        if($(this).val() != "")
                                        {// if the option is not empty
                                            // add options to the select element
                                            $elem_clicked.find('select').append('<option value="'+$(this).val()+'" >'+$(this).val()+'</option>');   
                                        }

                                    });
...