Multiple user controls and javascript

Question

I include a JS file in a user control. The host page has multiple instances of the user control.

The JS file has a global variable that is used as a flag for a JS function. I need the scope of this variable be restricted to the user control. Unfortunately, when I have multiple instances of the control, the variable value is overwritten.

What's the recommended approach in a situation like this?

Answer 1

Some options are to dynamically generate the javascript based on the ClientId of the User Control. You could dynamically generate the global variable for example.

Another option and one I would recommend is to encapsulate the global variable and function within an object, then your user control can emit the JS to create an instance of that object (Which can be dynamically named thus letting you scope the object as you see fit).

Edit

I don't have a working code sample that I can share but, I have done this in a couple different ways. the easiest method is to do this in the markup of your user control.

<script language='javascript'>
   var <%=this.ClientID%>myObject=new myObject();
</script>

Assuming your control has a clientId of myControl this will create a variable myControlmyObject.

Another way to do this would be to generate the script in the code behind you could register it using: Page.ClientScript.RegisterStartupScript().

Answer 2

Well, if you have to keep with the current solution, you could rename your global variable to something like the following code, which should be in the .ascx file for your control:

<script type='text/javascript'>
var <%= this.ClientID %>_name_of_global_variable;
</script>

Where "this" is the asp.net control. That way, each control has a unique variable name, based off the client id. Make sure you update the rest of your javascript to use this new naming convention. The problem, it looks messy, and the variable names will become very long depending on where the control is embedded in the page.

Does that make sense? It should take minimal javascript modification to get it working.

Answer 3

I would recommend refactoring your code such that all the common JS logic is stored in one place, not in every UserControl. This will reduce the size of your page by a good margin.

You can pass in the id of the UserControl to the common JS method(s) to differentiate between the UserControls.

For the issue of limiting the scope of your 'UserControl' variable, you could store some sort of a Key/Value structure to keep your UserControl-specific value - the Key would be the UserControl clientID, and the value would be the variable that you're interested in.

For example:

var UCFlags = new Object();
//set the flag for UserControl1:
UCFlags["UC1"] = true;
//set the flag for UserControl2:
UCFlags["UC2"] = false;

To access them, you simply pass the ClientID of the UserControl in to the UCFlags array:

myFlag = UCFlags["UC1"];

On the server-side, you can replace the constant strings "UC1" or "UC2" with

<%= this.ClientID %>

like this:

myFlag = UCFlags["<%= this.ClientID %>"];

You can still use the <%= this.ClientID %> syntax here even though the bulk of the JS is in a separate file; simply set

UCFlags["<%= this.ClientID %>"] = value;

before the call to embed the JS file.