Making jQuery Play Nice With .NET Partial Post Backs

By
Paul
– April 26, 2011Posted in: Development

The Problem:
Those looking to take advantage of ’s Panel control, untilizing a Scriptmanager to create asyncronious post backs, while at the same time using ’s $(document).ready() function will encounter an issue.

During the initial page load any functionality that takes place inside the $(document).ready() completes successfully. However, because $(document).ready() doesn’t get called during a partial-page post back, the same events won’t take place during a partial page load. Essentially, this means that any elements with bound handlers inside a Update Panel will lose that functionality, and any functions that are called once the DOM is ready won’t be called once the Script Manager has it’s way with the post back event.

For binding elements, this isn’t difficult to account for. jQuery’s .live() method allows the intelligent ‘re-binding’ of elements with ease:


// Use
$(document).ready(function(){
     $("a#my-element").live('click', function(){
          alert("Sexy Beast Baby!"); // Will bind on initial page load and each subsequent DOM occurence
     });
});

// As Oppossed To
$(document).ready(function(){
     $(a#my-element).click(function(){
          alert("Sexy Beast Baby!"); // Will only bind on initial page load.
     });
});

This simple change will account for any element binding that needs to take place, but doesn’t provide a method for isolated funtions to be called inside of $(document).ready(). As of the time of posting, there is no jQuery method that accounts for this.

With jQuery powerless to handle the situation, I looked to the .NET framework for a solution. Luckily there’s a pretty slick resolution to this issue.

The Fix:

When partial rendering is enabled on the scriptmanager, it makes the instance of the Page Request available. Utilizing it’s .add_EndRequest method will solve our issue. The .add_EndRequest method does exactly what it sounds like it would do; whatever takes place inside this method occurs after the partial page post back takes place providing a perfect place to call any additional functionality needed at page load. For Example:

In the mark up:


<!--- The ScriptManager should enable Partial Rendering. It's False by default: --->
<asp:ScriptManager ID="MyScriptManager" runat="server" EnablePartialRendering="True"></asp:ScriptManager>

In the javascript:


// Gets the Partial Page Load Instance and executes my "load_async_doc_ready" when it's complete
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load_asyc_doc_ready);

// This function gets called once the partial page is done rendering
function load_async_doc_ready(sender, args) {
     // If this fails, everything stops. Should only fail in the event of a serious error.
    if (args.get_error() == undefined) {
          // A 'second' instance of jQuery's document ready
          $(document).ready(function() {
               // Do what ever you need to here.
               set_init_values();
               // etc...
          });
     }
}

And to think… I initially thought .NET and jQuery wouldn’t get along with each other.

Tags: , , ,