Solved

How do you use JavaScript to collapse a non-visible element in a JQuery Dialog.

Posted on 2011-02-24
9
449 Views
Last Modified: 2012-05-11
I have a aspx page that contains a div element which in turn contains several div, span, and input elements.  The page is used to log into a .NET application.  When the page is opened the outer div element is turned into a jQuery dialog.  After the user enters their username and password and click the login button the code of the page determines if additional information is needed in which case a span and a div or a span and a select element becomes visible.  All of this works fine the only problem is that if the second set of elements, the span and select, become visible they are below the first set of elements so there is a blank space between the them and the password fields.  This app runs on a company Intranet so everyone accessing it will be using Internet Explorer 8.  The HTML and JavaScript code are below.

Any assistance would be greatly appreciated.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="Login" %>
<!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>Login</title>
    <link href="~/Styles/Dialog.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <script src="<%=ResolveUrl("~/js/jquery/jquery-1.4.2.js")%>" type="text/javascript"></script>
    <script src="<%=ResolveUrl("~/js/jquery/jquery-1.4.2-vsdoc.js")%>" type="text/javascript"></script>
    <script src="<%=ResolveUrl("~/js/jquery/jQueryUI.js")%>" type="text/javascript"></script>
    <script src="<%=ResolveUrl("~/js/Login.js")%>" type="text/javascript"></script>
   <form id="frmLogin" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Services>
                <asp:ServiceReference Path="~/WebServices/LoginService.asmx" />
                <asp:ServiceReference Path="~/WebServices/ServiceSetPrimaryGroup.asmx" />
           </Services>
        </asp:ScriptManager>
        <div id="divLogin" title ="Login">
            <div id="lblLoginMessage" class="Message" visible="false"></div>
            
            <span style="display:inline;">User Name:</span>
            <input type="text" id="txtUserName" style="width:150px;" onchange="UserNameEntered(txtUserName.value, lblEmployeeNumber, txtEmployeeNumber)"/>
            <br />
            <span style="display:inline;">Pass Word:&nbsp;</span>
            <input type="password" id="txtPassWord" style="width:150px;" />
            <br />
            <span id="lblEmployeeNumber" style="width:118px; display:inline; visibility:hidden;">Employee #:</span>
            <input type="password" id="txtEmployeeNumber" style="width:150px; visibility:hidden; display:none" />
            <br />
            <span id="lblGroup" style="display:inline; visibility:hidden">Group:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span> 
            <select id="ddlGroup" style="width:158px; visibility:hidden"></select>
            <br />
        </div>
    </form>
</body>
</html>

function OpenLoginDialog()
// The Page_Load procedure of Login.aspx has registered a Startup Script for the page that calls this function when the Login.aspx page is opened.
// This function creates a Jquery dialog box out of divLogin which contains the fields neccesary for loging into Client Track.
{
    $('div#divLogin').dialog({
//        height: "auto",
//        autoResize: true,
        buttons: { "Login": function() { Login(txtUserName.value, txtPassWord.value, txtEmployeeNumber, ddlGroup) }, "Cancel": function() { window.close(); } }
    });
    
    $("a.ui-dialog-titlebar-close").css("visibility", "hidden");
    $('#divLogin').keyup(function(e) 
    {
        if (e.keyCode == 13)
        {
            $("div.ui-dialog-buttonpane button:first").click();
        }
    });
    document.getElementById("txtUserName").focus();
}

function UserNameEntered(UserName, lblEmployeeNumber, txtEmployeeNumber)
// After the user enters there username this function is run to check to see if the entered username has a "-" in it.  If it 
// does the text after the "-" is evaluated to see is the user is a Manager, Staff, Team Leader or Developmental Specialist in 
// which case the employee number field is made visible so they can fill it in other wise it will be made hidden.
{
    var LocationOfDash = UserName.indexOf("-");
    if (LocationOfDash == -1) 
    {
        txtEmployeeNumber.style.visibility = "hidden";
        lblEmployeeNumber.style.visibility = "hidden";
    }
    else
    {
        var Title = new String(UserName.substr(LocationOfDash + 1)).toLowerCase()
        if (Title == "manager" || Title == "staff" || Title == "tl" || Title == "ds") 
        {
            txtEmployeeNumber.style.visibility = "visible";
            lblEmployeeNumber.style.visibility = "visible";
        }
        else 
        {
            txtEmployeeNumber.style.visibility = "hidden";
            lblEmployeeNumber.style.visibility = "hidden";
        }
    }
}

function Login(UserName, Password, txtEmployeeNumber, ddlGroup)
// Run when the Login butten is clicked
{
    var EmployeeNumber = txtEmployeeNumber.value;
    var Group = ""
    var Index = ddlGroup.selectedIndex
    if (Index != -1)
    {
        Group = ddlGroup.options[Index].text
    }

    var MissingDataMessage = SetMessage(UserName, Password, txtEmployeeNumber, EmployeeNumber, ddlGroup, Group);

    if (MissingDataMessage == "") 
    // All required data has been entered.
    {
        if (ddlGroup.style.visibility != "visible")
        // The Login Service will attempt to authenticate the user.
        {
            LoginService.Login(UserName, Password, EmployeeNumber, Group, LoginCallBack);
        }
        else 
        // The user has been authenticated and has selected the Client Track group she/he wants to use as their primary group for this session.  
        // Their primary group will now be set to that group and they will be redirected to the Core Information page.
        {
            ServiceSetPrimaryGroup.SetPrimaryGroup(Group)
            window.location = "CoreInformation.aspx"
        }
    }
    else {
        lblLoginMessage.innerHTML = MissingDataMessage;
        lblLoginMessage.visible = "true";
    } 
}

function SetMessage(UserName, Password, txtEmployeeNumber, EmployeeNumber, ddlGroup, Group)
// Checks to see if any required data is missing and creates a message to notify the user of such.
{
    var MissingDataMessage = "";
    if (UserName == "") {
        MissingDataMessage = "User Name is required."
    }
    else if (Password == "") {
        MissingDataMessage = "Password is required."
    }
    else if ((txtEmployeeNumber.style.visibility == "visible") && ((isNaN(EmployeeNumber) || EmployeeNumber.length != 6))) {
        MissingDataMessage = "Employee Number is required and must be a number exactly 6 digits in length."
    }
    else if ((ddlGroup.style.visibility == "visible") && Group == "") {
        MissingDataMessage = "Group is required."
    }
    return MissingDataMessage;
}


function LoginCallBack(LoginResult) 
{
    if (LoginResult == "Login succeded")
    // The user has been authenticated by the Login Webservice and will now be redirected to the Core Information page.    
    {
        window.location = "CoreInformation.aspx"
    }
    else if (LoginResult.substr(0, 12) == "<NewDataSet>")
    // The user has been authenticated by the Login Webservice which has returned a dataset of Client Track groups the user is in.    
    // This only happens if the user is in more then one Client Track group.  The code below loads makes the ddlGroup visible and
    // loads it with those groups so the user can choose which he/she wants to have used as thier primary group for this session.
    {
        try 
            {
                var objOption
                var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = "false";
                xmlDoc.loadXML(LoginResult);
                var xmlname, xmlid
                var findNodes1 = xmlDoc.getElementsByTagName("Group");
                var lblGroup = $get("lblGroup");
                lblGroup.style.visibility = "visible";
                var ddlGroup = $get("ddlGroup");
                ddlGroup.style.visibility = "visible";
                ddlGroup.add(document.createElement("option"));
                for (i = 0; i < findNodes1.length; i++) 
                {
                    objOption = document.createElement("option");
                    objOption.text = xmlDoc.getElementsByTagName("Group")[i].childNodes[0].nodeValue;
                    ddlGroup.add(objOption);
                }
                lblLoginMessage.innerHTML = "Select the group for the drop down list that you would like to login under and click on the Login button";
                lblLoginMessage.visible = "true";
           }
        catch (e) 
            {
                alert("Alert" + e.description);
            }        
    }
    else
    // The user has not been authenticated by the Login Webservice which has returned a message indicating why not.
    {
        lblLoginMessage.innerHTML = LoginResult + "<br><br>";
        lblLoginMessage.visible = "true";
        document.getElementById("txtUserName").focus();
        $get("ctl00_UpdateProgressButton").style.display = "none";
    }
}

Open in new window

0
Comment
Question by:leskelly
  • 3
  • 3
  • 3
9 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34972828
rather than using visibility:hidden, use display:none
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34972832
and display:block instead of visibility:visible
0
 

Author Comment

by:leskelly
ID: 34972854
Thanks for your response but how to I control it using JavaScript.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34972897
document.getElementById("lblEmployeeNumber").style.display = "none";

document.getElementById("lblEmployeeNumber").style.display = "block";
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34972925
So what is the problem exactly?  Not really clear.  Is the space you want to get rid of?
0
 

Author Comment

by:leskelly
ID: 34973116
I modified the HTML and code as follows;
            <span id="lblEmployeeNumber" style="width:118px; display:none">Employee #:</span>
            <input type="password" id="txtEmployeeNumber" style="width:150px; display:none" />
and
                document.getElementById("lblEmployeeNumber").style.display = "none";
                document.getElementById("txtEmployeeNumber").style.display = "none";
but the gap is still there.  I ran it through the debugger and it does show the display as none.
Any other thoughts?
0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
ID: 34973158
The <br/> tags are still there, even after you hide the elements.  Instead, you should wrap the Group fields in a DIV, and show/hide that one DIV.  Either way, you need to get rid of the <br /> tags.
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 34973183
       <div id="divLogin" title ="Login">
            <div id="lblLoginMessage" class="Message" visible="false"></div>
           
            <span style="display:inline;">User Name:</span>
            <input type="text" id="txtUserName" style="width:150px;" onchange="UserNameEntered(txtUserName.value, lblEmployeeNumber, txtEmployeeNumber)"/>
            <br />
            <span style="display:inline;">Pass Word:&nbsp;</span>
            <input type="password" id="txtPassWord" style="width:150px;" />
            <br />
            <span id="lblEmployeeNumber" style="width:118px; display:inline; visibility:hidden;">Employee #:</span>
            <input type="password" id="txtEmployeeNumber" style="width:150px; visibility:hidden; display:none" />

            <!-- Begin Group Info -->
            <div id="groupInfo">
                <br />
                <span id="lblGroup" style="display:inline; visibility:hidden">Group:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                <select id="ddlGroup" style="width:158px; visibility:hidden"></select>
                <br />
            </div>
            <!-- End Group Info -->

        </div>
0
 

Author Closing Comment

by:leskelly
ID: 34973227
After I removed one of the break tags the fields moved up where I wanted them.  That was a silly oversight on my part.  Thanks for your assistance.
0

Featured Post

IT, Stop Being Called Into Every Meeting

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

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…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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

11 Experts available now in Live!

Get 1:1 Help Now