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

Question

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(&#39;addPerson&#39;);" id="ContentPlaceHolder1_GridViewMembers_Button1_0" />

did you try OnClientClick="showDialog('#<%=addPerson.ClientID %>');" ? — Bala R
– Bala R, Commented Jun 1, 2011 at 14:57

Tejs · Accepted Answer · 2011-06-01 14:59:51Z

9

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>

answered Jun 1, 2011 at 14:59

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Spafa9 Over a year ago

$("#<%=ButtonAdd.ClientID %>").click(function () { var dl = $("#divDlg").dialog({ //Setting up the dialog properties. show: "blind", hide: "fold", resizable: false, modal: true, height: 400, width: 700 }); // dl.parent().appendTo(jQuery('form:first')); });

This is how I got the add button to work. Going to start a new question for the gridview button since this question is getting messy.

moodboom Over a year ago

The second example in the answer worked out of the box for me, nice bit of asp foo, thanks.

Frédéric Hamidi · Accepted Answer · 2011-06-01 14:59:32Z

3

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;" />

answered Jun 1, 2011 at 14:59

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

6 Comments

Spafa9 Over a year ago

<input type="submit" name="ctl00$ContentPlaceHolder1$ButtonAdd" value="Add" onclick="showDialog('<%=addPerson.ClientID %>');WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$ButtonAdd", "", true, "", "", false, false))" id="ContentPlaceHolder1_ButtonAdd" />

Frédéric Hamidi Over a year ago

@Spafa9, looks like a scope issue. Try declaring the showDialog() function outside of your document.ready() block.

Raynos Over a year ago

Do we have to hardcode strings of js into an ASP control? Can't we use unobtrusive JavaScript?

Frédéric Hamidi Over a year ago

@Raynos, you mean registering a click handler on the client side instead of using the ClientClick event? It can arguably be better design, but I don't think the questioner is asking about that :)

Raynos Over a year ago

It just reminds me of <div onclick="doSomeMagic();"> and <a href="javascript: void HackYou();"> and makes me cringe. But being pragmatic is fine

|

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related