JQquery click event not working for html input(checkbox) inside asp panels

Question

Inside an aspx file I have asp:panels under an UpdatePanel

ASPX:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
 <ContentTemplate>
  <asp:Panel ID="PnlTraveler" runat="server" Visible="false">
    <input id="chkBoxVisAst" type="checkbox" class="checkbox" enableviewstate="true" />
  </asp:Panel>
 <ContentTemplate>
</asp"UpdatePanel>

If I write my Jquery codes in the same page under the asp:Content head to work with the click event it doesn't recognize the event id in my case chkBoxVisAst => this id.

JQuery

asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">


<script type="text/javascript">

    $(document).on('ready', function () {
        $('#chkBoxVisAst').on('click', function ()
        {
            if ($(this).attr("checked") == "checked")
            {
                alert("checked");
            } else {
                alert("unchecked");
            }
        });
    });
</script>

It works if I put my input(checkbox) outside my panel. How am I going to access my event id from inside the asp:panels?

Akash Amin · Accepted Answer · 2016-06-03 16:50:13Z

2

The problem is in your code. You cannot add any element directly inside update panel. You have to put them in ContentTemplate.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Panel ID="PnlTraveler" runat="server" Visible="false">
                    <input id="chkBoxVisAst" type="checkbox" class="checkbox" enableviewstate="true" />
                </asp:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>

After adding the code above you will be able to access the checkbox element with its ID.

EDIT

Add the code below,

var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () {
        $('#chkBoxVisAst').on('click', function () {
            if ($(this).attr("checked") == "checked") {
                alert("checked");
            } else {
                alert("unchecked");
            }
        });
    });

https://msdn.microsoft.com/en-us/library/bb311028(v=vs.100).aspx

edited Jun 3, 2016 at 16:50

answered Jun 3, 2016 at 16:25

Akash Amin

2,7611 gold badge21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jabed Over a year ago

Pardon me for I forgot to put it down. In my code contentTemplate was already there. If I make the basic panel visible then it gets the id but after validation of input that panel (PnlTraveler) is supposed to be visible. I just cant get the id after the validation . (After the Panel Updates)

Akash Amin Over a year ago

Update my ans above@JabedHossain

Jabed Over a year ago

Thanks a lot brother ... It helped a lot to understand the operation

Collectives™ on Stack Overflow

JQquery click event not working for html input(checkbox) inside asp panels

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related