0

I am trying to set focus on an div with a class using jquery.focus(), It works in IE 9 but not in firefox or chrome. 

window.setTimeout(function(){ searchDivToggle(); $('.searchResultsFieldSet').focus();},0);

The page has search form,table with search results, each row has a link to view details, click on link shows details div hiding search form and table, details div has close on click hide details show search and search results.

JSFiddle

html 

<html>
    <head>
             <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

            <script>
                function showDetails(){
                    $('#search').toggle();
                    $('#detailsFragment').css("display","block");
                }
                function hideDetails(){
                    $('#search').toggle();
                    $('#detailsFragment').css("display","none");
                    $('#searchResults').focus();
                }
            </script>


    </head>
    <body>
    <div  id="search">  
        <div style="height:50em;  width=30em; border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">

            Place hodler for search form........
        </div>

    <div style="border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">
        <label  style=" font-weight: bold;" >Search Results </label>    
        <table  id="searchResults">

            <thead>
                <td>column1</td>
                <td>column2</td>
                <td>Action</td>
            </thead     
            <tbody> 
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>
                <tr>
                    <td>
                        Some value...
                    </td>
                    <td>
                        Some value...
                    </td>
                    <td>
                        <a href="#"  onclick="showDetails();">Show Details</a>
                    </td>
                </tr>

            </tbody>        

        </table>
    </div>  
    </div>
        <div   id="detailsFragment"  style="display:none">
            <div style="height:50em;  width=30em; border-width: 1px; border-style: dotted; padding-bottom: 1em; padding-top: 1em; padding-left: 1em; padding-right: 1em ">
                    Details Fragment 
                    <input type="button" value="Close"   onclick="hideDetails();">
            </div>

        </div>
    </body>

NorthCat
  • 8,315
  • 16
  • 40
  • 45
user884424
  • 543
  • 1
  • 10
  • 32
  • How do you imagine brining focus to a table would work? It's not an interactive element, elements you can bring into focus are things like buttons, links and form inputs. – scragar Aug 20 '14 at 13:32
  • 1
    Maybe you need to scroll to the table instead of fire `focus` event. – VStoykov Aug 20 '14 at 13:37

1 Answers1

1

The focus() cannot be place on a table element. It needs to be place on input, textarea or select

The focus event is sent to an element when it gains focus. This event is implicitly applicable to a limited set of elements, such as form elements (, , etc.) and links (). In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

http://api.jquery.com/focus/

You might want to use a scrollTo() element function. There is one example here: jQuery scroll to element

Community
  • 1
  • 1
David Laberge
  • 13,061
  • 14
  • 51
  • 82