Question

I have a groups user control and javascript is defined inside the control. In a page, I have two such controls, which work independently. Rendered javascript is something similar to below:

//control 1
var Groups = (function () {
var obj = {};
obj.selectedid = 2;
return obj;
}());

//control 2
var Groups = (function () {
var obj = {};
obj.selectedid = 2; //it is different here, to keep it simple i just hardcoded as '2'
return obj;
}());

Could anyone please tell me how to access 1st Groups variable (control) on the Page. I thought something like Groups[0] would give me the result but it’s not.

---

Thanks for your replies. Much Appreciated. I am adding more information to be clear. User control contains dual listbox, user can add/remove values from list1 to list2. So I had encapsulated all this logic as below.

    var Groups = (function () {
    var obj = {};
    obj.selectedid = 2;

    //some local functions for internal operations such as
    function moveGroups(source, target){        
    }

     //there are public functions to initialize this control or to add groups as below 
    // Groups can be added from external page by calling  Groups.AddGroups(data);
    obj.AddGroups = function(data) {
           //refers to local variables and functions and adds data to listboxes
      };

    return obj;
    }());

Problem is I have two such Groups controls on the page. Group1 contains its own dual list and similarly Group2. Now, I would need to access AddGroups function of both objects work independently like Groups1.AddGroups(data) or Groups2.AddGroups(data) from the page.

---

I have worked out with below solution.

var Groups = Groups || []; //Check object already exists
Groups.push( 
//kept all the existing code here...
(function () {
    var obj = {};
    obj.selectedid = 2;

    //some local functions for internal operations such as
    function moveGroups(source, target){        
    }

     //there are public functions to initialize this control or to add groups as below 
    // Groups can be added from external page by calling  Groups.AddGroups(data);
    obj.AddGroups = function(data) {
           //refers to local variables and functions and adds data to listboxes
      };

    return obj;
    }())

);

Now in my page, I refer using:

Groups[0].AddAvailGroups();
Groups[1].AddAvailGroups();

Answer 1

Two var Groups declarations define the same memory location.

So your second statement

//control 2
var Groups = (function () {

will overwrite value stored previously in Groups variable.

If you want to access Groups as a collection you should do this explicitly:

var Groups = []; // array/list;

Groups.push( ... ); // control 1
Groups.push( ... ); // control 2