user884424
user884424

Reputation: 583

focus() works in IE 9 but not in chrome, firefox

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>

Upvotes: 0

Views: 886

Answers (1)

David Laberge
David Laberge

Reputation: 16081

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

Upvotes: 1

Related Questions