jQuery and ASP.NET AJAX UpdatePanel

SheoNarayan
Posted by in ASP.NET AJAX category on for Intermediate level | Views : 97746 red flag
Rating: 5 out of 5  
 1 vote(s)

This article describes the solution of the problem in which jQuery doesn't work for elements placed under ASP.NET AJAX UpdatePanel when partial postback is done.
Introduction

jQuery being common and mostly used these days, usually we come across scenario in which we have to use jQuery for those HTML elements that are placed under the ASP.NET AJAX UpdatePanel. This works fine unless partial postback is done, but in case of postback, we loose the style or behavior of these html elements. This article describes different ways of solving this problem.

Solution - jQuery with UpdatePanel

To explain the solution of above problem, I have taken a simple example of placing GridView that has paging enabled and have placed it inside UpdatePanel and I am trying to click different pages of the GridView to do partial postback and get that page records.

My aspx page code looks like below:

form id="form1" runat="server">

<asp:ScriptManager ID="SM1" runat="server" EnablePartialRendering="true" />

<div>

<asp:UpdatePanel ID="UpdatePanel1" runat="Server">

<ContentTemplate>

<asp:GridView ID="GridView1" runat="Server" AllowPaging="true" OnPageIndexChanging="ChangePage"></asp:GridView>

</ContentTemplate>

</asp:UpdatePanel>

</div>

</form>

I am populating above GridView using following code.

string connStr = ConfigurationManager.AppSettings["ArtSQLConnStr"].ToString();

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BindGridViewArticels();

}

}

private void BindGridViewArticels()

{

DataTable dTable = new DataTable();

using (SqlConnection conn = new SqlConnection(connStr))

{

using (SqlDataAdapter dAd = new SqlDataAdapter("select AutoId, Title from myarticles", conn))

{

// now open the connection

conn.Open();

dAd.Fill(dTable);

conn.Close(); // close the connection

}

}

GridView1.DataSource = dTable;

GridView1.DataBind();

}

protected void ChangePage(object sender, GridViewPageEventArgs e)

{

GridView1.PageIndex = e.NewPageIndex;

BindGridViewArticels();

}

Get solutions of .NET problems with video explanations, .pdf and source code in .NET How to's.

In the above code snippet, I first I am populating GridView for the first time when page is loading by checking page IsPostBack property. In the subsequent click of the page links, I am calling ChangePage method that is attached with OnPageIndexChanging event of the GridView that is doing paging.

As displayed in the above picture, the alternate rows of the GridView has different color that I have not done through GridView alternate rows style but I have written following code in jQuery to do that.

Code snippet - 1

<script language="javascript">

$(document).ready(function()

{

//for table row

$("tr:even").css("background-color", "#F4F4F8");

});

</script>

Above code works great when the page is loaded for the first time but when I click any of the paging links (that partially postback the page to get that page data), as the GridView is kept inside UpdatePanel so partial postback happens and subsequent pages records doesn't display with alternate background color as jQuery style is not not applied for those records. To solve this problem, we can replace above code (Code snippet = 1) with below code (Code snippet - 2).

Code snippet - 2

<script language="javascript">

$(document).ready(function()

{

$("tr:even").css("background-color", "#F4F4F8");

});

 

function pageLoad(sender, args)

{

if(args.get_isPartialLoad())

{

$("tr:even").css("background-color", "#F4F4F8");

}

}

</script>

In the above code snippet you can see that I have added one more function called pageLoad that fires on every page load of the page either first or partial or full postback. As our specific problem is related with partial postback when paging links are clicked, so in pageLoad function, I am checking for isPartialLoad and writing the same code that we are using to change the background color of the alternate rows.

Following are some more ways to achieve the same thing.

Code snippet - 2 can be completely replaced by following code to achieve the same thing.

Code snippet - 3 - Alternative 1

<script language="javascript">

function pageLoad(sender, args)

{

$("tr:even").css("background-color", "#F4F4F8");

}

</script>

Here, we are applying alternate rows background color on every pageLoad so either this is first time, full or partial postback, alternate rows background color will be applied through this jQuery code.

Code Snippet - 4 - Alternative 2

Code snippet - 2 can also be completely replaced by following code to achieve the same thing.

<script language="javascript">

Sys.Application.add_load(FirejQuery);

function FirejQuery()

{

$("tr:even").css("background-color", "#F4F4F8");

}

</script>

Here, I am adding a function on every load of the page either first time or partial or full postback and in that function I am specifying alternate rows background color to achieve the same thing that we were doing in Code Snippet - 2.

Conclusion

In this article, we learnt 3 ways to preserve the style/behavior of jQuery for the HTML elements placed inside ASP.NET AJAX UpdatePanel. Hope you find this article interesting, please subscribe for the subsequent article alert directly in your email box.

Happy coding !

Page copy protected against web site content infringement by Copyscape

About the Author

SheoNarayan
Full Name: Sheo Narayan
Member Level: HonoraryPlatinum
Member Status: Administrator
Member Since: 7/8/2008 6:32:14 PM
Country: India
Regards, Sheo Narayan http://www.dotnetfunda.com
http://www.snarayan.com
Ex-Microsoft MVP, Author, Writer, Mentor & architecting applications since year 2001. Connect me on http://www.facebook.com/sheo.narayan | https://twitter.com/sheonarayan | http://www.linkedin.com/in/sheonarayan

Login to vote for this post.

Comments or Responses

Posted by: Shtirlitz56 on: 1/2/2011 | Points: 25
Very useful article! Thanks!
Posted by: SheoNarayan on: 1/2/2011 | Points: 25
Thanks Alexander!

Keep visiting the website for more.

Posted by: Sun2silicon on: 9/13/2011 | Points: 25
Thanks Sheo Narayan it very useful and helpful article. It's the exact solution for the problem that stuck me for three days. :)


Posted by: SheoNarayan on: 9/13/2011 | Points: 25
Happy to know that it helped and saved your time.

Thanks, do not forget to refer your friend about it.

Posted by: Arun_Gauda on: 6/11/2014 | Points: 25
Thank you Sheo Narayan great work.

Login to post response

Comment using Facebook(Author doesn't get notification)