Question 87331 in ASP.NET Question posted in
The official documentation can be found here.

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

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!

Tags:

3

Answers


  1. 0

    why this is not working

    Because dialog element is moved to body by default.

          $("#dialog").dialog({
          autoOpen: false,
          appendTo: "#ResourceP"
      });
    Login or Signup to reply.
  2. 0

    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')
                        }
                    }
                });
    Login or Signup to reply.
  3. 0 
     // lets pop jquery.UI dialog
                var div = $("#yourdivid")
                div.dialog({
                    modal: true,
                    appendTo: "form",  <------Just add this line 
                    title: "Your Title?", closeText : "",
                    width: "700px",
                    position: { my: 'left top', at: 'right bottom', of: btn },
                    buttons: {
                        ' ok ': function () {
                            div.dialog('close')
                            myokok = true
                            btn.click() // click button again
                        },
                        ' cancel ': function () {
                            div.dialog('close')
                        }
                    }
                });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search