title: asp:Button in jQuery dialog box not firing OnClick event
body: <p>I have an asp:Button inside a <code>jQuery</code> dialog for which the <code>OnClick</code> event isn't firing. I'm using the <code>PostBackUrl</code> property to navigate to another page, but I want to <em>set</em> this property in the <code>OnClick</code> event so that I can append a query string variable according to the name of a file they upload in the dialog. I posted a question about this dialog earlier, because I couldn't get it to post back at all, but that's been fixed. Clicking the button posts back fine, and I can set the <code>PostBackUrl</code> property in the asp markup, or in the <code>Page_Load()</code> of the code behind. But I <em>can't</em> get the <code>OnClick</code> function to fire for some reason, and that's where I <em>want to set</em> the <code>PostBackUrl</code>. Here's the .aspx...</p>
  
  <pre><code>&lt;form id="frmDialog" runat="server"&gt;
          &lt;asp:Button ID="btnDisplayDialog" runat="server" Text="Click to Display Login Dialog" OnClientClick="showDialog(); return false;" /&gt;
          &lt;div class="divInnerForm"&gt;&lt;/div&gt;
          &lt;div class="divDialog" style="display: none"&gt;
              &lt;table style="width: 100%;"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;First Name: &lt;asp:TextBox ID="txtFirstName" runat="server" Text=""&gt;&lt;/asp:TextBox&gt;&lt;/td&gt;
                      &lt;td&gt;Last Name: &lt;asp:TextBox ID="txtLastName" runat="server" Text=""&gt;&lt;/asp:TextBox&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          How Old are You?
                          &lt;asp:DropDownList ID="ddlAge" runat="server"&gt;
                              &lt;asp:ListItem Value="1"&gt;1&lt;/asp:ListItem&gt;
                              &lt;asp:ListItem Value="2"&gt;2&lt;/asp:ListItem&gt;
                              &lt;asp:ListItem Value="3"&gt;3&lt;/asp:ListItem&gt;
                          &lt;/asp:DropDownList&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          How Many Siblings do You Have?
                          &lt;asp:DropDownList ID="ddlNumberSiblings" runat="server"&gt;
                              &lt;asp:ListItem Value="1"&gt;1&lt;/asp:ListItem&gt;
                              &lt;asp:ListItem Value="2"&gt;2&lt;/asp:ListItem&gt;
                              &lt;asp:ListItem Value="3"&gt;3&lt;/asp:ListItem&gt;
                              &lt;asp:ListItem Value="4"&gt;4&lt;/asp:ListItem&gt;
                          &lt;/asp:DropDownList&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          What is your birthday?
                          &lt;input type="text" id="datepicker" name="datepicker" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          Please Choose a Picture to Upload:
                          &lt;asp:FileUpload ID="fupUserPicture" runat="server" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnUserPicture_Click" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>...the jQuery script that displays the dialog and places it within the form...</p>
  
  <pre><code>    function showDialog() {
          $('.divDialog').dialog({
              modal: true, show: 'slide', width: 500,
              open: function (event, ui) {
                  $('.divInnerForm').append($(this).parent());
              }
          });
      }
  </code></pre>
  
  <p>...and the code behind with my OnClick function....</p>
  
  <pre><code> protected void btnUserPicture_Click(object sender, EventArgs e)
          {
              string fileName = "";
              if (fupUserPicture.HasFile)
              {
                  try
                  {
                      fileName = Path.GetFileName(fupUserPicture.FileName);
                      fupUserPicture.SaveAs(Server.MapPath("~/Images/" + fileName));
                  }
                  catch (Exception ex)
                  {
                  }
                  btnSubmit.PostBackUrl = "~/Profile.aspx?pic=" + fileName;
              }
          }
  </code></pre>
  
  <p>EDIT: Ok, here's how the submit button in the dialog actually renders as HTML. I think this may be the problem. As you can see, the javascript onclick simply provides "Profile.aspx" as the post back url, even though it seems to me any server side code should execute first and foremost. This is within the form...</p>
  
  <pre><code>&lt;input id="btnSubmit" type="submit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnSubmit", "", false, "", "Profile.aspx", false, false))" value="Submit" name="btnSubmit"&gt;
  </code></pre>
  
  <p>..and here's how it renderes if I remove <code>btnSubmit.PostBackUrl = "~/Profile.aspx"</code> from the <code>Page_Load()</code> function....</p>
  
  <pre><code>&lt;input id="btnSubmit" type="submit" value="Submit" name="btnSubmit"&gt;
  </code></pre>
  
  <p>EDIT 2: ok so I've added another hidden asp button outside of the dialog, and the button inside the dialog now calls a javascript function which triggers the <code>OnClick</code> event of the hidden button. Same thing, the javascript function runs fine, but <code>btnHidden_Click()</code> function <code>does not run!</code> I'm at a total loss, at this point I literally have no idea why this isn't working. Here's the new Hidden Button, outside of the dialog div but inside of the form as you can see....</p>
  
  <pre><code> &lt;/div&gt;
          &lt;asp:Button ID="btnHidden" runat="server" Text="" Visible="false" ClientIDMode="Predictable"  OnClick="btnHidden_Click"/&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>...here's the button inside the dialog with the OnClientClick event, which as I've said runs fine...</p>
  
  <pre><code>                &lt;asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="forcebtnHiddenClick(); return false;" /&gt;
  </code></pre>
  
  <p>And here's the OnClick function in the code behind for btnHidden, though it's exactly the same as before...</p>
  
  <pre><code>   protected void btnHidden_Click(object sender, EventArgs e)
          {
              string fileName = "";
              if (fupUserPicture.HasFile)
              {
                  try
                  {
                      fileName = Path.GetFileName(fupUserPicture.FileName);
                      fupUserPicture.SaveAs(Server.MapPath("~/Images/" + fileName));
                  }
                  catch (Exception ex)
                  {
                  }
                  Response.Redirect("~/Profile.aspx?pic=" + fileName);
              }
          }
  </code></pre>
  
  <p>...and the javascript function that <em>runs</em>, but for some reason doesn't result in btnHidden_Click running...</p>
  
  <pre><code>function forcebtnHiddenClick(e) {
      //__doPostBack('btnHidden', 'OnClick');
      $('#btnHidden').trigger('click');
  }
  </code></pre>
  
  <p>..as you can see I've tried both .trigger('click') and __doPostBack(), both to no avail.</p>
  
  <p>EDIT: Ok, so the problem is definitely the        </p>
  
  <pre><code> function forcebtnHiddenClick() {
              __doPostBack('btnHidden', '');
  }
  </code></pre>
  
  <p>function, which is not actually triggering the <code>btnHidden_Click</code> event. When I make <code>btnHidden</code> visible and click it directly, the <code>btnHidden_Click</code> function runs fine.</p>
  
  <p>EDIT: After TONS of searching, found this and got it to work...</p>
  
  <pre><code> function forcebtnHiddenClick() {
              &lt;%= ClientScript.GetPostBackEventReference(btnHidden, string.Empty) %&gt;;
          }
  </code></pre>
  
  <p>I don't know why</p>
  
  <pre><code>__doPostBack(&lt;%= btnHidden.ClientID %&gt;, '') 
  </code></pre>
  
  <p>doesn't work.</p>