Question

I have a form and a div within that form that I am using for the contents of a jQuery dialog. My goal is to have the dialog pop up, the user enters some information in the text boxes and textareas there, then submit the form and have that data available to my code behind, but then be able to re-open the dialog (the page stays up after submit), 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 shows up with only the buttons, and behind it the div is being shown, inaccessible to the user. (in short, it looks like a cluster-intercourse of UI widgets)

Why is it that appending div#mydialog to the form (which is where it was to begin with) and then calling .dialog(‘open’) results in such behavior, and how can I get it to open normally after having appended it to form#foo to send the user’s data to the server?

Thanks in advance

EDIT: it appears that for some reason the dialog is not being appended to after it is initially opened. i.e. it gets opened/edited/closed some number of times, user clicks “submit”, div is appended to form, then when I try to dialog(‘open’) again, Firebug shows that it is staying put right where it is in the form – jQuery appears not to try to move it again, instead just changing its inline styles. Does anyone know why this is so?

EDIT 2: I don’t know how much of my html/script will help you, it’s basically just what you would imagine it is:

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

and

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

on click of edit button:

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

on submit of form:

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

then on click of edit button again,

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

causes a UI trainwreck (and according to Firebug, #stufftoputindialog hasn’t moved outside of the form to right before </body> like it did the first time)

Answer 1

It’s in a container you need to move as well, do this instead:

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

The wrapper is for things like the titlebar…look at your source, when you call .dialog() it’s wrapping it inside another <div>, you need to go to that .parent() then move that element 🙂