在文档就绪时将jQuery UI对话框附加到ASP.NET表单

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.

我有ASP.NET的jQuery UI对话框。我在对话框中包含一个复选框列表。因为它是一个“编辑页面”，所以已经检查了一些复选框，因为首次加载页面时从datatbase获取数据。

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.

当我点击链接打开对话框时，我没有问题，一切都按预期工作。但是，如果我没有单击链接打开对话框，则在提交表单时，不会从代码隐藏中选取这些复选框值。我理解，因为当加载页面时，jQuery UI对话框将“div”附加到“form”元素之外的HTML主体。

    //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?

当页面首次加载时，如何使ASP.NET页面所需的“表单”标记的jQuery UI对话框成为一部分？

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>

2 个解决方案

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

$（“＃dialog-dept”）。dialog（{height：300，width：250，modal：true，appendTo：“form”，title：“Title”，show：{effect：“fade”，duration：500} ，隐藏：{效果：“折叠”，持续时间：500}}）;

and work fine for me

并为我工作

#1