Error setting focus on a text box

I'm trying to set focus on a text box, but I always get this error:

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


The text box name is "wttrData$ctl03$wttbAgente", identified here:

<div id="DivTab2" style="display: block;">
   <table width="100%" border="0" cellSpacing="0" cellPadding="0">
      <tbody>
         <tr>
            <td>
               <table class="TableRecords" id="wttrData" style="width: 100%; border-collapse: collapse;" border="0" cellSpacing="0" cellPadding="0">
                  <tbody>
                     <tr>
                        <td class="TableRecords_OddLine">
                           <input name="wttrData$ctl03$wttbAgente" tabIndex="33" title="" id="wttrData_ctl03_wttbAgente" onkeydown="return OsEnterKey('wtbtSave', event)" type="text" size="5" maxLength="5" jQuery1269515660571="21" value="0"/>


The javascript used to set the focus is:

document.getElementById('wttrData').rows[document.getElementById('wttrData').rows.length - 1].cells[1].getElementsByTagName('input')[0].focus()


The general idea is to set the focus on the text box of the last record of the table wttrData, after creating a new record. This table is displayed on a tab. Without the tab, the script works fine.

This error occurs on IE8. On Firefox, I don't get the error, but the focus is also not set.

How can I solve this?

Thanks!
NunoSarandesAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

corneliu_newsCommented:
Is the tab visible? If not then the error is explaining well the reason - you can't set the focus if field is not visible (because tab is not visible).
0
NunoSarandesAuthor Commented:
Yes, the tab is visible. In fact, setting the focus results from an user action on the table.
0
corneliu_newsCommented:
well try to debug - write "debugger;" on the function where you set the focus, enable debuging on IE 8 (Tools, Internet Options, Advanced tab, Browsing check/uncheck enable/disable script debugging). When asked for debug open with Visual Studio and check if your
document.getElementById('wttrData').rows[document.getElementById('wttrData').rows.length - 1].cells[1].getElementsByTagName('input')[0].focus() is actually accesing the right text box that is visible. Maybve you have some other elements that are not visible and you try to set focus on something else and not on the actuall textbox.

Hope that helps.
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

NunoSarandesAuthor Commented:
Putting a watch on document.getElementById('wttrData').rows[document.getElementById('wttrData').rows.length - 1].cells[1].getElementsByTagName('input')[0], I can see the right object. And focus() appears on the methods list of that object.
0
NunoSarandesAuthor Commented:
That script worked fine before I created the tab.
0
Hans LangerCommented:
hi, if the HTML as you show us is the correct, I think  the index should be 0 and not 1

document.getElementById('wttrData').rows[document.getElementById('wttrData').rows.length - 1].cells[----->   0 <-------].getElementsByTagName('input')[0].focus()



0
NunoSarandesAuthor Commented:
Sorry! When copying the code, I forgot one <tr>. the correct code is this:

<div id="DivTab2" style="display: block;">
   <table width="100%" border="0" cellSpacing="0" cellPadding="0">
      <tbody>
         <tr>
            <td>
               <table class="TableRecords" id="wttrData" style="width: 100%; border-collapse: collapse;" border="0" cellSpacing="0" cellPadding="0">
                  <tbody>
                     <tr>
                     <tr>
                        <td class="TableRecords_OddLine">
                           <input name="wttrData$ctl03$wttbAgente" tabIndex="33" title="" id="wttrData_ctl03_wttbAgente" onkeydown="return OsEnterKey('wtbtSave', event)" type="text" size="5" maxLength="5" jQuery1269515660571="21" value="0"/>
0
Hans LangerCommented:
well, anyway, the index should be 0, and there is something wrong with the new code, there could not be 2 TR togheter without closing tags :S

<tbody>
<tr>  
<tr> <----- this is wrong
<td class="TableRecords_OddLine">
0
NunoSarandesAuthor Commented:
I didn't copy all the code (the closing tags aren't here) to simplify. I'm seeing now the you are referring the cells, not the rows. Again, my fault. There's a <td> missing. The text box I want to focus is on the second cell of the last row of the table. The correct code would be this (hopefully...):

<div id="DivTab2" style="display: block;">
   <table width="100%" border="0" cellSpacing="0" cellPadding="0">
      <tbody>
         <tr>
            <td>
               <table class="TableRecords" id="wttrData" style="width: 100%; border-collapse: collapse;" border="0" cellSpacing="0" cellPadding="0">
                  <tbody>
                     <tr>
                     <tr>
                        <td>
                        <td class="TableRecords_OddLine">
                           <input name="wttrData$ctl03$wttbAgente" tabIndex="33" title="" id="wttrData_ctl03_wttbAgente" onkeydown="return OsEnterKey('wtbtSave', event)" type="text" size="5" maxLength="5" jQuery1269515660571="21" value="0"/>

Sorry for the confusion!
0
Hans LangerCommented:
well, there must be some PARENT NODE of the input that its invisible. You need to search better, cause we cant help you without more information.

Look this code, its appear the same error when the tab is style:none, but if you change it to visible its work. Maybe you need to change the order of some code lines and make sure that the tab its visible before focus the textbox.
<HTML>
<SCRIPT LANGUAGE="JavaScript">
onload = function(){
	document.getElementById('wttrData').rows[document.getElementById('wttrData').rows.length - 1].cells[1].getElementsByTagName('input')[0].focus()
}
</SCRIPT>
 <BODY>
  <div id="DivTab2" style="display: none;">
   <table width="100%" border="0" cellSpacing="0" cellPadding="0">
      <tbody>
         <tr>
            <td>
               <table class="TableRecords" id="wttrData" style="width: 100%; border-collapse: collapse;" border="1" cellSpacing="0" cellPadding="0">
                  <tbody>
				  <tr>
                        <td>text</td>
                        <td class="TableRecords_OddLine">
                           <input name="wttrData$ctl03$wttbAgente" tabIndex="33" title="" id="wttrData_ctl03_wttbAgente" onkeydown="return OsEnterKey('wtbtSave', event)" type="text" size="5" maxLength="5" jQuery1269515660571="21" value="0"/>
						</td>
					</tr>				
                     <tr>
                        <td>text</td>
                        <td class="TableRecords_OddLine">
                           <input name="wttrData$ctl03$wttbAgente" tabIndex="33" title="" id="wttrData_ctl03_wttbAgente" onkeydown="return OsEnterKey('wtbtSave', event)" type="text" size="5" maxLength="5" jQuery1269515660571="21" value="0"/>
						</td>
					</tr>
					</tbody>
				</table>
			</td>
		</tr>
		</tbody>
	</table>
 </BODY>
</HTML>

Open in new window

0
NunoSarandesAuthor Commented:
This situation is solved. The problem was not on the HTML but on the platform used to generate that HTML.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.