CODEWITHSUNDEEP
javascriptasp.net
KrisSodroski
KrisSodroski

Reputation: 2852

getElementById doesn't find element after setting visibility to hidden

I'm working on an asp.net page, and I have a master page that uses a content page (my web control). In my web control, I have 4 elements. When I change the picklisttype drop down

PickListType - dropdown UserPickList -not important Organization - label Body - label Address -drop down

When I change the picklisttype dropdwon, I want to hide Body and Address, and vice versa.

When I change it hte first time, it works, but the second time, it says that it cannot find the ids of Body and Address (I set their visibility to hidden) the 2nd time. When looking through the source, it seems that these elements have 1) changed their Ids during the postback and .ClientId can't find them or 2) they just disappear.

I can't seem to figure out how to do this. Any ideas? 

function DropDownChange() {

            var picklist = document.getElementById("PickListTypeList");
            var usercontainer = document.getElementById("ctl00_ctl00_ctl00_PageContentPlaceHolder_PageContentPlaceHolder_paneDetails_ApplicerPickListContainer");
            var orgcontainer = document.getElementById("ctl00_ctl00_ctl00_PageContentPlaceHolder__C_OrganizationPickListContainer");
            var addresslabel = document.getElementById("LegalBodyAddressLabel");
            var addressbox = document.getElementById("ctl00_ctl00_ctl00_PageContentPlaceHolder_PageContentPlaceHolder_paneDetails_ApplicantsRadDock_C_ApplicantsControl_AddEditApplicantDock_C_AddApplicantDock_C_LegalBodyAddressComboBox");


            if(picklist.value.toLowerCase() === "sometext"){
                usercontainer.style.display = "none";
                orgcontainer.style.display = "inline";
                addresslabel.visibility = "visible";
                addressbox.style.display = "inline";
            }
            else{
                usercontainer.style.display = "inline";
                orgcontainer.style.display = "none";
                addresslabel.visibility = "hidden";
                addressbox.style.visiblity = "none";

            }


            }

This is the source: i use .ClientId to dynamically find the ids, but then I changed it to static (same id's every single time) and I still cannot seem to get address and label. I am finding these elements from the parent (master) page by going into the control (controlname.nameofelementID.ClientID).

Upvotes: 1

Views: 2763

Answers (2)

Tushar Roy
Tushar Roy

Reputation: 362

You've 2 ways to make it work:

  1. Use class names (.net framework does not fiddle with this)
  2. Generate the javascript ids (using ClientId) at runtime. Since there's a postback, this is the right thing to do. Something like: document.getElementById("<%=LegalBodyAddressLabel.ClientId%>");

Upvotes: 1

Micah
Micah

Reputation: 10395

2 ideas/options

  • Add a class to the controls you want to access, and then use document.getElementsByClassName to retrieve them. .NET will not change classes on html tags after a postback.

OR

  • Wrap them in a div/span that has an id, and then document.getElementById that wrapping tag and then access its firstChild. I would recommend not doing runat="server" for this wrapper

Upvotes: 1

Related Questions