jQuery Functions Not Working after PostBack in Asp.Net

← PrevNext →

A few days back I across this situation and it took me some time to figure this out. Here’s a situation. I have a form (a web page) with few input elements on it. I also included ScriptManager and UpdatePanel controls on my form, since I am using Asp.Net controls. After I click the update button, it would successfully update my database tables. However, it would stop jQuery functions from functioning.

The clicking of the button (to save data), would call the postback event at the server (code behind). Now, here’s the solution.

The Script
$(document).ready(function () {
    BindControls();
});

function BindControls() {
    // Write your codes inside this function.
}
var req = Sys.WebForms.PageRequestManager.getInstance();
    req.add_endRequest(function () {
        BindControls();
});

jQuery now working after PostBack in Asp.Net - add_endRequest

The problem usually happens when you are using and <updatepanel> control in your web page. The <updatepanal> helps refresh parts of the page, without refreshing the entire page with a postback.

However, after the PostBack is complete, you will need to call the handler method that has the jQuery functions. In the above example, the handler method is BindControls. This method will contain all the functions using jQuery.

Ref: Sys.WebForms.PageRequestManager endRequest Event

That’s it. Thanks for reading.

← PreviousNext →