I currently have the following code. Basically, just a login page and a modal popup when clicking a hyperlink to enter in your email address to email off your password if you’ve forgotten it. The modal does also check to see if the email entered is in the system.
This is my first experience with jqModal and I love it. Actually, this works great in all the browsers except, as stated, in IE8 (specifically, I’m in IE9 with compatability mode turned on). As coded below, the ‘Login’ button simply doesn’t fire and does not login the users. The “click here to remember your password” feature will popup and works as intended. Again – as written below, it works perfectly – in IE9, FF10, Opera 11,Safari, and Chrome.
What am I missing/what is different in IE8 (or, perhaps it’s just compatability mode issue in IE9?)
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Index.aspx.vb" Inherits="mySite_v7.Index" %>
<%@ Register Src="controls/Header.ascx" TagName="Header" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Site v7 - Login Page</title>
<link rel="Stylesheet" href="scripts/Site.css" type="text/css" />
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="scripts/jqModal-03-01-2009.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="scripts/jqModal.css" />
<script type="text/javascript">
$(document).ready(function () {
$('#dialog').jqm();
$('#jqmOpen').click(function () {
$('#dialog').jqmShow();
return false;
});
$('#jqmClose').click(function () {
$('#dialog').jqmHide();
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div class="header">
<div class="logoImage">
<a href="/Default.aspx">
<img src="images/header/spacer.gif" class="trans" alt="" /></a>
</div>
</div>
<div class="main">
<asp:Label ID="Label3" runat="server" Text="Welcome to mySite.com" Style="font-weight: bold;
font-size: medium;" />
<br />
<asp:Label ID="Label5" runat="server" Style="font-size: xx-small;" Text="version 7.0 - (<b>.NET 4.0</b>)" />
<div class="errorMsg">
<asp:UpdatePanel ID="udp2" runat="server">
<ContentTemplate>
<asp:Label ID="lblError" runat="server" Visible="False" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnLogin" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
<br />
<div class="lbls">
<asp:Label ID="lblUserName" runat="server" Text="UserName:" Font-Names="Verdana"
Font-Size="Small" />
</div>
<div class="txts">
<asp:Panel ID="Panel1" runat="server" DefaultButton="btnLogin">
<asp:TextBox ID="txtUserName" runat="server" Style="font-size: small;" />
</asp:Panel>
</div>
<br />
<div class="lbls">
<asp:Label ID="Label4" runat="server" Text="Password:" Style="font-size: small;" />
</div>
<div>
<asp:Panel ID="Panel2" runat="server" DefaultButton="btnLogin">
<asp:TextBox ID="txtPassword" runat="server" Style="font-size: small" TextMode="Password" />
</asp:Panel>
</div>
<div class="btns">
<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />
</div>
<div class="lbls">
<asp:Label ID="lblForgot" runat="server" Style="font-size: small;" Text="Forgot your password? Click " />
<a href="#" style="color: Blue; text-decoration: underline;" name="jqmOpen"
id="jqmOpen">HERE</a>
</div>
</div>
<span id="dialog" class="jqmWindow"><a href="#" class="jqmClose">
<img src="images/close.gif" alt="close" style="float: right; border: 0px;" />
</a>
<br />
<asp:UpdatePanel ID="upd1" runat="server">
<ContentTemplate>
<asp:Label ID="lblModErr" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<br />
<asp:Label ID="lblEmail" runat="server" Text="Enter your email address:" class="lbls" />
<br />
<asp:Panel ID="Panel3" runat="server" DefaultButton="btnSubmit">
<asp:TextBox ID="txtEmail" runat="server" class="txts" />
</asp:Panel>
<br />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="btns jqmClose"
CausesValidation="false" />
<div class="btns" style="display: inline;">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
</div>
</span>
</form>
</body>
</html>
Thanks!
EDIT
Please disregard. This is ONLY an IE9 issue with compatability mode turned on.
After posting I realized – why didn’t I check this IN IE8 – sigh – sometimes too much focus is a bad thing. HEH. I’m leaving here for yet another example of how to set things up for jqModal and ASP.NET and as a slight warning to anyone else that might stumble across this odd combo.
Sorry. Wow … one year later:
FROM EDIT: Please disregard. This is ONLY an IE9 issue with compatability mode turned on. After posting I realized – why didn’t I check this IN IE8 – sigh – sometimes too much focus is a bad thing. HEH. I’m leaving here for yet another example of how to set things up for jqModal and ASP.NET and as a slight warning to anyone else that might stumble across this odd combo.