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, Sep 24 '14 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, Sep 24 '14 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, Sep 24 '14 at 18:37
@mason -- True - should've mentioned postbacks...I just assume now-a-days no one wants a postback :D — tymeJV, Sep 24 '14 at 18:38
possible duplicate of [How to fire a button click event from JavaScript in ASP.NET](http://stackoverflow.com/questions/7646162/how-to-fire-a-button-click-event-from-javascript-in-asp-net) — emerson.marini, Sep 24 '14 at 18:40
hmm... So it appears that I can invoke a PostBack using Client side Code??? and incidentally, I checked the potential duplicate but I don't believe it provided an answer to this question. Could be wrong but I also tried the suggestions posted there although I didn't mention it in my post — Mark, Sep 24 '14 at 18:48
@Mark, if you want to ping me, make sure you use the @ syntax, otherwise I won't be notified. You're luckily I manually checked on the question. Please update your question to show the button declaration, as well as any other client side event handlers associated with the button. And yes, it's possible to invoke a postback from client side code. — mason, Sep 24 '14 at 18:55

balexandre · Accepted Answer · 2014-09-24T19:06:20.077

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 '14 at 19:06

answered Sep 24 '14 at 18:51

balexandre

73,608
45
233
342

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. – mason Sep 24 '14 at 18:53
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. – Tim Sep 24 '14 at 18:58
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 Sep 24 '14 at 19:17
I will to attempt implement your code precisely as you have it within my UserControl and will update with the result afterward. Thanks – Mark Sep 24 '14 at 19:31
in Webforms, you always need to have a `
` 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?
– balexandre Sep 24 '14 at 19:33
From within my User Controller – Mark Sep 24 '14 at 19:52
@Mark I have the same output: http://screencast.com/t/1pK7eAHZ - strangly enought, does not work inside the Page Inspector, but works in all browsers... – balexandre Sep 24 '14 at 20:15
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/61890/discussion-between-mark-and-balexandre). – Mark Sep 25 '14 at 11:07
@balexandre, I am going to accept your answer. It did not resolve my issue but it did assist me to troubleshoot the problem. There are so many other components to this app that I believe something is interfering with the dynamic click solution. I will continue research with this in mind. Thanks. – Mark Sep 25 '14 at 15:54

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

1 Answers1