Question

I’m using this simple modal dialog example here:
http://jqueryui.com/demos/dialog/modal-form.html

When the page loads, jQuery removes the dialog’s div from the DOM. When the button is clicked to open the dialog, jQuery appends the dialog’s div to the end of the body element.

I want to append it to a certain div, not the body. The reason is I have a large form on the page, and in the dialog is a single file input (no seperate form). I want to keep my file input in the dialog, within the same form as the rest of the fields on the page (which aren’t in the dialog).

Is it possible to append the dialog to a given div or element?

Answer 1

Just tackled this myself yesterday. The way I solved it was to insert an empty div at the bottom of the form (<div id="bottomOfForm"></div>) then when closing the dialogue, move it’s contents into that div.
In my case, the code was something like this:

        // Setup up dialogue box that contains some form fields:    
        $j("#myDialogue").dialog({
            autoOpen: false,
            height: 300,
            width: 350,
            modal: true,
            buttons: {
                "Submit": function() {
                    // Move to main form so fields get included:
                    $j(this).parent().prependTo($j("#bottomOfForm"));
                    // Submit the main form:
                    $j('#mainForm').submit();
                },
                Cancel: function() {
                    $j(this).dialog( "close" );
                }
            }
        });