Okay, this scenario might not be all that common, but in case someone else out there needs some tips on getting this to work, I hope this helps. I spent quite a bit of frustration on this one.
I have an ASP.NET web application that uses Microsoft AJAX UpdatePanels and embedded User Controls. In this particular case, I wanted to try out jQuery in one of my User Controls. The User Control uses an UpdatePanel, and the User Control itself is dynamically loaded in an UpdatePanel on the parent page. Here are the things I ended up doing in order to get jQuery and UpdatePanel to play together.
Registering jQuery Scripts
Since I'm not planning to use jQuery everywhere in the Web application, I need a way to register the scripts I need from the User Control. In my search, I came across a Rick Strahl post Implementing a jQuery-Calendar ASP.NET Control that was exactly what I needed. This post led me to his earlier UpdatePanels and ClientScript in custom Controls for the necessary ClientScriptProxy code, which is a great utility class for registering any client scripts, not just jQuery. However, I started getting a Sys.ScriptLoadFailedException, which led me to Sys.ScriptLoadFailedException when adding ScriptReferences. To work around this, I added the following to the end of my jquery.js script file (and other script files I was registering).
if( Sys && Sys.Application ){ Sys.Application.notifyScriptLoaded(); }
Client Script for the User Control
My User Control is dynamicaly loaded, so simply putting a script block in the .ascx template doesn't work in this scenario. Also, the standard jQuery $(document).ready doesn't work. I believe it's because of the way the DOM is manipulated by the UpdatePanel. So, borrowing a couple of ideas from Giving Precendence to a Specific Asynchronous Postback and jQuery Event Binding vs. ASP.NET AJAX UpdatePanel, I created another script file named init.js that contains the following code:
function ApplicationLoadHandler(sender, args) {
// InitScript is a custom function
// registered from the User Control
if(typeof InitScript == 'function')
InitScript();
}
if( Sys && Sys.Application ){
Sys.Application.add_load(ApplicationLoadHandler);
Sys.Application.notifyScriptLoaded();
}
In my User Control's code-behind, I need to override the OnPreRender to register my script files and custom script block.
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
// *** MS AJAX aware script management
ClientScriptProxy p = ClientScriptProxy.Current;
// *** Register resources
this.RegisterResources(p);
}
private void RegisterResources(ClientScriptProxy p)
{
p.RegisterClientScriptInclude(this.Page, this.GetType(), "_jqueryjs", this.ResolveUrl("~/client_scripts/jquery.js"));
p.RegisterClientScriptInclude(this.Page, this.GetType(), "_initjs", this.ResolveUrl("~/client_scripts/init.js"));
StringBuilder sb = new StringBuilder();
sb.AppendLine(@"
function InitScript() {
// control-specific code goes here
}
");
p.RegisterClientScriptBlock(this.Page, this.GetType(), "_init_" + this.ID, sb.ToString(), true);
}
Now all I have to do is customize the InitScript() in my code-behind to do useful things with jQuery.
Hope this helps!