Solved

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

Posted on 2011-02-24
9
455 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 40

Expert Comment

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

document.getElementById("lblEmployeeNumber").style.display = "block";
0
 
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
This article discusses how to create an extensible mechanism for linked drop downs.
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)

776 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