Jquery , Ajax Update Panel Problem and Solution

In this article i will share my experience of using the Jquery with the Ajax UpdatePanel and the problem i have faced when using the both at the same time. I will try to explain the problem and then i will give you the solution of the problem in simple manner so that you understand it clearly.

The Problem

In the example which i will use contain one dropDownList , a label to show the selected value of the dropDownList and a button which bind the jquery click event. All the three controls are inside the Ajax UpdatePanel. This is the simple example to show you what is the problem when using Jquery and Ajax UpdatePanel at the same time. So when i run the web application and page is loaded in my browser first thing i do is to click on the button, and it display the message 'From ready Function' is displayed, but when the selectedIndex changed event of the dropDownList is fired and the page is partial postback, and now if i click the button again no message is displayed. Due to the partial postback, UpdatePanel completely replaces the contents of the UpdatePanel on an update. This means that those events you subscribed to are no longer subscribed because there are new elements in that update panel.

$().ready(function()
{
BindEvents('From ready Function');
});


function BindEvents(strPassedValue)
{
$('#cmdClickMe').click(function()
{
alert(strPassedValue);
});
}

So the jquery click event which was bind when page was first requested is not any more attached with the button. So we need to bind the click event again with the button.

Solution

The solution to the above problem is very simple one what you have to do is to place the below function just after the ContentTemplate tag inside the UpdatePanel. Here what i did is the call the BindEvents function which is also called when the ready() function of the jquery is executed. So when the partial postback end we capture the endRequest event and then call the function which will bind the event again. now if you repeat the cycle which i have mention in the problem section then you can see

1. when page is loaded first time if we click the button then it will display message 'From ready Function'.
2. Now if you click the dropDownList then it will display the selected value from the dropDownList in the label and the partial postback occurred.
3. Now if you click the button again then you can see the message 'From add_endRequest called!' which mean the event is bind from the add_endRequstion function.
   

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function()
{
BindEvents('From add_endRequest called!');
});

This is the simple application to let you know what is the problem and how can you solve that problem. Hope this will solve your problem.

You can download source code from by Clicking here