Multiple Controls on a Page with Multiple Instances of Javascript

Question

I have created a Web Control in ASP for use in integrating with Telligent CommunityServer. The control is written in ASP with some 10 lines of C# backend for controlling visibility of the UI elements based on permissions, but I'd say 90% of the functionality is straight-up Javascript.

The control works beautifully, until you drop two instances of the Control on the same page--since they reference the exact same Javascript functions, only one control works.

How can I take this functionality that I have, this 1200 lines of Javascript, and make it so that each instance of the control can reference its each unique instance of Javascript?

Answer 1

If the problem is simply finding out which HTML element triggered an event then that's easy - it's passed to you in the event arguments. (You can then get its parent element, of course.) So if I understand the problem correctly you have JavaScript functions referencing some controls, which get duplicated?

I don't think there's any magic solution here: you just have to make the IDs unique. If you're not using server-side controls (which handle this for you automatically) then you could use some server-side generated prefix or suffix, eg.

<input id="<%= ParentControlId %>_mytextbox" type="text" />

where ParentControlId is a unique ID of the parent control (you could just use Control.ID if you don't mind long IDs).

Of course, you should try to re-use your JavaScript functions rather than duplicating them for each control instance. If you're using the server-generated ID approach you'll have to pass entire IDs around. If you're using the prefix approach you can just pass around the prefix.

Answer 2

How is your control getting the JavaScript into the page, then? Injecting it directly? Are you using a ScriptReference? The browser would only load the JS once if both controls referenced that same JS (same URL).

Also, is your JS written in terms of any old instance? e.g. do you have function like Load(oControlName) or does the Load() function have a hard-coded instance name inside it?

IMO, trying to get multiple 'JavaScripts' is not the way forward - refactoring your code may get your answer quicker.