Skip to main content

JQuery, JavaScript & Update Panel... Calling JavaScript Function on Postback of Update Panel

An UpdatePanel completely replaces the contents of the update panel on an update. This means that those events you subscribed to are no longer subscribed because there are new elements in that update panel.

What I've done to work around this is re-subscribe to the events I need after every update. I use$(document).ready() for the initial load, then use Microsoft's PageRequestManager (available if you have an update panel on your page) to re-subscribe every update.
======================================================================

$(document).ready(function() {
    // bind your jQuery events here initially
});

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

=======================================================================

The PageRequestManager is a javascript object which is automatically available if an update panel is on the page. You shouldn't need to do anything other than the code above in order to use it as long as the UpdatePanel is on the page.
If you need more detailed control, this event passes arguments similar to how .NET events are passed arguments (sender, eventArgs) so you can see what raised the event and only re-bind if needed.
For Example:
=======================================================================
<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<script src="../Scripts/ScrollableGridPlugin.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">    
    $(document).ready(function() 
    {
        $('#<%=dgService.ClientID %>').Scrollable(); // bind your jQuery events here initially
    });
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function() {
    // re-bind your jQuery events here
        $('#<%=dgService.ClientID %>').Scrollable();  // re-bind your jQuery events here
    });
    </script>
=======================================================================
In this example i have attached the one J query & JavaScript files.
and bind the functions to the controls........

I hope this article will help you.......

Comments

Popular posts from this blog

Asp.Net Web API

What is ASP.NET Web API? ASP.NET Web API is a framework provided by the Microsoft with which we can easily build HTTP services that can reach a broad of clients, including browsers, mobile, IoT devices, etc. ASP.NET Web API provides an ideal platform for building RESTful applications on the .NET Framework.   Difference between ASP.NET Web API and WCF Web AP I is a Framework to build HTTP Services that can reach a board of clients, including browsers, mobile, IoT Devices, etc. and provided an ideal platform for building RESTful applications. It is limited to HTTP based services. ASP.NET framework ships out with the .NET framework and is Open Source. WCF i.e. Windows Communication Foundation is a framework used for building Service Oriented applications (SOA) and supports multiple transport protocol like HTTP, TCP, MSMQ, etc. It supports multiple protocols like HTTP, TCP, Named Pipes, MSMQ, etc. WCF ships out with the .NET Framework. Both Web API and WCF can be self-hosted or can be...

Creating package in Oracle Database using Toad For Oracle

What are Packages in Oracle Database A package is  a group   of procedures, functions,  variables   and  SQL statements   created as a single unit. It is used to store together related objects. A package has two parts, Package  Specification  and Package Body.