Link to home
Start Free TrialLog in
Avatar of NunoSarandes
NunoSarandesFlag for Portugal

asked on

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!
Avatar of corneliu_news
corneliu_news
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).
Avatar of NunoSarandes
NunoSarandes
Flag of Portugal image

ASKER

Yes, the tab is visible. In fact, setting the focus results from an user action on the table.
Avatar of corneliu_news
corneliu_news
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.
Avatar of NunoSarandes
NunoSarandes
Flag of Portugal image

ASKER

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.
Avatar of NunoSarandes
NunoSarandes
Flag of Portugal image

ASKER

That script worked fine before I created the tab.
Avatar of Hans Langer
Hans Langer
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()



Avatar of NunoSarandes
NunoSarandes
Flag of Portugal image

ASKER

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"/>
Avatar of Hans Langer
Hans Langer
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">
Avatar of NunoSarandes
NunoSarandes
Flag of Portugal image

ASKER

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!
Avatar of Hans Langer
Hans Langer
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

ASKER CERTIFIED SOLUTION
Avatar of NunoSarandes
NunoSarandes
Flag of Portugal image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial