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>
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.