title: How to call javascript function from asp.net button click event
body: <p>How do I call the showDialog from a asp.net button click event.  My page is a contentpage that has a masterpage associated with it. </p>
  
  <p>I have tried the following</p>
  
  <pre><code>&lt;asp:Button ID="ButtonAdd" runat="server" Text="Add" 
                              OnClientClick="showDialog('#addPerson');" /&gt;
    &lt;asp:Button ID="ButtonAdd" runat="server" Text="Add" 
                              OnClientClick="showDialog(#&lt;%=addPerson.ClientID %&gt;);" /&gt;
  </code></pre>
  
  <p>I am also going to have to call this same function from a gridview template button to modify the record on the dialog. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  
      // Used the following example to open the dialog withJquery 
          var dl;
          $(document).ready(function () {
  
              //Adding the event of opening the dialog from the asp.net add button.
              //setup edit person dialog             
              $('#addPerson').dialog({
                  //Setting up the dialog properties.
                  show: "blind",
                  hide: "fold",
                  resizable: false,
                  modal: true,
                  height: 400,
                  width: 700,
                  title: "Add New Member",
                  open: function (type, data) {
                      $(this).parent().appendTo("form:first");
                  }
              });
  
              //setup edit person dialog             
              $('#editPerson').dialog({
                  //Setting up the dialog properties.
                  show: "blind",
                  hide: "fold",
                  resizable: false,
                  modal: true,
                  height: 400,
                  width: 700,
                  title: "Modify Member",
                  open: function (type, data) {
                      $(this).parent().appendTo("form");
                  }             
              });
  
  
  
              function showDialog(id) {
                  $('#' + id).dialog("open"); 
              } 
  
  
  
      //        function closeDialog(id) {
      //            $('#' + id).dialog("close"); 
      //        } 
  
              //Adding a event handler for the close button that will close the dialog 
              $("a[id*=ButtonCloseDlg]").click(function (e) {
                  $("#divDlg").dialog("close");
                  return false;
              });
          });
  
         &lt;/script&gt;
  </code></pre>
  
  <p>Tried to call the jquery dialog from a gridview editbutton and get the same error Object doesnt support this property or method? </p>
  
  <pre><code>&lt;input type="submit" name="ctl00$ContentPlaceHolder1$GridViewMembers$ctl02$Button1" value="Edit" onclick="showDialog(&amp;#39;addPerson&amp;#39;);" id="ContentPlaceHolder1_GridViewMembers_Button1_0" /&gt;
  </code></pre>