jQuery UI dialog - form not post

Symptoms
I applied the jquery-ui dialog, but now when I click on it, the submit input ( or button ) doesn't do a normal form post.

Case Study
For example, for whatever reasons, you have html like this (just for demo purpose only)

<form name="stuff" action="whatever/listener" method="post">
   <div class="myDialog">
         <input type="submit" value="Submit" />
   </div>
</form>

You applied the jquery dialog on that element as the following,

$('.myDialog').dialog({
            height: 'auto',
            modal: true,
            resizable: false,
            draggable: false,
            autoOpen: true,
            width: 'auto'
});

Everything works fine from UI perspective... Oops, but all of a sudden, you find that the form dialog submit button is not posting to the form... What happen??

Reason
Well, first of all, before trying any methods, try to disable that dialog, and see if the form posts without it. If the form posts without the dialog, then you know you can localize the problem.

If you confirm that it is a jquery dialog issues, then I can tell you that the jquery dialog could move your DOM out of its original place, and that's the reason why the form post doesn't work.

Solution
You can move the dialog box content back to the form by doing this

$(".myDialog").parent().appendTo("/html/body/form[0]");