title: asp.net form controls are unreadable when in a jQuery dialog, how do you fix it?
body: <p>I've got a prickly one. I have an asp.net web forms page. In the page I have a div tag that I've set to be used as a jQuery dialog. In the div is some jQuery controls. I get the dialog to open up and clicking on one of the buttons commences postback. When the page was posting back the code-behind hasn't been reading the values in the controls. Of course a little delving into the html reveals that the dialog takes my div and moves it to the bottom of the html page OUTSIDE my asp.net form tag. Urk!</p>
  
  <p>How the hell do I get around this?</p>
  
  <p>Not that it really helps the situation by my dialog code is here:   </p>
  
  <pre><code> $("#dialog-copy").dialog({
          autoOpen: false,
          height: 200,
          width: 400,
          modal: true,
          resizable: false,
          buttons: {
              'Cancel': function () {
                  $(this).dialog('close');
              },
              'Yes': function () {
                  $(this).dialog('close');
                  $("[id*=btnCopy]")[0].click();
              }
          },
          open: function () {
              $(":button:contains('Yes')").addClass("blue");
          }
      });
       $("[id*=btnCopy]").live('mousedown', function (e) {
          e.preventDefault();
          $("#dialog-copy").dialog('open');
       });
  </code></pre>
  
  <p>And a typical div tag (that is moved to outside my form tag) is looking like this:</p>
  
  <pre><code>&lt;div id="dialog-copy" style="DISPLAY: none" title="Copy Schedule"&gt;
      &lt;p&gt;Please enter a schedule number:&lt;/p&gt;
      &lt;asp:Textbox runat="server" id="txtSchNo"&gt;&lt;/asp:Textbox&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Clicking 'Yes' fires the button that calls the postback.</p>