Hide using a div tab

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Mardy - 28 Oct 2005 20:41 GMT

I have an aspx page that contains a drop down and 3 divs and lots of other
stuff. I'd like to hide the divs depending on which option from the drop down
is selected. It works fine until I do a postback then all 3 divs are visible.

When the page initially loads I see just the div corresponding to the
default value in the ddl. Prior to a postback the display works as intended
but once a postback occurs all 3 divs are visible until I make another
selection on the ddl.

Code is below. As you will see I try to stay away from javascript but would
really like to avoid a postback here.

Thanks

Code behind
Protected WithEvents bodytag As HtmlGenericControl
PageLoad
ddlSearch.Attributes.Add("onchange", "return toggleDiv()")
bodytag.Attributes.Add("onload", "return toggleDiv()")

aspx page
<script language="JavaScript"> function toggleDiv() {
div1 = document.getElementById('divAssessment');
div2 = document.getElementById('divNC');
div3 = document.getElementById('divDesignComments');
DDL = document.getElementById('ddlSearch');
if (DDL.selectedIndex == 0) {
div1.style.visibility = 'visible';
div1.style.display = 'block';
div2.style.visibility = 'hidden';
div2.style.display = 'none';
div3.style.visibility = 'hidden';
div3.style.display = 'none';
                    }

if (DDL.selectedIndex == 1) {
div1.style.visibility = 'hidden';
div1.style.display = 'none';
div2.style.visibility = 'visible';
div2.style.display = 'block';
div3.style.visibility = 'hidden';
div3.style.display = 'none';
                    }

if (DDL.selectedIndex == 2)
{
    div1.style.visibility = 'hidden';
    div1.style.display = 'none';
    div2.style.visibility = 'hidden';
    div2.style.display = 'none';
    div3.style.visibility = 'visible';
    div3.style.display = 'block';
}
}

</script>

<body runat="server" id="bodytag">

<div >...

Reply to this Message

Sreejith Ram - 28 Oct 2005 20:51 GMT

What you need here is a call to the javascript function toggleDiv, after the
page is loaded in broswer

try
Page.RegisterStartupScript("<script>toggleDiv();</script>");

> I have an aspx page that contains a drop down and 3 divs and lots of other
> stuff. I'd like to hide the divs depending on which option from the drop down
[quoted text clipped - 56 lines]
>
> <div >...

Reply to this Message

Mardy - 28 Oct 2005 21:11 GMT

Awsome, that does it.

Thanks... but why does the initial page load work but not the postback?

> What you need here is a call to the javascript function toggleDiv, after the
> page is loaded in broswer
[quoted text clipped - 62 lines]
> >
> > <div >...

Reply to this Message

Sreejith Ram - 28 Oct 2005 21:29 GMT

I can only make a guess without seeing code

is there code hiding/showing divs at server side ? if so is it in "if
(!Page.IsPostBack)" ?

> Awsome, that does it.
>
[quoted text clipped - 66 lines]
> > >
> > > <div >...

Reply to this Message

Mardy - 28 Oct 2005 21:39 GMT

yes
ddlSearch.Attributes.Add("onchange", "return toggleDiv()")
bodytag.Attributes.Add("onload", "return toggleDiv()")

i have these two lines in between that if stmt but I tried both in and
outside that if stmt and saw no difference.

Thanks

> I can only make a guess without seeing code
>
[quoted text clipped - 71 lines]
> > > >
> > > > <div >...

Reply to this Message

Sreejith Ram - 28 Oct 2005 22:19 GMT

Well,my guess was that your onload=togglediv() is not working the first time
or in postbacks.. I meant you may have some other server side code to hide
div, like below ..

if(!Page.PostBack)
{
if(somevalue="0")
{
div1.attributes.add("style","visibility:none") ;
div1.attributes.add("style","visibility:hidden") ;

}
}

Any case the bottmline is, if one need to access the HTML elements using
javascript when the page loads, use Page.RegisterStartupScript ... :)

> yes
> ddlSearch.Attributes.Add("onchange", "return toggleDiv()")
[quoted text clipped - 80 lines]
> > > > >
> > > > > <div >...

Reply to this Message

Hide using a div tab

Free Magazines