Home / ASP.NET Wiki / ASP.NET Life Cycle Overview / Using Sys.Application.add_load for rebinding events to Controls

Using Sys.Application.add_load for rebinding events to Controls

 Rate It (5)

jQuery helps a lot in order to bind events to the control across the browser. But when using the Asp.Net Ajax UpdatePanel, there are some issues doing that.

Here is a sample code of document.ready function in jQuery which helps to bind he events to the controls

 $(document).ready(function() {
   // put all your jQuery goodness in here.
 });

 Consider using a updatepanel in your webform, and you have a button in that.
Suppose you have a div element in your webform, and you want to keep it hiding until is asked to show.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
              <div id='rightSide'>Some content.......</div>
              <asp:Button ID="Button1" runat="server" Text="Button" />
        </ContentTemplate>

 </asp:UpdatePanel>

You can use the following code for above use:  $(document).ready(function() {

   $('div#rightSide').hide();

 });

This code will hide the div until a partial postback is happened from the updatepanel. This is because, the content inside the update panel will get refreshed in each partial rendering. And at that time the document.ready function will not be executed.

So how we maintain the context...

You can add the following code within the updatepanel
Sys.Application.add_load(<function>);

That is :
redesign your document.ready function to the following one:
 function BindEvents(){
   $(document).ready(function() {
      $('div#rightSide').hide();\
    });

}

and then add this function in the load of the application, that is: <asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <ContentTemplate>
        <script>Sys.Application.add_load(BindEvents);</script>
        <div id='rightSide'>Some content.......</div>
            <asp:Button ID="Button1" runat="server" Text="Button" />
     </ContentTemplate>
</asp:UpdatePanel>


This is make the document.ready fire each time when the partial rendering within the updatepanel happens. And thus solves the problem.

Revision number 1, Friday, May 06, 2011 6:31:01 AM by suresh.mekkattil

Comments

Related Articles

FileUpload

Asp.Net 2.0 introduced a new control called FileUpload that is used to upload files from the client browser to the server. Video Simple File Uploads in ASP.NET Multiple File Uploads in ASP.NET Multiple File Uploads in ASP.NET (Elaborated) File Uploads with

Repeater

The Repeater control is the most lightweight Data Presentation control available in the ASP.NET framework and has been around since version 1.0.This control is used to display a repeated lists of items that are bound to the control.External Links:- ASP.NET

Performance

The blogosphereis a wealth of real-world tips and tricks for improving your ASP.NET application's performance. Checklist: ASP.NET Performance The 2004 Patterns and Practices Book "Improving .NET Application Performance and Scalability" has a

ASP.NET Optimization

Here's even more performance tips for making ASP.NET fly. Checklist: ASP.NET Performance The 2004 Patterns and Practices Book "Improving .NET Application Performance and Scalability" has a number of really great chapters worth calling out: Chapter 6: Improving

Shortcuts

Table of Contents

Top Wiki Contributors

(last 30 days)

  1. abiruban (1)