[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now


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

Posted on 2010-08-24
Medium Priority
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);





            $("input[type='text']:first", document.forms[0]).focus();

Any suggestions would be greatly appreciated.
<%@ 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;
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
                <asp:ServiceReference Path="~/WebServices/HelpService.asmx" />
        <div id="divPageWrapper">
            <div id="divHeaderOne">
                <asp:Image runat="server" ID="HeaderImage" CssClass="HeaderOneImage" ImageUrl="~/Images/MasterHeader.gif"
                    AlternateText="Logo" />
            <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" />
            <div id="divHeaderTwo">
                <asp:Label ID="lblFormTitle" runat="server" Text="FormTitle"></asp:Label>
            <div id="divHeaderThree">
                <asp:UpdatePanel ID="UpdatePanelDDL" runat="server">
                        Records For
                        <asp:DropDownList ID="ddlRecordsFor" runat="server" Width="150px" CssClass="RecordsFor" AutoPostBack="True">
            <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">
                        <div class="Progress">
                        <br />
                        <div class="PleaseWait"> Please Wait...</div>
            <div id="divMainContent">
                <asp:ContentPlaceHolder ID="cp1" runat="server">
                    Under Construction
            <div id="divFooter">
                <asp:UpdatePanel ID="UpdatePanelButton" runat="server">
                        <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" />
        <div id="divHelp"></div>
        <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />

<%@ 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 ID="Content1" runat="server" ContentPlaceHolderID="cp1">

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

    <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 />

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

function OpenLoginDialog() {
        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()

var Message

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

function LoginCallBack(result) 
    Message = result;

function SetMessage(x, y) 

Open in new window

Question by:leskelly
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3

Author Comment

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.

Author Comment

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.

Accepted Solution

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.

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

649 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