Question

I have a UserControl that I want to include in a page multiple times programatically based on some business rules. Currently the control has a JavaScript function that must be called on the ASP.NET AJAX pageLoad event.

I’m using a pattern where the Master page has a pageLoad function that calls a contentPageLoad function on any ContentTemplate, if the function exists. The ContentTemplate that holds the UserControl in question would then be responsible for calling the appropriate function on the UserControl during this event.

Right now, the JavaScript is inline in the .ascx for the UserControl, but I have a feeling that I’ll need to use the Page.ClientScript property to inject it via code behind. My question is: how do I make sure that my function names don’t get clobbered, and make sure that the appropriate method gets called for each UserControl?

FYI: the code that needs to get executed for each UserControl is a block of jQuery that creates a Multi-Select control from a standard HTML <select>.

EDIT: RegisterStartupScript was suggested, but this runs before the DOM is finished loading. Wrapping the function in a jQuery Document.ready() doesn’t seem to help. The user control is running inside of an UpdatePanel, so I don’t really have a choice about how to call this script.

Answer 1

So I ended up taking a hybrid approach to what @DDaviesBrackett suggested. I am registering a function with Page.ClientScript, not as a startup script, but as a ClientScriptBlock. The function uses classes instead of IDs (and thus, ClientIDs) to attach to each control. The basic structure is:

if(!Page.ClientScript.IsClientScriptBlockRegistered(Page.GetType(),"scriptkey"))
{
    Page.ClientScript.RegisterClientScriptBlock(
        Page.GetType(),"scriptkey",script,true);
}

with the following script:

function bindMultiSelects() {
    $('.multiselectclass').multiSelect({
        oneOrMoreSelected: '*', 
        noneSelected: 'Select Item(s)'
    });
}

(using the awesome jQuery MultiSelect plugin)

Again, this works because my Master page creates a page_load method that then calls a method on the content, which then calls bindMultiSelects. Just for my own reference, the page_load and contentPageLoad functions both follow this “plugin” pattern I found here:

if(typeof functionname=='function') {
    functionname()
}