Solved

Setting a button in a Jquery dialog as the default.

Posted on 2010-08-22
8
795 Views
Last Modified: 2012-06-27
I have a an asp.NET application that has a login page on it with a Jquery dialog box on it.  In the dialog are fields for a user name and passwords, a login button and a cancel button.  The Javascript that defines the dialog box is below. After the user enters their user name and password I'd like them to be be able to hit the enter key and have the function attached to the login button run.  In other words at that point I'd like the login button be the default.  Any suggestions would be greatly appreciated.
function OpenLoginDialog()

{

    $('div#divLogin').dialog({

        height: "auto",

        position: [340, 300],

        modal: true,

        overlay: { background: '#fff', opacity: '0.7' },

        buttons: { "Login": function() { Login(ctl00_cp1_txtUserName.value, ctl00_cp1_txtPassWord.value); }, "Cancel": function() {window.close(); } }

    });

}

Open in new window

0
Comment
Question by:leskelly
  • 5
  • 3
8 Comments
 
LVL 14

Expert Comment

by:sam2912
ID: 33498311
try
function OpenLoginDialog()
{
    $('div#divLogin').dialog({
        height: "auto",
        position: [340, 300],
        modal: true,
        overlay: { background: '#fff', opacity: '0.7' },
        open: function() {
          $(this).parents('.ui-dialog-buttonpane button:eq(0)').focus(); 
        },
        buttons: { "Login": function() { Login(ctl00_cp1_txtUserName.value, ctl00_cp1_txtPassWord.value); }, "Cancel": function() {window.close(); } }
    });
}

Open in new window

0
 

Author Comment

by:leskelly
ID: 33499829
Hello sam2912,

Thanks for your response.  That sets the focus when the dialog is first opened but after the user enters there user name and password the focus is on the last field in which an entry was made.  Do you know how I can make the Login button the default button?

0
 
LVL 14

Expert Comment

by:sam2912
ID: 33500001
ok, have you tried switching the two buttons?
buttons: { "Cancel": function() {window.close(); }, "Login": function() { Login(ctl00_cp1_txtUserName.value, ctl00_cp1_txtPassWord.value); }  }

Open in new window

0
 

Author Comment

by:leskelly
ID: 33500067
The order of the buttons doesn't make a difference as neither one is acting as the default.  When the user hits the enter key nothing happens.

I don't know if makes a difference but there are 3 asp buttons on the master page the login page is based on.  They aren't available until the dialog is closed.  Below is the html for the master and login pages.
<%@ 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>



<%@ 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" style="text-align:center">

        <br />

        <asp:Label ID="lblUserName" runat="server" Text="User Name:" Width="112"></asp:Label>

        <asp:TextBox ID="txtUserName" runat="server" Width="150"></asp:TextBox>

        <br />

        <asp:Label ID="lblPassWord" runat="server" Text="Pass Word:" Width="112"></asp:Label>

        <asp:TextBox ID="txtPassWord" runat="server" TextMode="Password" Width="150"></asp:TextBox>

        <br /><br />

    </div>

</asp:Content>

Open in new window

0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:leskelly
ID: 33500078
Those buttons don't make a difference as I removed them and hitting the enter key still does nothing.
0
 
LVL 14

Expert Comment

by:sam2912
ID: 33500224
You might be able to work-around by having a form and hidden submit button
    <div id="divLogin" title="Login" style="text-align:center">

        <form action="" method="post" onsubmit="return false;">

        <br />

        <asp:Label ID="lblUserName" runat="server" Text="User Name:" Width="112"></asp:Label>

        <asp:TextBox ID="txtUserName" runat="server" Width="150"></asp:TextBox>

        <br />

        <asp:Label ID="lblPassWord" runat="server" Text="Pass Word:" Width="112"></asp:Label>

        <asp:TextBox ID="txtPassWord" runat="server" TextMode="Password" Width="150"></asp:TextBox>

        <input type="submit" id="loginBtn" value="" style="visibility:none;" onclick="Login(ctl00_cp1_txtUserName.value, ctl00_cp1_txtPassWord.value);" />

        <br /><br />

        </form>

    </div>

Open in new window

0
 

Author Comment

by:leskelly
ID: 33501805
Thanks for the new suggestion but I'm afraid it didn't work either.  After entering the user name and password hitting the enter key still has no affect.
0
 

Accepted Solution

by:
leskelly earned 0 total points
ID: 33526032
I found the following solution.  Adding this code in my OpenLoginDialog function below where the dialog box is created did the trick.

    $('#divLogin').keyup(function(e)
    {
        if (e.keyCode == 13)
        {
            $("div.ui-dialog-buttonpane button:first").click();
        }
    });
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
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 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)

743 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

14 Experts available now in Live!

Get 1:1 Help Now