• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1269
  • Last Modified:

When opening a modal Jquery dialog the focus goes to the address bar.

I have an ASP.NET web site developed in Visual Studio 2008 using Visual Basic.  The start page of the web site is a log in page.which is based on a master page.

The Page_Load procedure of Login.aspx registers a JavaScript which which sets window.onload to a JavaScript procedure that creates the dialog.

The dialog has text fields for the user name and password and two buttons, Login and Cancel.

The dialog opens and is styled, positioned and functions as it should.  The only problem is that instead of the focus being in the first field of the dialog it is in the address bar.  This is true whether I have the dialog set to be modal or not.  I have even set the focus option of the dialog to true even thought that is the default.  I've attached the code below.

I have tried a variety of things in the "open" option of the dialog creation code as well as a couple after the dialog was created.  Below is a summary of those attempts.

        open: function()
        {
            setTimeout(function() { $("#txtUserName").focus(); }, 50);

            $(this).parent().appendTo(jQuery("form:first"));
            $("#txtUserName").focus();
           
            $("input:text:visible:first").focus();

            $("input.focus:last").focus();

            $("input:text:second").focus();

            $(document).ready(function(){
            $("input[tabindex=0]").focus();
            });

            $("input[type='text']:first", document.forms[0]).focus();
        }
    });
    $(this).parent().appendTo(jQuery("form:first"));
    $("#txtUserName").focus().focus();

Any suggestions would be greatly appreciated.
MASTER PAGE
<%@ Master Language="VB" CodeFile="ClientTrack.master.vb" Inherits="ClientTrack" %>

<!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 runat="server">
    <title>Site Master Page</title>
    
    <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
   
    <link href="~/Styles/Master.css" rel="stylesheet" type="text/css" />
    <link href="~/Styles/Dialog.css" rel="stylesheet" type="text/css" />

    <script src="/WebApps/ClientTrack3.5/js/jquery/jquery-1.4.2.js" type="text/javascript"></script>    
    <script src="/WebApps/ClientTrack3.5/js/jquery/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>
    <script src="/WebApps/ClientTrack3.5/js/jquery/jQueryUI.js" type="text/javascript"></script>
    <script src="/WebApps/ClientTrack3.5/js/Master.js" type="text/javascript"></script>  

    <script type="text/javascript">
        window.onbeforeunload = confirmExit;
    </script>
    
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/WebServices/HelpService.asmx" />
            </Services>
        </asp:ScriptManager>
        <div id="divPageWrapper">
            <div id="divHeaderOne">
                <asp:Image runat="server" ID="HeaderImage" CssClass="HeaderOneImage" ImageUrl="~/Images/MasterHeader.gif"
                    AlternateText="Logo" />
            </div>
            <div id="divMenu">
                <asp:Menu CssClass="MainMenu" ID="MasterMenu" runat="server" DataSourceID="SiteMapDataSource1"
                    Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
                    <StaticSelectedStyle CssClass="StaticSelectedStyle" />
                    <StaticMenuItemStyle CssClass="StaticMenuItemStyle" ItemSpacing="0px" />
                    <StaticHoverStyle CssClass="StaticHoverStyle" />
                    <DynamicMenuStyle CssClass="DynamicMenuStyle" />
                    <DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
                    <DynamicHoverStyle CssClass="DynamicHoverStyle" />
                </asp:Menu>
            </div>
            <div id="divHeaderTwo">
                <asp:Label ID="lblFormTitle" runat="server" Text="FormTitle"></asp:Label>
            </div>
            <div id="divHeaderThree">
                <asp:UpdatePanel ID="UpdatePanelDDL" runat="server">
                    <ContentTemplate>
                        Records For
                        <asp:DropDownList ID="ddlRecordsFor" runat="server" Width="150px" CssClass="RecordsFor" AutoPostBack="True">
                            <asp:ListItem>1</asp:ListItem>
                            <asp:ListItem>2</asp:ListItem>
                            <asp:ListItem>3</asp:ListItem>
                        </asp:DropDownList>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <div id="divSideBar">
                <asp:LinkButton ID="LogOff" runat="server">Log Off</asp:LinkButton>
                <a id="SpellCheck" onclick="checkspell()">Spell Check</a><br />
                <a id="YouAre" onclick="YouAre()">You Are</a>
                <asp:HyperLink ID="YouCan" runat="server">You Can</asp:HyperLink>
                <asp:HyperLink ID="WhoCan" runat="server">Who Can</asp:HyperLink>
                <asp:HyperLink ID="HowCan" runat="server">How Can</asp:HyperLink>
                <asp:UpdateProgress ID="UpdateProgressButton" runat="server">
                    <ProgressTemplate>
                        <div class="Progress">
                        </div>
                        <br />
                        <div class="PleaseWait"> Please Wait...</div>
                    </ProgressTemplate>
                </asp:UpdateProgress>
            </div>
            <div id="divMainContent">
                <asp:ContentPlaceHolder ID="cp1" runat="server">
                    Under Construction
                </asp:ContentPlaceHolder>
            </div>
            <div id="divFooter">
                <asp:UpdatePanel ID="UpdatePanelButton" runat="server">
                    <ContentTemplate>
                        <asp:Button ID="btnDivideByZero" runat="server" Text="Divide by Zero" Width="125px" />
                        <asp:Button ID="btnPageNotFound" runat="server" Text="Page Not Found" Width="133px" />
                        <asp:Button ID="btnDatabaseError" runat="server" Text="Data base Error" Width="125px" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </div>
        <div id="divHelp"></div>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
    </form>
</body>
</html>

LOGIN
<%@ Page Language="VB" MasterPageFile="~/MasterPages/ClientTrack.master" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="Login" Title="Login" %>

<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="Server">
    <script src="js/Login.js" type="text/javascript"></script>
</asp:Content>

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="cp1">

    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
        <Services>
            <asp:ServiceReference Path="~/WebServices/LoginService.asmx" />
        </Services>
    </asp:ScriptManagerProxy>

    <div id="divLogin" title="Login" >
        <br />
        <span id="lblUserName" style="width:112px; display:inline-block;">User Name:</span>
        <input id="txtUserName" type="text" style="width:150px;"/>
        <br />
        <span id="lblPassWord" style="width:112px; display:inline-block;">Pass Word:</span>
        <input id="txtPassWord" type="password" style="width:150px;"/>
        <br /><br />
    </div>
</asp:Content>

Imports AdFormsAuthClassLibrary
Imports System.Data
Imports System.Data.SqlClient

Partial Class Login
    Inherits BasePage

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim Message As String = "<script type=""text/javascript"">window.onload = OpenLoginDialog;</script>"
            ClientScript.RegisterStartupScript(Me.GetType, "Login", Message)
        End If
    End Sub
End Class

LOGIN.JS
function OpenLoginDialog() {
    $('div#divLogin').dialog({
        height: "auto",
        position: [340, 300],
        focus: true,
        modal: true,
        overlay: { background: '#fff', opacity: '0.7' },
        buttons: { "Login": function() { Login(txtUserName.value, txtPassWord.value); }, "Cancel": function() { window.close(); } },
        open: function()
        {
            $("#txtUserName").focus();
        }
    });
}

var Message

function Login(UserName, Password)
{
    LoginService.Login(UserName, Password, LoginCallBack);
    setTimeout("SetMessage()", 0000);
}

function LoginCallBack(result) 
{
    Message = result;
}

function SetMessage(x, y) 
{
    $('div#divLogin').dialog("destroy")
}

Open in new window

0
leskelly
Asked:
leskelly
  • 3
1 Solution
 
leskellyAuthor Commented:
I just did an experiment with the modal-confirmation.html demo from the Jquery web site.  I placed the demo file and all associated files in the directory hierarchy of my web site.  When I opened it up the "Delete all items" button had the focus and responded when I hit the enter key.  I then created a new aspx page in the web site, copied the html from the demo file into it, and made it the start page for my application.  When that page opens the focus is in the address bar.  However if I hit the enter key the focus then goes to the "Delete all items" button whereas when Login.aspx is the start page hitting the enter key just cases the page to refresh.
0
 
leskellyAuthor Commented:
The problem appears to at least partly have to do with having the dialog in a content page that is based on a Master page.  I modified the modal-confirmation.aspx page so that it uses the master page and now hitting the enter key no longer puts the focus on the dialog.  That is without the master page if I hit enter the focus leaves the address bar and goes to the "Delete all items" button on the dialog.  Withe the master page if I hit the enter key the focus leaves the address bar but doesn't go to the dialog.
0
 
leskellyAuthor Commented:
No one seems to have an answer to this or at least no one is interested in it.  The best solution I've been able to find is to use a statement like the following to place the focus on the desired field.  It has to come after the creation of the dialog box.  The focus is still on the address box put hitting the enter key puts in in the specified field.
    document.getElementById("ctl00_cp1_txtUserName").focus();
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now