javascriptjqueryasp.netvb.netupdatepanel

JavaScript stops working after UpdatePanel is triggered


I’m having an issue with the UpdatePanel and JavaScript. The JavaScript code works perfectly at first, but it stops functioning after the UpdatePanel is triggered. This is the code :

<script>


    $(document).ready(function () {
        $('#<%=txtNum.ClientId%>').on('input', function () {
            __doPostBack('clean', '<%= updGen.UniqueID %>');  
        });
    });

</script>
<asp:UpdatePanel runat="server" ID="updGen">
        <ContentTemplate>
            <div class="col-md-3">
                <label runat="server" id="lblInserimento" class="control-label">Number</label>
                    <asp:Panel runat="server" ID="pnlNum" DefaultButton="lnkSearch" CssClass="input-group">
                         <asp:LinkButton title="Search" ID="lnkSearch" OnClick="lnkSearch_Click" CssClass="btn btn-default btn-sm input-group-addon" runat="server"><i class="fa fa-search"></i></asp:LinkButton>
                        <asp:TextBox Enabled="false" runat="server" ID="txtNum" CssClass="form-control" oninput="this.value = this.value.replace(/[^0-9]/g, '');"></asp:TextBox>
                        <span runat="server" id="spnCodice" class="input-group-btn">
                            <asp:LinkButton ID="btnNumBefor" CssClass="btn btn-flat btn-sm" runat="server" OnClick="btnNumBefor_Click"><i class="fa fa-angle-left"></i></asp:LinkButton>
                            <asp:LinkButton ID="btnbtnNumAfter" CssClass="btn btn-flat btn-sm" runat="server" OnClick="btnbtnNumAfter_Click"><i class="fa fa-angle-right"></i></asp:LinkButton>
                        </span>
                    </asp:Panel>
        </ContentTemplate>
</asp:UpdatePanel>

Solution

  • The issue/problem is the on-load code does not trigger when you use a update panel.

    However, there is a way to create a code stub that runs after a update panel (the partial page cycle). Hence this code should re-attached and re-run the jQuery code for you:

        <script>
    
    
            $(document).ready(function () {
                mywhatever();
            });
    
            function mywhatever() {
                $('#<%=txtNum.ClientId%>').on('input', function () {
                __doPostBack('clean', '<%= updGen.UniqueID %>');
                });
            }
    
    
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_endRequest(mywhatever);
    

    So, now both page "on ready", and then after the update panel both will run the same code.