asp:Button Click Event doesn't fire

Question

I am having a problem with this website I am currently developing. I am trying to fire a button's Click Event after a series of codes in an external js file. please see my codes below:

.ASPX:

<script type="text/javascript">
    var btn = $("#<%=btnRefresh.ClientID%>");
</script>

...

<asp:Button ID="btnRefresh" name="btnRefresh" runat="server" Visible="false" Text="btnRefresh" onclick="btnRefresh_Click" />

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <asp:GridView ID="myGrd" runat="server">...</GridView>
    <Triggers>
       <asp:AsyncPostBackTrigger ControlID="btnRefresh" EventName="Click" />
    </Triggers>
<asp:UpdatePanel>

.ASPX.CS:

protected void btnRefresh_Click(object sender, EventArgs e)
{
    myGrd.DataSource = null;
    myGrd.DataSource = GetData();
    myGrd.DataBind();
}

.JS:

function Refresh() {
    if (btn) {
        btn.click();
    }
    else {
        alert('false');
    }
}

Basically, what I want to achieve is this:

1. Be able to implement my Add, Edit, Delete on the Page. (Functioning now)
2. Call the methods in an external JS file to show the popup boxes for Add, Edit, Delete.
3. Once successful, call the Refresh() method and refresh the gridview only.
4. Refresh() method consumes the btnRefresh_Click event from the .aspx.cs page.

I just used the button for that purpose since I don't know what other options I have.

Now my problem is this. My code was able to declare my btn variable from the .aspx page. When it does inside the external .js file, here is how my btn variable looks like:

The compiler goes through the btn.click() line which is supposed to fire the btnRefresh_Click event from the code-behind. However, it doesn't fire up.

Am I missing anything here? Please help me. I've been stuck here for hours.

Answer 1

Have you tried finding your btn object when you need it and after the document is fully loaded, instead of getting it before your document is fully loaded?

changing:

<script type="text/javascript">
    var btn = $("#<%=btnRefresh.ClientID%>");
</script>

to

<script type="text/javascript">
    var btnid = "#<%=btnRefresh.ClientID%>";
</script>

and your js:

   function Refresh() {
     var btn  = $(btnid);
        if (btn) {
            btn.click();
        }
        else {
            alert('false');
        }
    }

Answer 2

You are setting the button Visible="false"

<asp:Button ID="btnRefresh" name="btnRefresh" runat="server" Visible="false"

Setting this will not render the button on the screen.. It will completely remove the element from the markup .So no events can be attached to it. Instead of this try setting s**tyle="display:none" .. Doing so will render the button on the screen but will not display it.. Also the events will be attached to the element..

UPDATED ::: Try accessing your btn in the Document.Ready function.. This makes sure you are adding the button once it is available in the DOM**

<script type="text/javascript">
   $(function() {
       var btn = $("#<%=btnRefresh.ClientID%>");
    });
</script>

If possible can you provide the whole markup and the required code.. Where are you calling the refresh function

Answer 3

I'd go for the simplest thing - and the issue is not making the button invisible, but having an invisible button, that one can click on from javascript, and having the button call it's event handler. I have the same hack as the OP: make the button permanently invisible by setting it's style=display:none;. In that way the button exists on the client page, my JS clicks it, and then the buttons eventhandler on the server gets called on postback. This didnt work properly in Firefox until I set UseSubmitBehavior=False . Now it works in IE and FF.

Answer 4

I suppose that what you are seeing at client side onclick is not the one you are declaring at server side OnClick.

onclick on client side is equal to OnClientClick at server side.

Update:

You can still call the server side click function using btn.click(); (same as you are using), but to achieve this you must intially set your control's Visible property to true. when you don't set it to true the control will even not render to the client and does no state will be maintained for it.

If you don't want to show button intially, instead of settting Visible = "False" you can write Style="visibility:hidden";

So, your aspx markup for button should look like this

<asp:Button ID="btnRefresh" name="btnRefresh" runat="server" Style="visibility:hidden" Text="btnRefresh" onclick="btnRefresh_Click" />

Answer 5

Change the AsynPostBackTrigger for PostBackTrigger this should work

 <asp:Button ID="btnRefresh" name="btnRefresh" runat="server" Visible="false"    Text="btnRefresh" onclick="btnRefresh_Click" />

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<asp:GridView ID="myGrd" runat="server">...</GridView>
<Triggers>
   <asp:PostBackTrigger ControlID="btnRefresh" EventName="Click" />
</Triggers>