How do you programmatically Invoke a Server Click via JQuery or Javascript

Question

I have an ASP Server Button on a User Control that triggers a Server-Side OnClick event which works fine. But I need to trigger the OnClick event using JavaScript or JQuery.

I have tried the following methods but neither actually simulate the results as if a User were to actually click the button:

document.getElementById('<%=btnRefresh.ClientID%>').click();
$('#<%=btnRefresh.ClientID %>').click();

I suspected this was possibly because this emulates a OnClientClick event and not the Server; but I have found claims that this has worked for others in successfully triggering the Server Side OnClick event but this is not working for me.

Is there any other way to accomplish the task?

In response to the suggestion of AJAX. I have tried that approach but a PostBack is required for this task to successfully complete. The actual Click of the button produces the desired result, I can cause the event to trigger using AJAX but without the element of PostBack it fails.

You need to use AJAX if you want to trigger a server event via the client — tymeJV
– tymeJV, Commented Sep 24, 2014 at 18:36
Do you have a client side event handler for that button? Perhaps it's returning false or otherwise preventing the postback from occurring. — mason
– mason, Commented Sep 24, 2014 at 18:37
@tymeJV No, you can cause a postback from client side code. It would be better design to use AJAX, but it's not necessary. — mason
– mason, Commented Sep 24, 2014 at 18:37
@mason -- True - should've mentioned postbacks...I just assume now-a-days no one wants a postback :D — tymeJV
– tymeJV, Commented Sep 24, 2014 at 18:38

balexandre · Accepted Answer · 2014-09-24 19:06:20Z

1

I have an ASP Server Button

so you have something like

<asp:Button ID="btnRefresh" Text="I'm a button" OnClick="btnRefresh_Click" />

In order to also execute a client call, prior to the server call, all you need is to attach a function or inline code to the OnClientClick property:

<asp:Button ID="btnRefresh" 
          Text="I'm a button" 
       OnClick="btnRefresh_Click"
 OnClientClick="btnRefreshClick" />

and in your javascript simple add that method

function btnRefreshClick() {

    // your stuff goes here...

    return true; // returning true (or nothing) will fire the server side click
                 // returning false will not fire it
}

Added: Misunderstood the question, so you want to fire a javascript event that will do the click on the button automatically...

I just tested this code:

<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <br/>
        <a href="#" class="a">fire button click event</a>
    </div>
    </form>

    <script>
        $(".a").click(function() {
            //var elm = $("#" + "<%= Button1.ClientID %>"); elm.click(); // with jQuery

            var elm = document.getElementById('<%=Button1.ClientID%>');
            elm.click();
        });
    </script>
</body>

and I get the button to fire correctly, with or without jQuery:

screencast of this being executed: http://screencast.com/t/m4ohA9uW

edited Sep 24, 2014 at 19:06

answered Sep 24, 2014 at 18:51

balexandre

75.4k47 gold badges240 silver badges352 bronze badges

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

9 Comments

mason Over a year ago

The question wasn't about how to invoke client side code before server side. It was about how to simulate clicking the button from client side in order to cause a postback. This could be done from a different method, example a timer that refreshes the date every 5 minutes.

Tim Over a year ago

There's a Javascript call in the .NET framework called WebForm_DoPostBackWithOptions - I've hooked into this to trigger events using jQuery. I used FireBug to look at the signature and match what I wanted to do in order to get it to work.

Mark Over a year ago

Thanks Balexandre but that code looks eerily similar to what I am already doing although I viewed the screencast and clearly can see that its working in your example. The only thing that I see which is different is that My code resides inside a UserControl; There is no Form present. Could that make a difference???

Mark Over a year ago

I will to attempt implement your code precisely as you have it within my UserControl and will update with the result afterward. Thanks

balexandre Over a year ago

in Webforms, you always need to have a <form> in each page and then your user controller lives inside that form... BTW, you want to access the click event from within your user controller, or from the final page itself where the user controller is placed?

|

Collectives™ on Stack Overflow

How do you programmatically Invoke a Server Click via JQuery or Javascript

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related