I’ve been a bit skeptic about the thought of combining ASP.NET Ajax with jQuery, partly because I didn’t really know what the impact was going to be. But jQuery is very fast, very appreciated throughout general opinion, there are extremely many plugins available for free, writing your own plugins only requires little JavaScript knowledge (opposed to writing your own extender in .NET, like controls in the AjaxControlToolkit).

To be sincere, there is a very short learning curve so there is no reason for not trying jQuery. I’ve tried with regular web applications, but when I coupled jQuery with ASP.NET Ajax on little niggle stood out.

Many call it the ASP.NET jQuery postback problem, but using the technique below should make it no problem anymore. $(document).ready() isn’t called after an asynchronous postback. What this means? You lose the functionality that should be executed within $(document).ready() after an UpdatePanel rendered its contents after an asynchronous postback.

But it’s not difficult to solve this issue! Microsoft AJAX Library contains an event called: EndRequest which can be handled with JavaScript code. What actually happens in this situation is that a piece of JavaScript codes is executed whenever an asynchronous postback has ended. If we execute our logic from $(document).ready() inside the EndRequest handler we are good to go :).

As a short example I came up with the following:
- there is a TextBox on a page, and a Button (both inside an UpdatePanel)
- whenever the user pushes the Button, I fill out the textbox with the current server time
- there is a script tag on the page containing some JavaScript code to display an alert whenever the $(document).ready() has been executed.

The server side controls needed for this example are:

    <asp:ScriptManager ID="sm" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/Javascript/jquery-1.3.2.js" />
        </Scripts>
    </asp:ScriptManager>
    <asp:UpdatePanel ID="uppnl" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="txtTime" runat="server"></asp:TextBox>
            <asp:Button ID="btnTime" runat="server" Text="Get current time" OnClick="btnTime_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>

In codebehind you only need the click event handler for the Button:

    protected void btnTime_Click(object sender, EventArgs e)
    {
        txtTime.Text = DateTime.Now.ToLongTimeString();
    }

Including the following JavaScript code in your page reveals the actual problem:

<script type="text/javascript">
    function alertTest() {
        $(document).ready(function() {
            alert('$(document).ready() has been called');
        });
    }

    alertTest();
</script>

The alert is shown only when you load the page, this of course would also happen after a full postback. Everything inside the $(document).ready() function will be called as soon as the DOM is ready to be manipulated. The actual problem is that we are still interested to execute the code inside $(document).ready() after an asynchronous postback using the standard ASP.NET UpdatePanel control.

The solution comes in the form of some additional JavaScript code:

<script type="text/javascript">
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    function EndRequestHandler(sender, args) {
        if (args.get_error() == undefined) {
            alertTest();
        }
    }

    function alertTest() {
        $(document).ready(function() {
            alert('$(document).ready() has been called');
        });
    }

    alertTest();    
</script>

This way, on each postback, on each asynchronous postback the JavaScript code will still be called. Why this is needed? Because in many cases you’ll need to bind jQuery plugins to controls that are being updated inside UpdatePanels.

Now you can still enjoy ASP.NET Ajax with the simplicity of the UpdatePanel, and you can still enjoy jQuery with all it’s speed and performance and plugins and all.

If anybody needs help with this issue I’ll gladly help!