Solved

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

Posted on 2010-08-24
3
1,228 Views
Last Modified: 2013-11-27
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
Comment
Question by:leskelly
  • 3
3 Comments
 

Author Comment

by:leskelly
ID: 33513387
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
 

Author Comment

by:leskelly
ID: 33514975
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
 

Accepted Solution

by:
leskelly earned 0 total points
ID: 33525975
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now