Activate a combobox from a checkbox using google closure

Question

I have a set of check boxes with Id's user1,user2 and so on and also set of combo boxes with Id's usersel1,usersel2 and so on in a dialog. When a check box is checked (say suppose with Id user1) then corresponding combo box must be activated(i.e combo box with Id usersel1). I have the following code and isn't working. How do i achieve this behavior?

for(var g=0;g<userlist.length;g++) //userlist.length give no of users
    b2 = (goog.dom.getElement('usersel'+(g+1))); //gets combo box
     //listening if check box is clicked
     goog.events.listen(goog.dom.getElement('user'+(g+1)),
        goog.events.EventType.CLICK,
         function(e) {
         b2.disabled = (false); // trying to enable corresponding combo box
     });

The problem with above piece of code is that any check box is clicked only the last combo box gets activated.

check boxes have Ids(user1,user2,user3.... and combo boxes have Ids usersel1,usersel2....

Just in case if you want to host code in JSBin - example http://jsbin.com/EWUyaSI/1/edit?html,css,js,output — aked, Sep 18 '13 at 05:17

score 1 · Accepted Answer · answered Sep 11 '13 at 06:24

1

There are couple of issues.

First, the for cycle is applied only to the second line, not to the whole block.

Second, the way of creating the closure is wrong (see here). The value b2 is not propagated into the event handlers as you would think.

It would work if rewritten like this:

for (var g=0;g<userlist.length;g++) { //userlist.length give no of users
  b2 = goog.dom.getElement('usersel'+(g+1)); //gets combo box
  //listening if check box is clicked
  goog.events.listen(goog.dom.getElement('user'+(g+1)), 
    goog.events.EventType.CLICK, 
    makeEventHandler(b2)
  );
}

function makeEventHandler(element) {
  return function(e) {
    element.disabled = false;
  }
}

answered Sep 11 '13 at 06:24

Erlik

658
8
24

That worked perfectly fine!!!!! When the check box is unchecked the combo box needs to be disabled so should we add another listener? – Arjun Sep 11 '13 at 06:50
The other issue is the listen function works only when the script is loaded for 1st time the second time when the dialog is invoked without reloading the listen function doesn't work. – Arjun Sep 11 '13 at 07:03
First question. You can handle this in the same event handler, no need to add another listener. You just check the status of the checkbox and according to it you enable or disable the select element. Second question. When you run this script, it adds event handlers to all existing elements. If you later add some more elements, you obviously need to add event handlers for these too. – Erlik Sep 12 '13 at 06:37
1

The first task can be done e.g. this way: `element.disabled = !e.currentTarget.checked;` – Erlik Sep 12 '13 at 07:42
for the 2nd question: when i click on a button i get the dialog. When i do this for the 1st time the listener events work and from the 2nd time when i click the button(without reloading) it doesn't. – Arjun Sep 12 '13 at 09:51
Hard to say without further info. Basically what you need is either (a) create elements and event handlers once and never delete them (just hide), or (b) you need to create elements and register event handlers every time you push that button and delete elements after closing the dialog. Both will work, you just should not mix these approaches. – Erlik Sep 12 '13 at 12:01
`function combox () { goog.events.listen((goog.dom.getElement('switch')), goog.events.EventType.CLICK, function(e) { for(var m=0;m"+content[n]+""); } mycontent[m] = (""+userlist[m]+"
"); } var dialog1 = new goog.ui.Dialog(null, true); dialog1.setContent(mycontent.join("")); //listening func goes here}); var url = 'userassign'; request.send(url, "GET"); }); }` – Arjun Sep 12 '13 at 13:00
This function is called on body onload in jsp. – Arjun Sep 12 '13 at 13:00
It seems you create whole content menu whenever the switch element is clicked. Then I don't know where the problem could be. If you are unable to resolve it, just place another question with all relevant source codes, or - even better - some simplified version of your code, that is not cluttered by stuff, which is not related to the problem. Plus it's easier to read, when it's properly formatted. – Erlik Sep 13 '13 at 06:54

Activate a combobox from a checkbox using google closure

1 Answers1

Linked