Javascript error in Setting focus to a textbox inside a lightbox(Overlay) window.

Question

Hi All,

I have a textbox, a button and a "AdvancedSearch" link on my aspx page. On page load, the focus is set to the textbox. On click of the "AdvancedSearch" link, a lightbox(overlay) window will be opened. I want to set focus to a textbox present within this lightbox window. I am using javascript to achieve this. The code looks somewhat like this:

if( element.type != "hidden" && element.style.display != "none" && !element.disabled ) {
element.focus();
return;
}

when the lightbox window loads, i get a javascript error - "Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus"

Any idea why this error is thrown and why it is not able to set focus to the textbox in the lightbox window?

Thanks, Rishab.

Answer 1

As @Stephen commented, the element might be in a hidden container, If you have validation scripts present (your page includes at least one validation control) then you can use IsInVisibleContainer function (part of asp.net validation scripts).

if not you may include the function:

function IsInVisibleContainer(ctrl) {
    if (typeof(ctrl.style) != "undefined" &&
        ( ( typeof(ctrl.style.display) != "undefined" &&
            ctrl.style.display == "none") ||
          ( typeof(ctrl.style.visibility) != "undefined" &&
            ctrl.style.visibility == "hidden") ) ) {
        return false;
    }
    else if (typeof(ctrl.parentNode) != "undefined" &&
             ctrl.parentNode != null &&
             ctrl.parentNode != ctrl) {
        return IsInVisibleContainer(ctrl.parentNode);
    }
    return true;
}

Then Delay setting focus until conatiner become visible:

function setFocus(){
   if(element.type != "hidden" && !element.disabled) {
      if(IsInVisibleContainer(element))
         element.focus();
      else
         window.setTimeout(setFocus,100);
   }
}