jQuery and Asynchronous Postback with UpdatePanel Issue

What

If you are using jQuery in your application then you may be familiar withdocument.ready() function of jQuery. This function executes after all the elements are loaded in the page. So it is a better way to bind the events for elements or to write some initialization Javascript which we want to be called on page load inside this function. But if you are using updatepanel in your application and doing asynchronous post back you will find that the events are not binded with the elements nor the initialization Javascript code is executed after each asynchronous postback.

Why

Sometimes it happens as the events we are binding or the initialization javascript codes we are writing in side the document.ready() function are not getting called for asynchronous postbacks . This is due to the reason that for asynchronous postback the page is partially loaded and not loaded completely. And it gives rise to some functionality inefficiency.

How To resolve this issue ::

In its recent version, jquery 1.3.2 offers one live() method which is opposite of die() functionality which bind the event after asynchronous postbacks. So if you want to bind events to the elements you can use live() method instead of bind() method as follows.

In another approach asp.net offers one method pageload() for javascript through which we can bind the events or execute any code on each page load. Also using this function we can track the partial postback state in javascript.

<script type="text/javascript">
function pageLoad(sender, args)
{
      $(document).ready(function()
    {
        $("#<%= btnLoad.ClientID %>").bind("mouseover", function()
       {
         $("#resultPageLoad").append("I wiil be binded in each page load");
    });


});


if (args.get_isPartialLoad()) // executes the code after asynchronous postbacks.
{
     alert("Partial Postback occur");
}
else // for postback
{
     alert("Full page post back."); 
}
}
</script>


 These are two ways from many through which we can resolve these issue. 
First case we can only be able to bind the events with elements for asynchronous postbacks but we can't write any custom javascript code which will be executed after asynchronous postbacks. But in the second case it will handle both issues.

<script type="text/javascript">

// with live function
$(document).ready(function()
{
        $("#<%= btnLive.ClientID %>").live("mouseover", function()
{
        $("#resultLive").append("I will always be functional");
});
        alert("live")
}); 
</script>

Here is the complete page which will help you evaluate these functionality.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jqueryTip.aspx.cs" Inherits="jqueryTip" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>


<script src="jquery-1.3.2.js" type="text/javascript"></script>

<script type="text/javascript">

        //with bind function
        $(document).ready(function(){
                $("#<%= btnNormal.ClientID %>").bind("mouseover",         function()
        {
                $("#result").append("I Will be there untill postback occurs");
                });
        alert("bind")
        }); 
</script>

<script type="text/javascript">

        // with live function
        $(document).ready(function()
{
$("#<%= btnLive.ClientID %>").live("mouseover", function()
{
$("#resultLive").append("I will always be functional");
});
alert("live")
}); 
</script>

<script type="text/javascript">
function pageLoad(sender, args)
{
        $(document).ready(function()
{
$("#<%= btnLoad.ClientID %>").bind("mouseover", function()
{
$("#resultPageLoad").append("I wiil be binded in each page load");
});


});


if (args.get_isPartialLoad())
{
        alert("Partial Postback occur");
}
else
{
        alert("Full page post back."); 
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="uppnl" runat="server">
<ContentTemplate>
        <table>
        <thead>
        <tr>
                <th>
                        jQuery bind()
                </th>
                <th>
                        jQuery live()
                </th>
                <th>
                        PageLoad(sender,args)
                </th>
        </tr>
        </thead>
<tbody>
        <tr valign="top">
                <td style="width: 150px">
                        <asp:Button ID="btnNormal" runat="server" Text="Hover Before postback" />
                </td>
                <td>
                        <asp:Button ID="btnLive" runat="server" Text="Hover Anytime" />
                </td>
                <td>
                        <asp:Button ID="btnLoad" runat="server" Text="I will always be there" />
                </td>
        </tr>
        </tbody>
</table>
        <asp:Button ID="btn" runat="server" Text="Postback" />
</ContentTemplate>
</asp:UpdatePanel>
<table>
<tr valign="top">
        <td style="width: 150px">
                <div id="result"></div>
        </td>
        <td>
                <div id="resultLive"></div>
        </td>
        <td>
                <div id="resultPageLoad"></div>
        </td>
</tr>
</table>
</div>
</form>
</body>
</html>

Aditya Acharya , ASP.Net Programmer, Mindfire Solutions.

Related Tags: Ajax, ASP.NET, JavaScript, jQuery

Author : Aditya Acharya

jQuery and Asynchronous Postback with UpdatePanel Issue

Leave a Reply

Subscribe With Us