ASP.Net Ajax 1.0 not rendering Flash control after callback

New years blessings to all.

This year started off with a bang and a couple of headaches to boot. I had to implement a very interesting Interactive Map previewer for a consumer web site and ran into something very funny (yes I found it kind of funny) and set about trying to figure it out myself (no help from Google that is).

The funny started off not as a problem. A normal ASPX page containing a reference to SWFObject and calling the script to populate a layer with the video I need to display. The page then turned out to require a bit of AJAX which, at the time of discussion seemed without error. Just wrap the table within an UpdatePanel and there you go, right? Turned out to be quite a fiasco. When ever I clicked on a button within the UpdatePanel it seemed to not call the JavaScript function again, obviously because the UpdatePanel causes a server-side refresh of it’s inner content.

Bit of a problem.

So with the trusty Firebug at my aid and a good day to figure this out I looked into a very interesting client side function for ASP.Net Ajax called _endRequest(sender, args);. Basically when an async callback completes its rendering of the page, it saw that my JavaScript had already been called (during page first load) and ignored the call. When fireing JScript on a page without ASP.Net Ajax, it runs the JScript again as it’s a full page load (and HTML load) on the clientside, when this occurs in ASP.Net Ajax it assumes the load has completed already and invalidates any script that you wish to run.

The _endRequest(sender, args); method allows you to fire off additional script once the async callback occured.

An example of how to make use of this method:

postback.js

var prm = Sys.WebForms.PageRequestManager.getInstance(); // we need to get the instance of the request causing the callback

prm.add_endRequest(EndRequest); // add the _endRequest method call to the Request instance. this gives Ajax an indication that an EndRequest event should be handled

function EndRequest(sender, args) {

// call the SWFObject and load the object where necessary
// all external js pages have already been included in the page load so no need to do so again
window[“InteractiveMap”] = new Object();
var soPromo = new SWFObject(“../Assets/Flash/object.swf”, “InteractiveMap”, “540”, “317”, “8”, “#FFFFFF”);
soPromo.addParam(“wmode”, “transparent”);
soPromo.write(“fc_interactive”);
}

In order for this to function along side ASP.Net Ajax, all you need to do is add a reference to this new file from within the ScriptManager:

<asp:ScriptManager ID=”sm” runat=”server”>
<Script>
<asp:ScriptReference VirtualPath=”~/Assets/Scripts/postback.js” />
</Script>
</asp:ScriptManager>

And that’s it.