asked on

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

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

Gurvinder Pal Singh

rather than using visibility:hidden, use display:none

Gurvinder Pal Singh

and display:block instead of visibility:visible

leskelly

ASKER

Thanks for your response but how to I control it using JavaScript.

Gurvinder Pal Singh

document.getElementById("lblEmployeeNumber").style.display = "none";

document.getElementById("lblEmployeeNumber").style.display = "block";

Designbyonyx

So what is the problem exactly? Not really clear. Is the space you want to get rid of?

leskelly

ASKER

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?

ASKER CERTIFIED SOLUTION

Designbyonyx

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Designbyonyx

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


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


</div>

leskelly

ASKER

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.