jQuery UI How to Open a Dialog, append to a div not the body

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

It's an old thread but in case someone (like myself) comes across it in the future, I think it's worth noting that from 1.10.0 on jQuery UI offers the appendTo option:

$("#myDialogue").dialog({
  appendTo: "#DesiredDivID"
});

link to API docs

Answer 2

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

Answer 3

Such ModalDialogs are designed to not interfere in the existing DOM, so only they are appended in the body rather than you configuring where to add.

For your specific use, I would suggest to find the form inputs from Dialog when it is closed, clone them and append them to your form. You might want to convert type=text to type=hidden when you insert them into your form. That way, you can get that data submitted with normal form submit.

Happy Coding.