JQuery trigger() not working

**gib65** · 03-21-2015, 02:54 AM

Hello,

I'm trying to wire up the enter key to a button click and it's not working.

The button is a login button. We'd like for the user to have the option of clicking the button or clicking enter to log in. What I'm finding is something weird: it works if the username textbox has the focus but it fails if it doesn't.

Here's the HTML:

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AHSLearning.Login" %>

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>AHS Learning</title>
        <link rel="stylesheet" type="text/css" href="CSS/Login.css?reload"/>
        <script type="text/javascript" src="Scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="Scripts/jquery-ui-1.10.4.custom.min.js"></script>
        <script type="text/javascript" src="Scripts/Login.js"></script>
    </head>

    <body>
        <form id="form1" runat="server">
            <div id="BodyDiv">
    
                <table class="LogoTable" border="0">
                    <tr>
                        <td class="AHSLogoCell">
                            <img src="images/AHS.png" alt="AHS Logo" border="0" />
                        </td>
                        <td class="EMSLogoCell">
                            <img src="images/EMS.png" alt="EMS Logo" border="0" />
                        </td>
                    </tr>
                </table>

                <div id="MainContentDiv" class="MainContent">
                    <div class="AHSLearningSystem">
                        <span>AHS Learning System</span>
                    </div>
                
                    <table class="LoginTable" border="0">
                        <tr>
                            <td class="LoginCaptionColumn">Login:</td>
                            <td class="LoginTextboxColumn"><asp:TextBox width="150px" ID="UsernameTextbox" ClientIDMode="Static" 

runat="server" autofocus></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td class="LoginCaptionColumn">Password:</td>
                            <td class="LoginTextboxColumn"><asp:TextBox width="150px" ID="PasswordTextbox" ClientIDMode="Static" 

runat="server" TextMode="Password"></asp:TextBox></td>
                        </tr>
                        <tr>
                            <td colspan="2" style="text-align: center;"><asp:Label ID="LoginFailedLabel" class="LoginFailedLabel" 

runat="server">Login Failed</asp:Label></td>
                        </tr>
                    </table>
                
                    <div class="ButtonDiv">
                        <asp:Button ID="LoginButton" Text="Login" runat="server" OnClick="LoginButton_Click" 

onclientclick="LoginButton_ClientClick(); return false;"/>
                        <br />
                        <br />
                        <input id="ChangePasswordButton" type="button" value="Change Password" />
                    </div>
                </div>

                <table border="0" style="width: 100%; margin-top: 200px;">
                    <tr>
                        <td style="width: 385px;">&nbsp;</td>
                        <td style="border-top: 1px solid black;"><span class="Version">Version: 0.7</span></td>
                        <td style="width: 510px;">&nbsp;</td>
                    </tr>
                </table>

                <asp:HiddenField ID="IsLoggedInHiddenField" Value="false" runat="server" />
                <asp:HiddenField ID="IsLoginAttemptedHiddenField" Value="false" runat="server" />
                <asp:HiddenField ID="IsFirstTimeLoggingInHiddenField" Value="true" runat="server" />

            </div>
        </form>
    </body>
</html>

And here's the javascript:

Code:

$(function ()
{
...

    document.onkeydown = function (event)
    {
        if (event.keyCode == 13)
        {
            $("#LoginButton").trigger();
        }
    }
});

When the username textbox has the focus and the user hits enter, $("#LoginButton").trigger() results in the C# button handler logging the user in (assuming they got their credentials correct). But if the username textbox doesn't have the focus, then I get this error from the minimized JQuery script:

0x800a138f - JavaScript runtime error: Object.prototype.hasOwnProperty: 'this' is null or undefined

The line in the minimized JQuery is this:

p=j.call(b,"type")?b.type:b

I've attached the JQuery file itself in case anyone's up for parsing it (It's jquery-1.11.1.min.js).

Can anyone tell me why the call to trigger() doesn't work when the textbox doesn't have focus?