Hide one div and show another div via javascript.

[markronz]

Hello all-
I have a page with two <div>'s on it. I have a link that appears within one of the div's. When the user clicks on the link, I want it to hide that div, and show the other. This seems like it should be simple, however I keep running into an Object Required issue, and I'm not sure why. Here is the code which defines the two DIV's within a panel:

            <asp:Panel ID="ResultPanel" runat="server" Height="100%" ScrollBars="Auto" Style="width: 99%; height: expression(document.body.clientHeight - 168); left: 4px; position: absolute; top: 188px;" Width="100%" CssClass="common">
                <div style="width: 100%; height: 100px; left: 4px; top: 2px;" class="container" id="Results" runat="server">
                </div>
                <div style="width: 100%; height: 100px; left: 4px; top: 2px;" class="container" id="AlertGroupResults" runat="server" visible="false">
                    <asp:Label ID="Label7" runat="server" Text="This is a test."></asp:Label></div>
            </asp:Panel>

Then here is the actual link that is contained inside of the Results Div:

<td class='cell'><A id = 'displayText' HREF = 'javascript:hideDiv();'>Link</A></td>

Then lastly, here is my javascript to hide one and show the other.

<script type="text/javascript"> 
function hideDiv() {
	document.getElementById("Results").style.visibility = "hidden";
	document.getElementById("AlertGroupResults").style.visibility = "visible";
} 
</script>

Right now what happens when I click the link is that it does successfully hide the Results Div. But then I can see an error in IE that says "Object Required" when it's trying to make the AlertGroupResults Div visible.

Any idea what I'm messing up?

 

[vacunita]

1. Post the fully rendered HTML code. ASP is of no use. Javascript only sees the final product. So show us what appears in the View->Source option of the browser.

2. Post the complete error IE produces. This will help us Identify the issue.

3. Its strongly suggested to use the onclick event of the link, rather than the HREF and Javascript protocol.

[COLOR=#990000]<[/color]script type[COLOR=#990000]=[/color][COLOR=#FF0000]"text/javascript"[/color][COLOR=#990000]>[/color] 
[b][COLOR=#0000FF]function[/color][/b] [b][COLOR=#000000]hideDiv[/color][/b][COLOR=#990000]()[/color] [COLOR=#FF0000]{[/color]
[tab]document[COLOR=#990000].[/color][b][COLOR=#000000]getElementById[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]"Results"[/color][COLOR=#990000]).[/color]style[COLOR=#990000].[/color]visibility [COLOR=#990000]=[/color] [COLOR=#FF0000]"hidden"[/color][COLOR=#990000];[/color]
[tab]document[COLOR=#990000].[/color][b][COLOR=#000000]getElementById[/color][/b][COLOR=#990000]([/color][COLOR=#FF0000]"AlertGroupResults"[/color][COLOR=#990000]).[/color]style[COLOR=#990000].[/color]visibility [COLOR=#990000]=[/color] [COLOR=#FF0000]"visible"[/color][COLOR=#990000];[/color]
[tab][b][COLOR=#0000FF]return[/color][/b] [b][COLOR=#0000FF]false[/color][/b][COLOR=#990000];[/color]

[COLOR=#FF0000]}[/color] 
[COLOR=#990000]</[/color]script[COLOR=#990000]>[/color]

[COLOR=#990000]<[/color]a id [COLOR=#990000]=[/color] [COLOR=#FF0000]'displayText'[/color] href[COLOR=#990000]=[/color][COLOR=#FF0000]"#"[/color] onclick[COLOR=#990000]=[/color][COLOR=#FF0000]'return hideDiv();'[/color][COLOR=#990000]>[/color]Link[COLOR=#990000]</[/color]a[COLOR=#990000]>[/color]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[MarkXaml]

Phil is right, the generated html is best. My initial guess (which the html would show) is that since you have your div's running on the server, it may be making the clientID something other than "Results." It is probably something more like "ctl00_ResultsPanel_Results"

If that is the case, you can either set the clientidmode to have some control over it, or don't have it runat="server". Unless you have some code behind that references the div's, there is no good reason to have that attribute anyway.

Good luck.

-Mark

 

[markronz]

Ok, I've updated the code that's in my hyperlink, to be like you suggested. This still works, in as far as it does still hide the one DIV.

When I look at the source of the actual web page as you've suggested, the entire AlertGroupResults div is missing. Any ideas why it would be in my project in Visual Studio, but then when I actually have the website running, that it's not there?

Also, here is the full error message:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET CLR 1.1.4322; .NET4.0C; .NET4.0E; MS-RTC LM 8; Tablet PC 2.0)
Timestamp: Tue, 9 Oct 2012 16:12:12 UTC


Message: Object required
Line: 23
Char: 2
Code: 0
URI:

http://localhost:3892/AlertHistory/Default.aspx

 

[markronz]

I've removed the runat="server" part of those "div" lines, and then when I view the source on the webpage now, the Div DOES show up. So that's cool.

<div style="width: 100%; height: 100px; left: 4px; top: 2px;" class="container" id="AlertGroupResults" visible="false">
<asp:Label ID="Label7" Text="This is a test."></asp:Label></div>
</div>

And when I click on the link, it does hide the one Div, and there is no longer an error message. So that's all good. However, my second Div, the AlertGroupResults one is still not visible. If I specifically set it to be "visible=false" like shown above, can I still change that via javascript to make it visible? Or would I have to set it to be invisble as part of some "load" event instead?

 

[markronz]

Nevermind I think I may have figured it out. I also removed runat="server" from the lable appearing in that Div as well. And it didn't like that. So I left it out of the Div still, but added the runat back to the label. I think I still need to tweak something because the AlertGroupResults div is visible right from the start now. It's still not quite right yet but anyway, I think I'm on the right track. Thanks for the help guys!

 

[markronz]

I guess labels, contained inside of a Div do not get hidden, even if the div itself is hidden. Guess I'll have to keep playing to figure out how to hide anything contained in that div...

 

[vacunita]

I hadn't seen this before, but you have this:

<div style="width: 100%; height: 100px; left: 4px; top: 2px;" class="container" id="AlertGroupResults" runat="server" [red]visible="false"[/red]>

"visible" is not a valid HTML property, I'm guessing ASP might be interpreting that instead and simply removing the div altogether, so its not available for the JS to show, and causes the Object required since there is no actual object.

Remove it, and set it as a style.

style="visibility:hidden;"

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[markronz]

Awesome! That worked! Very happy you guys, they're hiding and unhiding like champs now. Thank you all for the assistance!

 

[vacunita]

Glad I could help.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech