?
Solved

Error setting focus on a text box

Posted on 2010-03-25
11
Medium Priority
?
340 Views
Last Modified: 2013-12-08
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!
0
Comment
Question by:NunoSarandes
  • 6
  • 3
  • 2
11 Comments
 
LVL 3

Expert Comment

by:corneliu_news
ID: 28554406
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
 

Author Comment

by:NunoSarandes
ID: 28563635
Yes, the tab is visible. In fact, setting the focus results from an user action on the table.
0
 
LVL 3

Expert Comment

by:corneliu_news
ID: 28564843
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 

Author Comment

by:NunoSarandes
ID: 28569693
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
 

Author Comment

by:NunoSarandes
ID: 28570385
That script worked fine before I created the tab.
0
 
LVL 10

Expert Comment

by:Hans Langer
ID: 28574261
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
 

Author Comment

by:NunoSarandes
ID: 28575346
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
 
LVL 10

Expert Comment

by:Hans Langer
ID: 28575818
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
 

Author Comment

by:NunoSarandes
ID: 28578396
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
 
LVL 10

Expert Comment

by:Hans Langer
ID: 28581848
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
 

Accepted Solution

by:
NunoSarandes earned 0 total points
ID: 31280551
This situation is solved. The problem was not on the HTML but on the platform used to generate that HTML.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…
Suggested Courses

601 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question