div toggle using javascript

Question

0.00/5 (No votes)

See more:

hello friends,

I was tryin to toggle div using javascript, it was giving me error
Microsoft JScript runtime error: Object expected

Here is my aspx code:

<div>
                                <div style="border:1px solid Black;background-color:#D3DEEF;height:25px;">
                                    <a href="#" id="lnkComments" style="text-decoration:none;color:#3B8DBD;margin:15px 0px 15px 10px;font-weight:bold;"  önclick="showDiv();">
                                    Comments:</a>
                                </div>
                                <div id="divComments" style="text-align:center;border:1px solid Black;height:100px;border-top-style:none;padding-removed15px;">
                                    <asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine" Width="80%" Height="80px">
                                    </asp:TextBox>
                                    <cc1:HtmlEditorExtender ID="HtmlEditorExtender1"  runat="server" TargetControlID="txtComments">
                                    </cc1:HtmlEditorExtender>
                                </div>
                            </div>

Javascript code:

function showDiv() {
               var div = document.getElementById('divComments');
               if (div.style.display == "none")
                   div.style.display = "block";
               else
                   div.style.display = "none";
           }

I tried same in simple aspx page, its working fine.
But when used in, aspx page that uses master page it gives above error.

May i know where I'm going wrong??

Thanks in advance

Posted 4-Jun-12 20:29pm

dhage.prashant01

Add a Solution

Comments

dhage.prashant01 5-Jun-12 2:52am

I'm using IE8 browser

2 solutions

Solution 3

XML

<script  type ="text/javascript" language ="javascript"  >
function showDiv(divComments) {
                var div = document.getElementById(divComments);
                if (div.style.display == "none")
                    div.style.display = "block";
                else
                    div.style.display = "none";
            }

</script>


<a href="#" id="lnkComments" style="text-decoration:none;color:#3B8DBD;margin:15px 0px 15px 10px;font-weight:bold;"  onclick="showDiv(divComments.id);">
                                    Comments:</a>

use this code it will sure work.

Posted 4-Jun-12 20:57pm

Prosan

Comments

dhage.prashant01 5-Jun-12 3:09am

Still same error =(
my code works fine in simple aspx page but gives error when used using master page

what can be the issue?

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sandeep Mewara · Accepted Answer · 2012-06-04T20:35:00

Solution 1

But when used in, aspx page that uses master page it gives above error.
This is because the rendered 'ID' of the controls in master page case is not exactly the same as you have defined. Controls are merged into master page template and the names are changed (a fixed master page naming convention string is appended to the id provided by you)

Two options:
1. Do a ViewSource, find the ID that is being defined for it (this will be same on every render of the page once page design is done). Use this ID to getElementById
2. Use server tag delimiter. Refer: Server side Delimiters in ASP.NET[^]. Use <%= %> to get the server control's ID

NOTE: If the control is a HTML control (not a server control, without runat="server" attribute) then there is no such problem. ID's get changed at the time of rendering only for server controls.

UPDATE:
You can also use jQuery toggle for such functionality: .toggle()[^]

Posted 4-Jun-12 20:35pm

Sandeep Mewara

Updated 4-Jun-12 21:08pm

v3

Comments

dhage.prashant01 5-Jun-12 2:41am

It is div tag, this is HTML control. So there cannot be change in the control id.
I have pasted my code above.

Sandeep Mewara 5-Jun-12 2:58am

Did you check your ViewSource? It would not even take a minute. Report what you see in your ID there.

dhage.prashant01 5-Jun-12 3:00am

here is my viewsource code

<div>
<div style="border:1px solid Black;background-color:#D3DEEF;height:25px;">

Comments:
</div>
<div id="divComments" style="text-align:center;border:1px solid Black;height:100px;border-top-style:none;padding-bottom:15px;display:none;">
<textarea name="ctl00$cphPage$txtComments" rows="2" cols="20" id="cphPage_txtComments" class="ms-authoringcontrols" style="border-color:#7F9DB9;border-width:1px;border-style:solid;height:80px;width:80%;">
</textarea>
<input type="hidden" name="ctl00$cphPage$HtmlEditorExtender1_ClientState" id="cphPage_HtmlEditorExtender1_ClientState" />
</div>
</div>

Sandeep Mewara 5-Jun-12 3:07am

Move your JS to the end of the page and see what happens. Also, move your JS to master page.

dhage.prashant01 5-Jun-12 3:20am

hey now itz working fine
div gets toggle, but another new problem

The text box within the toggle div appears straight vertical line =(
Since i have used HtmlEditorExtender

Any idea how to resolve it??

Sandeep Mewara 5-Jun-12 4:42am

Post your new issue as a new question as they are unrelated.

Do, mark this question resolved to help others in future.

dhage.prashant01 5-Jun-12 4:54am

check out my new issue in below link

http://www.codeproject.com/Questions/397388/HTMLEditorExtender-inside-Ajax-Accordion