1

I copied this solution to make the enter key behave like the tab one, from what it says in the post it should work properly. My problem is that the focus is not changing between the inputs (Text Boxes).

The characteristics of the solution are the following:
1. The solution in which I added this is an ASP .Net web forms application.
2. The supported browser is IE8
3. The jQuery version is 1.3.1
4. There are Ajax Update Panels and a Script Manager Proxy involved.

The page in question is defined as follows:

<asp:ScriptManagerProxy runat="server" ID="myScriptManager">
    <Scripts>
        <asp:ScriptReference Path="~/Scripts/MyScripts.js"/>
    </Scripts>
</asp:ScriptManagerProxy>    
<div id="content">
    <asp:UpdatePanel runat="server" ID="myUpdatePanel">
        <ContentTemplate>
            <script type="text/javascript">Sys.Application.add_load(aJavascriptClass.aJavascriptMethod)</script>  
            <div id="MainDiv">
                <div id="someList">
                    <asp:ListView runat="server" ID="myListView">
                        <LayoutTemplate>
                            <table width="98%">
                                <tr>
                                    <th>Column 1</th>
                                    <th>Column 2</th>
                                    <th>Column 3</th>
                                    <th>Column 4</th>
                                </tr>
                                <tr runat="server" id="itemPlaceholder" />
                            </table>
                        </LayoutTemplate>
                        <ItemTemplate>
                            <tr>
                                <td class="single-element">
                                    <asp:Label runat="server" ID="lblColumn1" Text='<%# Eval("Column1") %>'></asp:Label>
                                </td>
                                <td class="single-element">
                                    <asp:Label runat="server" ID="lblColumn2" Text='<%# Eval("Column2") %>'></asp:Label>
                                </td>
                                <td class="single-element">
                                    <asp:TextBox runat="server" ID="txtColumn3" Text='<%# Eval("Column3") %>' CssClass="display-data"></asp:TextBox>
                                </td>
                                <td class="single-element">
                                    <asp:Label runat="server" ID="lblColumn4" Text='<%# Eval("Column4") %>'></asp:Label>
                                </td>
                            </tr>
                        </ItemTemplate>
                    </asp:ListView>
                </div>
            </div> 
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

The javascript file that is referenced in the Script Manager Proxy is this one:

var aJavascriptClass = {
    aJavascriptMethod: function () {
        $(".display-data").keydown(function (event) {
            if (event.which == 13) {
                event.preventDefault();
                $(this).nextAll(".display-data:first").focus();
            }
        });
    }
};

$(document).ready(function () {
    aJavascriptClass.aJavascriptMethod();
});

So when the page is loaded the list view is empty, the user does something and after the post back the list view contains the data with the text boxes. When the focus is on any of the text boxes the enter key functionality is blocked so the page does not posts back but the focus is not moved to the next text box.

When debugging with the development tools in IE and looking at the contents of the jQuery results I get the following:

$(this).val() - gets the content of the Text Box that has the focus
$(this).nextAll(".display-data").val() - returns undefined
$(this).nextAll(".display-data:first").val() - returns undefined
$(this).nextAll().length - returns 0

There are too many pieces to this puzzle so any help would be appreciated. Thank you.

4

0 回答 0