title: Button event not firing in javascript
body: <p>I've added a jquery modal popup to save upload files for a specific device. The modal pops up, the cancel button works, but I cant figure out how to get the Save button to fire the onclick event... </p>
  
  <p>This is what I've done:</p>
  
  <pre><code>     $(function () {
          $("#dialogCustUploads").dialog("destroy");
          $("#dialogCustUploads").dialog({
              title: "Upload Files",
              autoOpen: false,
              modal: true,
              resizable: false,
              width: 'auto',
              buttons: {
                  Save: function () {
                      $(document.getElementById('&lt;%=btnSave.ClientID %&gt;')).click();
                  },
                  Cancel: function () {
                      $(this).dialog("close");
                  }
              }
          });
      });
  
      function showCustUploads() {
          $(function () {
              $("#dialogCustUploads").dialog("open");
                      });
          $(".dialogCustUploads").parent().appendTo($("form:first"));  
      }
  
  
      &lt;div id="dialogCustUploads" style="display: none"&gt;     
      &lt;table style="width:100%;"&gt;
                  &lt;tr&gt;
                      &lt;td class="auto-style1"&gt;
                          &lt;asp:Label ID="Label16" runat="server" Text="Client"&gt;&lt;/asp:Label&gt;
  
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:Label ID="lblClientUploadName" runat="server"&gt;&lt;/asp:Label&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                      &lt;tr&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="Label19" runat="server" Text="Certificate no" &gt;&lt;/asp:Label&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:TextBox ID="txtCertificateNo" runat="server" Width="410px"&gt;&lt;/asp:TextBox&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;asp:Label ID="Label14" runat="server" Text="Upload Option"&gt;&lt;/asp:Label&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:DropDownList ID="lstUploadOption" runat="server" AppendDataBoundItems="True" Width="410px"&gt;&lt;/asp:DropDownList&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="auto-style1"&gt;
                          &lt;asp:Label ID="Label18" runat="server" Text="File"&gt;&lt;/asp:Label&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:FileUpload ID="fuPath" runat="server" Width="408px" /&gt;
                          &lt;br /&gt;
                          &lt;asp:Label ID="lblMessage" runat="server" Text=""&gt;&lt;/asp:Label&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="auto-style1"&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:Button ID="btnSave" style="display: none;" runat="server" Text="Save" OnClientClick="btnSave_Click"  BackColor="White" /&gt;                          
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm not sure what I'm missing or doing wrong... This is my first time on javascript... Any help will be greatly appreciated!!!! The savebutton does nothing....</p>
  
  <p>EDIT</p>
  
  <p>Thanks for everyone's help!
  I have updated my button to remove the inline styling:</p>
  
  <pre><code>    &lt;asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="btnSave_Click" ClientIDMode="Static" /&gt; 
  </code></pre>
  
  <p>And I've tried using the following which you have supplied to me: </p>
  
  <pre><code>    1. $("#&lt;%=btnSave.ClientID%&gt;").click();
      2. document.getElementById('&lt;%=btnSave.ClientID %&gt;').click();
      3. &lt;asp:Button ID="btnSave" style="display: none;" runat="server" Text="Save" OnClientClick="btnSave_Click" ClientIDMode="Static"  BackColor="White" /&gt; 
       document.getElementById('btnSave').click();
      4. $('&lt;%=btnSave.ClientID %&gt;').trigger("click");
  </code></pre>
  
  <p>but they all give me an error message which reads: </p>
  
  <pre><code>    Microsoft JScript runtime error: 'btnSave_Click' is undefined
  </code></pre>
  
  <p>When the form breaks the button reads as follows:</p>
  
  <pre><code>    &lt;input type="submit" name="ctl00$MainContent$btnSave" value="Save" onclick="btnSave_Click;" id="btnSave" /&gt; 
  </code></pre>
  
  <p>Is there anything else wrong with what I'm doing? </p>
  
  <p>EDIT</p>
  
  <p>This is my source code:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      $(function () {
          $("#dialog").dialog("destroy");
          $("#dialog").dialog({
              title: "Message",
              autoOpen: false,
              modal: true,
              buttons: {
                  Ok: function () {
                      $(this).dialog("close");
                  }
              }
          });
      });
      function showMessage() {
          $(function () {
              $("#dialog").dialog("open");
          });
          return false;
      }
  
      $(function () {
          $("#dialogCustUploads").dialog("destroy");
          $("#dialogCustUploads").dialog({
              title: "Upload Files",
              autoOpen: false,
              modal: true,
              resizable: false,
              width: 'auto',
              buttons: {
                  Save: function () {
                      document.getElementById('&lt;%=btnSave.ClientID %&gt;').click();
                  },
                  Cancel: function () {
                      $(this).dialog("close");
                  }
              }
          });
      });
  
      function showCustUploads() {
          $(function () {
              $("#dialogCustUploads").dialog("open");
                      });
          $(".dialogCustUploads").parent().appendTo($("form:first"));  
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>My div where the for the button click event:</p>
  
  <pre><code>    &lt;div id="dialogCustUploads" style="display: none"&gt;     
      &lt;table style="width:100%;"&gt;
                  &lt;tr&gt;
                      &lt;td class="auto-style1"&gt;
                          &lt;asp:Label ID="Label16" runat="server" Text="Client"&gt;&lt;/asp:Label&gt;
  
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:Label ID="lblClientUploadName" runat="server"&gt;&lt;/asp:Label&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                      &lt;tr&gt;
                  &lt;td&gt;
                      &lt;asp:Label ID="Label19" runat="server" Text="Certificate no" &gt;&lt;/asp:Label&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;asp:TextBox ID="txtCertificateNo" runat="server" Width="410px"&gt;&lt;/asp:TextBox&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;asp:Label ID="Label14" runat="server" Text="Upload Option"&gt;&lt;/asp:Label&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:DropDownList ID="lstUploadOption" runat="server" AppendDataBoundItems="True" Width="410px"&gt;&lt;/asp:DropDownList&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="auto-style1"&gt;
                          &lt;asp:Label ID="Label18" runat="server" Text="File"&gt;&lt;/asp:Label&gt;
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:FileUpload ID="fuPath" runat="server" Width="408px" /&gt;
                          &lt;br /&gt;
                          &lt;asp:Label ID="lblMessage" runat="server" Text=""&gt;&lt;/asp:Label&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="auto-style1"&gt;&lt;/td&gt;
                      &lt;td&gt;
                          &lt;asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" /&gt; 
  
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I call the modal popup from a click in a gridview:</p>
  
  <pre><code>    &lt;asp:GridView ID="gvDeviceCalibration" runat="server" CellPadding="10" Width="90%" AutoGenerateColumns="False"  BorderWidth="1px"&gt;
                              &lt;HeaderStyle BackColor="#3A4F63" BorderWidth="1px" Font-Size="7pt" Wrap="False" ForeColor="White" /&gt;
                              &lt;RowStyle BackColor="White" Wrap="True" /&gt;
                                  &lt;AlternatingRowStyle BackColor="#FFCC99" Wrap="True" /&gt;
                              &lt;Columns&gt;
                                  &lt;asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" &gt;&lt;/asp:BoundField&gt;
                                  &lt;asp:BoundField DataField="InstrumentType" HeaderText="Instrument Type" ReadOnly="True" SortExpression="InstrumentType"&gt; &lt;HeaderStyle Wrap="True" /&gt;&lt;/asp:BoundField&gt;
  
                                  &lt;asp:BoundField DataField="Make" HeaderText="Make" ReadOnly="True" SortExpression="Make"&gt; 
                                      &lt;HeaderStyle Wrap="True" /&gt;
                                  &lt;/asp:BoundField&gt;
                                  &lt;asp:BoundField DataField="Location" HeaderText="Location" ReadOnly="True" SortExpression="Location"&gt;&lt;/asp:BoundField&gt;
                                  &lt;asp:BoundField DataField="SubLocation" HeaderText="Sub Location" ReadOnly="True" SortExpression="Sub Location"&gt; &lt;HeaderStyle Wrap="True" /&gt;&lt;/asp:BoundField&gt;
                                  &lt;asp:BoundField DataField="CalibrationIntervals" HeaderText="Calibration Intervals" ReadOnly="True" SortExpression="CalibrationIntervals"&gt; &lt;HeaderStyle Wrap="True" /&gt;&lt;/asp:BoundField&gt;
                                  &lt;asp:BoundField DataField="SerialNo" HeaderText="Serial No" ReadOnly="True" SortExpression="SerialNo"&gt; &lt;HeaderStyle Wrap="True" /&gt;&lt;/asp:BoundField&gt;
                                  &lt;asp:BoundField DataField="WorkingRange" HeaderText="Working Range" ReadOnly="True" SortExpression="WorkingRange"&gt; &lt;HeaderStyle Wrap="True" /&gt;&lt;/asp:BoundField&gt;
                                  &lt;asp:BoundField DataField="Classification" HeaderText="Classification" ReadOnly="True" SortExpression="Classification"&gt;&lt;/asp:BoundField&gt;
                                  &lt;asp:BoundField DataField="CalibrationDate" HeaderText="Calibration Date" DataFormatString="{0:yyyy/MM/dd}" ReadOnly="True" SortExpression="CalibrationDate"&gt;                                        
                                   &lt;HeaderStyle Wrap="True" /&gt;
                                  &lt;/asp:BoundField&gt;
                                  &lt;asp:BoundField DataField="CalibrationHouse" HeaderText="Calibration House" ReadOnly="True" SortExpression="CalibrationHouse"&gt;&lt;HeaderStyle Wrap="True" /&gt;&lt;/asp:BoundField&gt;
                                  &lt;asp:BoundField DataField="Owner1s" HeaderText="Owner 1" ReadOnly="True" SortExpression="Owner1s"&gt;&lt;/asp:BoundField&gt;
                                  &lt;asp:BoundField DataField="Owners2" HeaderText="Owner 2" ReadOnly="True" SortExpression="Owners2"&gt;&lt;/asp:BoundField&gt;
                                  &lt;asp:BoundField DataField="CreatedBy" HeaderText="Created By" ReadOnly="True" SortExpression="CreatedBy"&gt;&lt;/asp:BoundField&gt;
                                  &lt;asp:TemplateField HeaderText="Select"&gt;
                                      &lt;ItemTemplate&gt;
                                          &lt;asp:ImageButton ID="UpdateStatus" runat="server" Height="22" BorderStyle="None" BackColor="Transparent"
                                              ImageUrl="~/Images/Sign-Select-icon.png" OnClick="SelectCalDevice_Click"  Width="22"  /&gt;&lt;%-- --%&gt;
  
                                      &lt;/ItemTemplate&gt;
                                  &lt;/asp:TemplateField&gt;                                   
                                  &lt;asp:TemplateField HeaderText="Upload"&gt;
                                      &lt;ItemTemplate&gt;
                                          &lt;asp:ImageButton ID="CustUploadFiles" runat="server" Height="22" BorderStyle="None" BackColor="Transparent"
                                              ImageUrl="~/Images/UploadFilesTrans.png" OnClick="SelectCustFiles_Click" Width="22"  /&gt; 
                                      &lt;/ItemTemplate&gt;
                                  &lt;/asp:TemplateField&gt;
                                  &lt;asp:TemplateField HeaderText="View "&gt;
                                      &lt;ItemTemplate&gt;
                                          &lt;asp:ImageButton ID="CustViewFiles" runat="server" Height="25" BorderStyle="None" BackColor="Transparent"
                                              ImageUrl="~/Images/msgicon.png" ForeColor="Transparent"  Width="25" OnClick="ViewCustFiles_Click"  /&gt;
                                      &lt;/ItemTemplate&gt;
                                  &lt;/asp:TemplateField&gt;
                              &lt;/Columns&gt;
                              &lt;EmptyDataTemplate&gt;                                
                                  &lt;HeaderTemplate&gt;There are no leads listed.&lt;/HeaderTemplate&gt;
                              &lt;/EmptyDataTemplate&gt; 
                          &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>And this is the SelectCustFiles_Click where I show the popup:</p>
  
  <pre><code>    protected void SelectCustFiles_Click(object sender, EventArgs e)
      {
          ImageButton lb = sender as ImageButton;
          GridViewRow row = (GridViewRow)lb.NamingContainer;
          txtRowID.Text = row.Cells[0].Text;
          lblClientUploadName.Text = row.Cells[1].Text;
  
          PopulateUploadOptions();
          //modalCustUploads.Show();
          this.Page.ClientScript.RegisterStartupScript(this.GetType(), "popUpMessage", "showCustUploads();", true);
      }
  </code></pre>
  
  <p>And this is the click event I'm trying to call from script:</p>
  
  <pre><code>    protected void btnSave_Click(object sender, EventArgs e)
      {
          // Before attempting to save the file, verify
          // that the FileUpload control contains a file.
          if (fuPath.HasFile)
          {
              // Get the size in bytes of the file to upload.
              int fileSize = fuPath.PostedFile.ContentLength;
  
              // Allow only files less than 2,100,000 bytes (approximately 2 MB) to be uploaded.
              if (fileSize &lt; 45497717)
              {
                  // Call a helper method routine to save the file.
                  //SaveFile(fuPath.PostedFile);
                  SaveFile();
                  fuPath.Dispose();
  
                  lbljQMessage.Text = "Update successful";
                  this.Page.ClientScript.RegisterStartupScript(this.GetType(), "popUpMessage", "showCustUploads();", true);
                  //modalCustUploads.Show();
              }
              else
                  lblMessage.Text = "You did not specify a file to upload.";
          }
      }
  </code></pre>
  
  <p>I'm getting an error of 'btnSave' is undefined...</p>
  
  <p>this is the scripts I'm using:</p>
  
  <pre><code>    &lt;script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
     &lt;script src="../Scripts/jquery-ui-1.8.17.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>SOLVED</p>
  
  <p>I found the problem... I appended the dialog in the wrong place.. Instead of this:</p>
  
  <pre><code>     function showCustUploads() {
          $(function () {
              $("#dialogCustUploads").dialog("open");
                      });
          $(".dialogCustUploads").parent().appendTo($("form:first"));  
      }
  </code></pre>
  
  <p>it should be:</p>
  
  <pre><code>     function showCustUploads() {
          $(function () {
              $("#dialogCustUploads").dialog("open");
                      }); 
      }
  </code></pre>
  
  <p>And instead of this:</p>
  
  <pre><code>     $(function () {
          $("#dialogCustUploads").dialog("destroy");
           $("#dialogCustUploads").dialog({
              title: "Upload Files",
              autoOpen: false,
              modal: true,
              resizable: false,
              width: 'auto',
              buttons: {
                  Save: function () {
                    //  __doPostBack("&lt;%=btnSave.UniqueID %&gt;", "");
                      $($get("&lt;%=btnSave.UniqueID %&gt;")).click();
                  },
                  Cancel: function () {
                      $(this).dialog("close");
                  }
              }
          });
      });
  </code></pre>
  
  <p>it should be:</p>
  
  <pre><code>     $(function () {
          $("#dialogCustUploads").dialog("destroy");
          var dlgUploads = $("#dialogCustUploads").dialog({
              title: "Upload Files",
              autoOpen: false,
              modal: true,
              resizable: false,
              width: 'auto',
              buttons: {
                  Save: function () {
                    //  __doPostBack("&lt;%=btnSave.UniqueID %&gt;", "");
                      $($get("&lt;%=btnSave.UniqueID %&gt;")).click();
                  },
                  Cancel: function () {
                      $(this).dialog("close");
                  }
              }
          });
          dlgUploads.parent().appendTo(jQuery("form:first"));
      });
  </code></pre>
  
  <p>Thanks for everyone's help!!! Appreciate it!</p>