jQuery and UpdatePanels (Asp.Net)

Well, I love using JQuery.

I think this open-source js library is simply the best when you want to create a richer user experience in your websites and applications.

Some will argue Mootools is better but hey, this is a long and exhausting battle, almost like the one between PHP and ASP.net

This post comes to explain the difficulties when using jQuery dom event like “click” and “change” with an update panel.

Just one thing before I start, this post assumes you know jQuery, it also assumes you know your way around .net and you also know what an UpdatePanel is.

So, let’s begin

This is what our application looks like:

What do we have here?

We have an UpdatePanel containing a grid with data from the server and a client-side button.

This client-side button has an event attached to it with jQuery like so:

Now, let’s explain what’s happening.

When the UpdatePanel fires an update event, all of the content inside it will be replace, but, with replacing this content all of the DOM data attached to it will also be disposed.

So, when we try to click the button after an UpdatePanel update the event will not be fired. To avoid this, jQuery offers a “live” event So, we will use the code like this

This will solve the problem for you.

Questions, comments?

Feel free