Append jQuery UI dialog to ASP.NET form on document ready

Question

I have jQuery UI dialog with ASP.NET. I wrap a list of check boxes in the dialog. Since, it's an "Edit page", some of the checkboxes are already checked because the data fetched from datatbase when page is first loaded.

I have no problem when I click on the link to open dialog, and everything works as expected. However, if I don't click on the link to open dialog, those checkboxes values will not be picked up from code-behind when form is submitted back. I understand because jQuery UI dialog append "div" to HTML body outside of the "form" element when the page is loaded.

    //I'm trying to append dialog-dept to form on document ready like this but not yet working
     $("#dialog-dept").parent().appendTo($("form:first"));

How do I make jQuery UI dialog part of "form" tag required by ASP.NET page when page first loaded?

Because there are many other fields on the page not just those checkbox. Sometime, there might be no need to open dialog to select any checkbox.

The code below works well only if I click on the link to open the dialog.

 $(document).ready(function() {

        // Dialog Link
        $('#dialog_link_dept').click(function() {
            $('#dialog-dept').dialog('open');
            return false;
        });

        // Launch Dialog
        $('#dialog-dept').dialog({
            autoOpen: false,
            width: 700,
            modal: true,
            open: function(type, data) {
                $(this).parent().appendTo("form");
            }
        });

    });
</script>

Answer 1

You can move it into the <form> immediately upon creation, even if it's autoOpen: false, like this:

    $('#dialog-dept').dialog({
        autoOpen: false,
        width: 700,
        modal: true
    }).parent().appendTo("form");