$find().click not working

Question

I've got multiple cancel controls for my modalpopup, but only btnCancel is working, the $find().click isn't working, I'm receiving "Error: Unable to get value of the property 'click': object is null or undefined" Any help would be greatly appreciated.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="WebForm1.aspx.cs" Inherits="web.WebForm1" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ScriptManager runat="server" ID="scriptManager" EnablePageMethods="true">
    </asp:ScriptManager>
    <asp:Button ID="btnShowPopupAmend" runat="server" />
    <asp:ModalPopupExtender ID="mpeAmend" runat="server" TargetControlID="btnShowPopupAmend"
        PopupControlID="pnlpopupAmend" CancelControlID="btnCancel" BackgroundCssClass="modalBackground" />
    <asp:Panel ID="pnlpopupAmend" runat="server" Width="700px" Style="display: none;"
        class="ModalPanel">
        <img src="images/close.png" style="cursor: hand" onclick="$find('btnCancel').click()"
            width="15" height="15" />
        <asp:Button ID="btnCancel" Text="Cancel" runat="server" OnClick="btnCancel_Click" />
    </asp:Panel>
</asp:Content>

Answer 1

I'd take the logic out of the elements...

put an id on your image, like 'closeImg'

then your js can be like this:

$('#closeImg').click( function() {
    $('#btnCancel').click();
});
$('#btnCancel').click( function() {
    //whatever you want to have happen
});

an example: http://jsfiddle.net/vgDPd/

make sure to put this in a $(document).ready() so the dom is loaded for it

Answer 2

The $find syntax is not correct. Also, to select an id we need to use a '#' before the element's id. You can try the following:

$('#btnCancel').click()

or

$("body").find('#btnCancel').click()

Also as @smerny mentioned. Try and take out the logic away from templates and wrap the call within a ready function.

The ready function can be written as

<script>
$(document).ready(function(){
  $('#btnCancel').click();
});
</script>

Answer 3

Ok, I got this to work by using the following...

I set the behaviorID of the modalpopupextender then called $find().hide() in the onclick event of the image.

 <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
        CodeBehind="WebForm1.aspx.cs" Inherits="web.WebForm1" %>

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
        <asp:ScriptManager runat="server" ID="scriptManager" EnablePageMethods="true">
        </asp:ScriptManager>
        <asp:Button ID="btnShowPopupAmend" runat="server" />
        <asp:ModalPopupExtender ID="mpeAmend" BehaviorID="mpeAmend" runat="server" TargetControlID="btnShowPopupAmend"
            PopupControlID="pnlpopupAmend" CancelControlID="btnCancel" BackgroundCssClass="modalBackground" />
        <asp:Panel ID="pnlpopupAmend" runat="server" Width="700px" Style="display: none;"
            class="ModalPanel">
            <img src="images/close.png" id="imgClose" alt="" style="cursor: hand" onclick="$find('mpeAmend').hide()"
                width="15" height="15" />
            <asp:Button ID="btnCancel" Text="Cancel" runat="server" OnClick="btnCancel_Click" />
        </asp:Panel>
    </asp:Content>