Javascript to set focus on a field on another tab

[Jay Talbott]

I am successful using the javascript posted on this thread:

http://msgboard.alphasoftware.com/al...ad.php?t=92502

when I want to set the focus on an onBlur event on a field in the current tab on a grid.
However, when I want to set the focus on a field on a different tab, I get an error message stating:

Can't move focus to the control because it is invisible, not enabled, or a type that does not accept the focus.

I suspect that it cannot set the focus because it is on a different tab. If this is the case, can I use javascript to set focus on a field on another tab?
Thanks.
Jay

[Jay Talbott]

Re: Javascript to set focus on a field on another tab

Shameless bump (it's been three weeks with no response).

Thanks.

[aburningflame]

Re: Javascript to set focus on a field on another tab

You might have to call the method to switch tabs first, then set focus. When it is not the active tab maybe the controls get set to display:none; which would explain your issue. Try something like

Tabcntrl.activate('tab2');
Mytxtbox.focus();

That might help. Not sure on method names you'll have to look them up. Hope this helps

[Jay Talbott]

Re: Javascript to set focus on a field on another tab

Thanks, Scott.
Even using FireBug, I cannot seem to get the name of the tab control.
How do other developers handle this problem?
Can data entry be streamlined to allow the user to go from the last field on Tab 1 to the first field on Tab 2 without using the mouse?

Thanks for looking.
Jay

[aburningflame]

Re: Javascript to set focus on a field on another tab

Im pretty sure my suggestion will work.
You will just need to try and find the name of the tab control - as im pretty sure that an activate call on tab 2 would switch tabs and then you can .focus() any control that is rendered on the new tab.

if your at wits end - it MAY be easier to just replace the tab component.

heres a well supported/documented/easy to use tab control (jquery tools)

http://jqueryui.com/demos/tabs/

[aburningflame]

Re: Javascript to set focus on a field on another tab

In the above example your code will look something similar to this:

JAVASCRIPT (jquery.scripts.js file - or whatever name you want)

$j=jQuery.noConflict(); /*avoid conflicts with alpha (alpha uses the $ variable)*/
$j("document").ready(function(){
    'this is execute as soon as the DOM is ready
     $j("#tabcntrl").tabs();
     
     'wire an event handler
     $j("#t1-next").click(function(){
          $j("#tabcntrl").tabs('select',1); 'select tab 2(0based)
          $j("#idofcontrolontab2").focus();
     });

      
});

HTML File

<!--include reference to jquery.js (download from url) and your javascript file created above--->

<!---tab markup--->
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		tab1 content
                <input id="t1-next" type="button" value="Next Tab"/> 
	</div>
	<div id="tabs-2">
		tab 2 content
	</div>
	<div id="tabs-3">
		tab 3 content
	</div>
</div>

[aburningflame]

Re: Javascript to set focus on a field on another tab

Can data entry be streamlined to allow the user to go from the last field on Tab 1 to the first field on Tab 2 without using the mouse?

Is this really intuitive?
When would you want to switch tabs on them?

If they are on the last control of the page and they hit the tab button? You probably want to handle the keypress event of the last control.

$j("#lastcontrolid").keypress(function(e){
       var code = (e.keyCode ? e.keyCode : e.which);
       if(code == /* add the keycode for the tab button here*/){ 
             /*switch tab code here*/
       }
});

[Jay Talbott]

Re: Javascript to set focus on a field on another tab

Scott,
Thanks for your help.

To answer your question, I think if users filled out the same form numerous times, it would be intuitive for them to get to the last field on the first tab, and hope to go directly to the first field on the second tab. This is common behavior in a desktop tabbed object, and some of us old guys would find this normal for the web too.

While the jquery looks quite powerful, if I can grab the way to make the javascript switch tabs to the second tab, I would like to go with that method.

Jay

[aburningflame]

Re: Javascript to set focus on a field on another tab

Well, all I can really say is look through the documentation for the tab control your using and try to find the reference to the tab object and figure out the method to switch tabs. There must be an activate() or select() or something similar.

Jquery would not be a bad thing to learn. It is VERY powerful.
http://jquery.com/
http://docs.jquery.com/How_jQuery_Works

[DBM]

Re: Javascript to set focus on a field on another tab

Jay,

I have had a go at this - does it help?

To try this out I have set up a simple grid which has a few fields in two different tabs. Thre are just four rows in this grid example and you will see from the attached screenshot in FF how they are referenced. There is a reference for each of the four rows in this case.

To test this out I have added the following code to the OnBlur Javascript Event in the last field of the first tab.

// Select the second tab

window['GRID1_TAB_1R_'+{Grid.RowNumber}+'Obj'].select('2'); 

// set focus to field called RSA_NET_TIV
var ele = $('{grid.componentname}.V.R' + {Grid.RowNumber} + '.RSA_NET_TIV');
ele.focus();    

// alternative on last row above is to use  ele.select();

This code opens the second tab and sets the focus to the field that is in the second tab.

David.

[Jay Talbott]

Re: Javascript to set focus on a field on another tab

Thank you sir. That works quite well.
I appreciate your help with this.
All the best,
Jay

[Keith Hubert]

Re: Javascript to set focus on a field on another tab

Hi Jay,

Did you ever see this here?

[Kamel]

Re: Javascript to set focus on a field on another tab

Dear DBM,
this code is working fine on the Working Preview,,
but it's not working on the web browser.

please any suggestions ?!?

[Kamel]

Re: Javascript to set focus on a field on another tab

please any help for this problem,,,

I want to move to another tap, from button named Next, how ????

It's need to Javascript code, I tried your code but it's not working on web browser, just on Working Preview ?!?!??!

window['GRID1_TAB_1R_'+{Grid.RowNumber}+'Obj'].select('3');

please any help