Form Checkboxes are not being posted when they are in a Popup Div ASP.NET C#-CodePudding

When I try to get form posted data from a pop-up that is within the actual form (column_1 and column_2), the data will not be available. All other ones outside of the pop-up work fine (txt_startdate and chxShowDelete).

  <script>
      $(function () {
          $("#dialog").dialog({
              autoOpen: false,
          });

          $("#opener").on("click", function () {
              $("#dialog").dialog("open");
          });
      });
  </script>

   <form id="ResourceP" runat="server">
   <input type="button" id="opener" value="Select Columns" />
        <div id="dialog" title="Column Selection">
            <table>
            <tr>
             <td><asp:CheckBox ID="column_1" runat="server" Checked="True" />ID Value</td>
             <td><asp:CheckBox ID="column_2" runat="server" />Start Date</td>
            </tr>
            </table>
        </div>

    <asp:TextBox ID="txt_startdate" runat="server"></asp:TextBox>
    <asp:CheckBox ID="chxShowDelete" runat="server" />
    <asp:button runat="server" text="Search" ID="search" OnClick="search_Click" />
  </form>

If I remove the pop-up, column_1 and column_2 are then seen in the post.

   <form id="ResourceP" runat="server">
    <asp:CheckBox ID="column_1" runat="server" Checked="True" />ID Value
    <asp:CheckBox ID="column_2" runat="server" />Start Date
    <asp:TextBox ID="txt_startdate" runat="server"></asp:TextBox>
    <asp:CheckBox ID="chxShowDelete" runat="server" />
    <asp:button runat="server" text="Search" ID="search" OnClick="search_Click" />
  </form>

Not sure why this is not working or anyway around it - any help would be greatly appreciated.

Thank you!

CodePudding user response：

why this is not working

Because dialog element is moved to body by default.

      $("#dialog").dialog({
          autoOpen: false,
          appendTo: "#ResourceP"
      });

CodePudding user response：

I could never tell why (or it not been explaned clear to me), that you find in some cases, the controls of the dialog don't seem to get saved, and other times, they do not.

However, as the other poster explained, when using a jquery.UI dialog, it does "move" the content to its own place in the web page. So, for dialogs that ask yes/no etc, and even dialogs with a asp.net button and post-back? They tend to work ok.

However, due to jquery jquery "making its own" div for the content, that content is palced outside of the "form" tag on the page - as a result, you can modify, but if you have a post-back, it can't place the content "back" into the page.

So, from what I can tell, if you close the dialog, and THEN post back, your content is placed/saved/ready for code behind use.

Anway, to make a long story short, jquery.ui has the append feature, and in most cases, add this to your code:

                // lets pop jquery.UI dialog
                var mydiv = $("#MyFunDialog")
                mydiv.dialog({
                    modal: true,
                    appendTo: "form",  <------ add this
                    title: "Really do this?", closeText : "",
                    width: "400px",
                    position: { my: 'left top', at: 'right bottom', of: btn },
                    buttons: {
                        ' ok ': function () {
                            mydiv.dialog('close')
                            myokok = true
                            btn.click() // click button again
                        },
                        ' cancel ': function () {
                            mydiv.dialog('close')
                        }
                    }
                });