Multiple User Controls with Javascript

Question

I am trying to emulate a simple timepick user control with a combo box and a little image of a clock. In the user control I type in the code:

function SetFocus() {
    var comboBox = $find("<%=cboTime.ClientID %>");
    var input = comboBox.get_inputDomElement();
    input.focus();      }

cboTime is the combobox control and there is an image of a little clock right after I tie the click event of the image to this function

all is fine and dandy if I have ONE user control on my page.....

If I add another user control with a different name, the behavior is such that no matter which image I click, the very last combo box gets the focus.

I know WHAT is happening...I just need a workaround. When the page is rendered, it creates two identical scripts with the client id of the combo box. Problem is, all the preceding instances overwrites the predecessor because they are the same name.

Anyone got a solution to this? Its gotta be simple but I can't find the answer anywhere.

Thanks

Answer 1

You will need to change the SetFocus() method so that it takes the client ID of the combobox as a parameter:

function SetFocus(cboClientId) {
  var comboBox = $find(cboClientId);
  var input = comboBox.get_inputDomElement();
  input.focus();
}

This means, you'll have to change the code where the call of the SetFocus() method is made. If I understand correctly, this is done in a client-side click event handler on an image. In that case, you could set the onclick="..." part of the image in the control's code behind. E.g. something like this (not tested):

ASCX:

<asp:DropDownList id="cboTime" .../>
<asp:Image id="img" .../>

Code-behind:

img.Attributes.Add("onclick",
  string.Format("javascript:SetFocus('{0}');", cboTime.ClientID));

Then you can take the SetFocus() method and put it into an external JS file (and include that in your ASCX).