ASP.net javascript fire on asp:ImageButton

Question

Hey all i am trying to figure out why i am getting this error when my page loads:

 Compiler Error Message: BC30456: 'showNotifier' is not a member of 'ASP.pro_aspx'.

showNotifier is a javascript call that i have to display a error message that drops down from the top of the browser screen using jQuery. I have the javascript code loading up in my master page so i know its there on any page.

Here is my imagebutton code:

 <asp:ImageButton ID="btnDelete" CommandName="Delete" CommandArgument='<%#Eval("id") %>' Text="Delete" runat="server" CssClass="delIcon" AlternateText="Delete" ToolTip="Delete" ImageUrl="~/del.png" />

Any help would be great!

Additional code

Protected Sub grdView_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles grdView.RowCommand
    Dim cid As String = e.CommandArgument.ToString
    Dim command As String = e.CommandName.ToString

    If cid.Length <= 0 Then Exit Sub

    Select Case command
        Case "Delete"
            Delete(cid)
    End Select
End Sub

Additional code 2

Private Sub grdView_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles grdView.RowDataBound
    If (e.Row.RowType = DataControlRowType.DataRow) Then
        Dim l As ImageButton = CType(e.Row.FindControl("btnDelete"), ImageButton)

        l.Attributes("OnClientClick") = "if(msgBoxShow('Are you sure you want to delete " & DataBinder.Eval(e.Row.DataItem, "Name") & "?','" & DataBinder.Eval(e.Row.DataItem, "Name") & "','')==false){return false;}"
    End If
End Sub

Javascript code is this:

<script type="text/javascript">
    function msgBoxShow(boxsaying, prodItemName, codeBehind) {
    apprise(boxsaying, {
        'verify': true,
        'textYes': 'Delete ' + prodItemName,
        'textNo': 'Cancel delete'
    },
                function (r) {
                    if (r) {
                        //alert('yes');
                        return true;
                    } else {
                        //alert('no');
                        return false;
                    }
                }
           );
}
</script>

Answer 1

OnClick in an <asp:ImageButton> is used to identify the function in the code-behind that will run when you click and the page is posted-back to the server (this is the same as for a normal <asp:Button> )

What you mean is OnClientClick which will run javascript on the client

---

Update due to comment from OP

In order to only return if your local javascript function returns false would be to do the following...

OnClientClick="if(myFn()==false){return false;}"

What this means is that when the function returns false it will cancel the clicking of the button, meaning the form will not be posted (this will also result in any client side validation not being run, should there be any).

If the function returns true then it will carry on through and do the post-back to your server.

In regards to calling the correct function on the server, I would create a function specifically for the image button, such as...

Protected Sub imgBtn_Click(ByVal sender As Object, ByVal e As EventArgs)
   ...
End Sub

Then you want to have OnClick="imgBtn_Click"

Answer 2

onClick attributes to elements (especially if being on hundreds of elements on a page) are actually an old way of doing things. Especially if you care about older browsers (and IE6-8), these create "script" blocks (each one individually) for each one of the elements that all basically call the same thing, and are the same type of element. These slow down the page tremendously in older browsers, I highly advise never using them.

It is much better to simply create an overall live event handler on all of these items like so:

$(document).on('click', '.delIcon', function () {
    showNotifier(3000,'#cf5050','Delete this?');
});

This will create one event waiting for all of these items (with the class of delIcon). I'm assuming it would solve your problem as well. ASP.NET is assuming that showNotifier is a back-end method.

Answer 3

In your ImageButton , OnClick is meant to reference an event handler in your code-behind, not client-side script. You should be using OnClientClick instead.