jQuery Functions Not Working after PostBack in Asp.Net

A few days back I across this situation and it took me some time to figure this out. Here’s the 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.

Previous - How to implement Ajax Cascading DropDownList in Asp.Net WithOut Any Web ServiceNext - How to Use Regular Expression in Asp.Net to Validate TextBox for Maximum Length



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner
Tweet this article Facebook Google+

Related Posts:

Join our Google Plus Community and be a part of a discussion!