JQuery dialog no longer works after adding to <form>

Question

I have a form and div in the form that I use for the contents of the jQuery dialog box. My goal is to open a dialog box, the user enters some information into text fields and text fields, then submits a form and has this data for my code behind, but then can re-open the dialog (the page remains after sending), enter new data and resubmit the form if they wish.

If I run:

$('div#mydialog').appendTo($('form#foo'));

and then:

 $('div#mydialog').dialog('open');

a dialog appears only with buttons, and behind it a div is displayed, inaccessible to the user. (in short, this is similar to cluster communication with user interface widgets)

Why adding div # mydialog to the form (which was supposed to start) and then calling .dialog ('open') leads to this behavior and how can I make it open normally after adding it to form # foo to send custom data to the server?

Thanks in advance

The EDIT: . For some reason, the dialog is not added after it was originally opened. those. it opens or edits / closes a number of times, the user clicks "submit", the div is added to the form, then when I try to open the dialog again ("open"), Firebug shows that it remains in the place where the form is located - jQuery doesn't seem to be trying to move it again, instead just changing its inline styles. Does anyone know why this is so?

2: , html/ script , , :

    <form id="foo"><! -- some form stuff -->
  <div id="stufftoputindialog" style="display:none;">
    <!-- text boxes/textareas to put in dialog -->
  </div>
</form>

    $('#stufftoputindialog').dialog({
            height: 550,
            width: 400,
            modal: true,
            buttons: {
                "OK": function () { $(this).dialog("close"); },
                "Cancel": function () { $(this).dialog("close"); }
            },
            autoOpen: false
        }

:

   $('#stufftoputindialog').dialog('open');

:

$('#stufftoputindialog').appendTo('form#foo');

,

$('#stufftoputindialog').dialog('open');

(, Firebug, #stufftoputindialog </body>, )

Answer 1

, , :

$('div#mydialog').parent().appendTo('form#foo');

, ... , .dialog(), <div>, .parent(), :)