[Solved] jQuery Button Click event not working after UpdatePanel PostBack in ASP.Net

Last Reply 3 months ago By arunkurmi

Posted 3 months ago

Hi i have an update panel in my code. there are 2 buttons.

1) it will enable textbox and a button which is working.

2) in this button i have a javascript code which is not triggering. Please Help .Code attached.

<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true" >
    <ContentTemplate>
<asp:LinkButton ID="AddPa" runat="server" CssClass="btn btn-info" OnClick="AddPa_Click" Width="320px">Personal Annotation</asp:LinkButton>
 <br />
         <asp:TextBox ID="txtPa" runat="server" TextMode="MultiLine" Width="280px" ></asp:TextBox>
        <br />
       <%--  <asp:Button ID="btnper"  runat="server" Text="Button"/>--%>
          <asp:LinkButton ID="btnper" class="btnper" runat="server">LinkButton</asp:LinkButton>
            <%-- <input id="btnper" class="Addpa" runat="server" type="button" value="Add State" />--%>
       </ContentTemplate>
    <Triggers>
     <asp:AsyncPostBackTrigger ControlID="btnper" /> 
    </Triggers>
</asp:UpdatePanel>

The above code is update panel.In this btn ID "Addpa" is working. But btnid "btnper" should trigger javascript event but its not going to it.Javascript is attached below

            $("#btnper").click(function () {
                //var frame = document.getElementById("frmDisplay").contentDocument;
                ////var Panno = prompt("Add Personnel Annotation", "");
                ////var patext = Panno;
                //var iframe = document.getElementById("frmDisplay");
                //var linkdyntext = getIframeSelectionText(iframe);
                var frame = document.getElementById("frmDisplay").contentDocument;
                var iframe = document.getElementById("frmDisplay");
                var abc = getIframeSelectionText(iframe);
                var linkdyntext = document.getElementById("iframe").value;
                if (linkdyntext.value == null) {
                    var frame = document.getElementById("frmDisplay").contentDocument;
                    var iframe = document.getElementById("frmDisplay");
                    var linkdyntext = getIframeSelectionText(iframe);
                }
                var linkdyntextslice = linkdyntext.slice(0, 15);
                var patext = document.getElementById("txtPa").value;
                var inodeid = document.getElementById("HiddenField1").value;
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "DataCollection.aspx/Pannotation",
                    data: "{'Stext':'" + linkdyntext + "','Patext':'" + patext + "','Slicetext':'" + linkdyntextslice + "','IdP' : '" + inodeid + "'}",
                    dataType: "json",
                    success: function (data) {
                        //$("#abdBK_popup").dialog("close");
                        $("#myMenu").hide();
                        $(linkdyntext).css('background-color', 'yellow')
                        alert("Personnal annotation Added Successfully");

                        //linkdyntext.fontcolor('background-color', 'yellow')
                        location.reload();
                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            });

 

 

Posted 3 months ago Modified on 3 months ago

Hi suhaas121,

Check this sample. now take its reference and correct your code.

Refer below article.

jQuery Click event handler not working after UpdatePanel PostBack in ASP.Net

HTML

<div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('body').on('click', '#btnper', function () {
                alert("LinkButton clicked.");
            });
        });
    </script>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
        <ContentTemplate>
            <asp:LinkButton ID="AddPa" runat="server" CssClass="btn btn-info" Width="320px">Personal Annotation</asp:LinkButton><br />
            <asp:TextBox ID="txtPa" runat="server" TextMode="MultiLine" Width="280px"></asp:TextBox><br />
            <asp:LinkButton ID="btnper" class="btnper" runat="server">LinkButton</asp:LinkButton>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnper" />
        </Triggers>
    </asp:UpdatePanel>
</div>