This one caused me a few headaches tonight, so I figured I could throw something on the blog in the hopes that Google would lead someone to what turned out to be a less than logical solution, but a solution. ;)
First, the setup: Basically, I have a page that was written by someone else and that person had an affinity for the Microsoft ASP AJAX Control Toolkit (I have no idea why). Well me, I have an affinity for jQuery. So I set about building new functionality on the existing page in jQuery, while trying to keep the functionality that was already there untouched and in tact. That turned out to be more difficult than expected.
I’m sure there are tons of issues to work through on this and I may update this article as those arise. But first up I had to figure out why the standard jQuery $(document).ready() functionality wasn’t working when there was, most obviously, a PostBack occurring. And, as it turns out, there’s a sort of fake PostBack that occurs when using the AJAX.NET toolkit. Lame. But here’s how to handle it (full code description follows):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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>Untitled Page</title> <script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { EndRequestHandler(); }); function load() { Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); } function EndRequestHandler() { // do page load things } </script> </head> <body onload="load()"> <form id="form1" runat="server"> <div> </div> </form> </body> </html> |
The Breakdown
First, you need to create a client side (JavaScript) function to execute whenever a page is “loaded” (I put it in quotes because the load event sometimes fires and sometimes doesn’t when using AJAX.NET). You need the two layers of abstraction here so the function can be called in the multiple scenarios that are created by a real page load and an AJAX.NET partial page load:
1 2 3 | function EndRequestHandler() { // do page load things } |
Now, once you have created that function you need to call it from both the jQuery and ASP.NET client side load events.
First up, the standard jQuery call will work pretty much as expected:
1 2 3 | $(document).ready(function() { EndRequestHandler(); }); |
The ASP.NET version requires that you make another function and attach the first function to the client event… Yeah, I know, it’s wonky.
1 2 3 | function load() { Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); } |
Once you’ve done all the jumping through flaming hoops, you can just attach the function to the body tag’s onload event and everything will be wired up and ready to go.
1 | <body onload="load()"> |
Enjoy!