jQuery and ASP.NET UpdatePanel

iStock_000005899630Medium I’ve been busy over the last couple of weeks working on an administrative application that uses a ton of AJAXy stuff.

The application is interactive in the sense that every time a field is updated in the administrative screen, another part of the screen updates to show the user what the final result will look like when it is published.

Where things get tricky is that the screens use a considerable amount of jQuery to do things like binding to events so that updates will occur when the events fire.

But the main content that is being updated for one of my screens is actually in an UpdatePanel.  This is a problem, because in order for that screen to render correctly I have to run some jQuery code.  But the jQuery “ready” event doesn’t fire when the UpdatePanel gets updated.

So how do we fix that?

Fortunately, a quick search of the big G solved the problem.  It turns out Imran Akram has already solved this problem.  You just need to call

Sys.WebForms.PageRequestManager.getInstance()
    .add_endRequest(EndRequestHandler);

somewhere in your code.  Where “EndRequestHandler” is a pointer to a regular javascript function that calls your jQuery code.

What I didn’t like about the way that Imran implemented this is that he wired it into the Page_Load() event.  While this works, I thought, “there must be a way to make this work more like jQuery.”  And there is.

You just need to make sure that your jQuery code runs after your MS-AJAX scripts.  So I put my call at the end of my “ready” event handler for the page and everything works just great!

 

Other post in jQuery

Related Post

One Response to “jQuery and ASP.NET UpdatePanel”

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail

Bear