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

问题

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>

回答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");

回答2:

I guess this way form modal dialog:

$("#dialog-dept").dialog({ height: 300, width: 250, modal: true,appendTo:"form", title: "Title", show: { effect: "fade", duration: 500 }, hide: { effect: "fold", duration: 500} });

and work fine for me

来源：https://stackoverflow.com/questions/3735947/append-jquery-ui-dialog-to-asp-net-form-on-document-ready

标签

ASP.NET

jquery

jquery-ui

jquery-ui-dialog