Solved

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

Posted on 2010-08-24
3
1,234 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SSRS ReportViewer report timeout 7 101
C# Offline Apllication 5 53
Entity Framework 7 30
insert text field data into html script 13 21
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

911 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

20 Experts available now in Live!

Get 1:1 Help Now