PDA

View Full Version : 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:



<%@ 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:



$(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?

regicidedelferoz
03-25-2015, 03:20 AM
try


$("#LoginButton").trigger('click');