Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
82
rated 0 times [  86] [ 4]  / answers: 1 / hits: 30393  / 13 Years ago, tue, may 17, 2011, 12:00:00

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?


More From » jquery

 Answers
24

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

[#92201] Sunday, May 15, 2011, 13 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kieraelsies

Total Points: 718
Total Questions: 103
Total Answers: 104

Location: England
Member since Sun, May 21, 2023
1 Year ago
kieraelsies questions
Tue, Aug 3, 21, 00:00, 3 Years ago
Tue, Feb 23, 21, 00:00, 3 Years ago
Thu, Nov 12, 20, 00:00, 4 Years ago
Wed, Sep 9, 20, 00:00, 4 Years ago
Mon, Sep 16, 19, 00:00, 5 Years ago
;