Call ButtonClick() Event

Question

My event is never being fired, and I can not figure out owhy. Here is my syntax

<asp:Button id="btnone" runat="server" visible="false" OnClick="btnone_Click" />
<script type="text/javascript">
  $( document ).ready(function() {
    var button = document.getElementById('btnone').click();
    }
});

And for my C# code behind

protected void btnone_Click(object sender, EventArgs e)
{
    Response.Write("It was clicked through JS");
}

EDIT I have also tried to use this code to capture the ClientID of the button but it's not working

$( document ).ready(function () {
  $('<%= btnone.ClientID %>').click();
  }
});

Is your event being fired when you manually click the button? — diiN__________, Feb 11 '16 at 13:06
Doesn't ASP change ID client side...? I'm not ASP developer but i'm quite sure of it. And anyway, quite easy to check what rendered HTML you have client side ***EDIT:*** see http://stackoverflow.com/questions/497802/how-to-stop-asp-net-from-changing-ids-in-order-to-use-jquery — A. Wolff, Feb 11 '16 at 13:09
@diiN_ - yes if i physically click the button the event is fired. — RedFly PinkSuit, Feb 11 '16 at 13:10
@A.Wolff - I am not sure, but that would explain why the event is never being triggered. — RedFly PinkSuit, Feb 11 '16 at 13:11

S. Nadezhnyy · Answer 1 · 2016-02-11T14:13:45.827

0

First of all you should set ClientIDMode="Static". Otherwise there will be no element with ID 'btnone'. Also, if you set visible="false" - it does not apply style "display:none;". Instead button won't be on the page. You can use this code:

.aspx :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $( document ).ready(function() {
            var button = document.getElementById('btnone').click();
        });

</script>
    <style>
        #btnone
        {
            display:none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Button id="btnone" runat="server" ClientIDMode="Static" OnClick="btnone_Click" Text="btn"/>
    </div>
    </form>
</body>
</html>

.cs :

namespace WebApplication2
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void btnone_Click(object sender, EventArgs e)
        {
            Response.Write("It was clicked through JS");
        }
    }
}

edited Feb 11 '16 at 14:13

answered Feb 11 '16 at 13:28

S. Nadezhnyy

582
2
6

This does not call my C# code behind. If I manually press the button it works, but trying to do it with this JS it does not. – RedFly PinkSuit Feb 11 '16 at 13:39
well, I have ran this code and it worked... Do you have link to JQuery ? – S. Nadezhnyy Feb 11 '16 at 13:47
I have a in my page. Is that sufficient? – RedFly PinkSuit Feb 11 '16 at 14:06
No, this link is OK. I updated my comment with full code. – S. Nadezhnyy Feb 11 '16 at 14:14
Copy/paste of your syntax gives me an error of 'Content controls have to be top-level controls in a content page or a nested master page that references a master page' – RedFly PinkSuit Feb 11 '16 at 15:53
Try to make new page and test code there - it seems that you try to replace code in some content page. – S. Nadezhnyy Feb 11 '16 at 15:58

RPichioli · Accepted Answer · 2016-02-11T13:49:49.287

First of all, you need to put the property ClientIDMode="Static" in your button, this grants the ID will be the same in runtime, it's what you need to get in Javascript.

In jQuery you need to do something like this:

$( document ).ready(function() {
  // Getting the event in a callback
  $('#btnone').click(function(){
    // Work here..  
  });
  
  // Trigger the event
  $('#btnone').click();
});

If you want to work in pure JS try something like this:

$( document ).ready(function() {
  // Here is the callback when the event is triggered
  function getTheClick(){
    // Work here..
  }
  
  // Assigning the event and it's callback
  document.getElementById("btnone").addEventListener("click", getTheClick);
});

In this case you need to assign a function to an event using the AddEventListener function.

That will trigger that anyway, that was just a complement and suggestion for client-side solutions. — RPichioli, Feb 11 '16 at 13:55

Call ButtonClick() Event

2 Answers2