How to call javascript function from asp.net button click event

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.

I have tried the following

<asp:Button ID="ButtonAdd" runat="server" Text="Add" 
                            OnClientClick="showDialog('#addPerson');" />
  <asp:Button ID="ButtonAdd" runat="server" Text="Add" 
                            OnClientClick="showDialog(#<%=addPerson.ClientID %>);" />

I am also going to have to call this same function from a gridview template button to modify the record on the dialog.
<script type="text/javascript">


    // 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;
            });
        });

       </script>

Tried to call the jquery dialog from a gridview editbutton and get the same error Object doesnt support this property or method?
<input type="submit" name="ctl00$ContentPlaceHolder1$GridViewMembers$ctl02$Button1" value="Edit" onclick="showDialog('addPerson');" id="ContentPlaceHolder1_GridViewMembers_Button1_0" />

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

If you don’t need to initiate a post back when you press this button, then making the overhead of a server control isn’t necesary.

<input id="addButton" type="button" value="Add" />

<script type="text/javascript" language="javascript">
     $(document).ready(function()
     {
         $('#addButton').click(function() 
         { 
             showDialog('#addPerson'); 
         });
     });
</script>

If you still need to be able to do a post back, you can conditionally stop the rest of the button actions with a little different code:
<asp:Button ID="buttonAdd" runat="server" Text="Add" />

<script type="text/javascript" language="javascript">
     $(document).ready(function()
     {
         $('#<%= buttonAdd.ClientID %>').click(function(e) 
         { 
             showDialog('#addPerson');

             if(/*Some Condition Is Not Met*/) 
                return false;
         });
     });
</script>

Method 2

You’re already prepending the hash sign in your showDialog() function, and you’re missing single quotes in your second code snippet. You should also return false from the handler to prevent a postback from occurring. Try:

<asp:Button ID="ButtonAdd" runat="server" Text="Add"
    OnClientClick="showDialog('<%=addPerson.ClientID %>'); return false;" />


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x