Solved

Classic 'hide a button' based on condition

Posted on 2006-11-08
11
478 Views
Last Modified: 2010-07-27
Hello,

I'm trying to hide a button based on a condition.  In simple terms I'm trying to do the following in javascript:

//If I am on tab2 which is <a href="#" rel="tcontent2">...showing contents of <DIV id="tcontent2">
IF GetCookie("ulid") = "tcontent2" THEN
//Hide this HTML button whose id and name is newbtn
document.newbtn.style.visibility = "hidden"
END IF

Button's tag which is not inside any form:
<BUTTON ID="newbtn" Name="newbtn">Hello</BUTTON>

Setting Cookie in js (this all works below):

function saveselectedtabcontentid(ulid, selectedtabid){ //set id of clicked on tab as selected tab id & enter into cookie
if (enabletabpersistence==1) //if persistence feature turned on
setCookie(ulid, selectedtabid)
}
function getCookie(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

function setCookie(name, value){
document.cookie = name+"="+value //cookie value is domain wide (path=/)
}

=======================================
Basically trying to figure out the correct javascript syntax to hide my button when Cookie tells me user is viewing tab2 info.  Probably pretty simple, right?

THank you,
Jim
0
Comment
Question by:jayme9
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 4
11 Comments
 
LVL 6

Expert Comment

by:sodalitas
ID: 17899038
Are you looking for this?

if (getCookie("ulid") == "tcontent2") {
     //Hide this HTML button whose id and name is newbtn
     document.newbtn.style.visibility = "hidden";
}
0
 
LVL 6

Expert Comment

by:sodalitas
ID: 17899103
Sorry,

if (getCookie("ulid") == "tcontent2") {
     //Hide this HTML button whose id and name is newbtn
     document..getElementById("newbtn").style.visibility = "hidden";
}
0
 

Author Comment

by:jayme9
ID: 17899292
That, unfortunately, did not work.  The button is still visible.
0
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
LVL 6

Expert Comment

by:sodalitas
ID: 17899379
There was a syntax error in my javascript, it had document.. instead of document.
Fix that and try again, if still an issue, here is an alternative:

Put the button in a div tag like this

<div id="hideButton"><input type=button id="newBtn"></div>

if (getCookie("ulid") == "tcontent2") {
     //Hide this HTML button whose id and name is newbtn
     document.getElementById("hideButton").style.visibility = "hidden";
}
0
 

Author Comment

by:jayme9
ID: 17900231
Sorry, there must be a problem in the code.

I tried your code above, still the button shows.

Even if I do this, the button still shows:

<script language="javascript">
{
     //Hide this HTML button whose id and name is newbtn
     document.getElementById("hideButton").style.visibility = "hidden";
}
</script>

inside my body HTML:
<div id="hideButton"><input type=button id="newBtn"></div>

Don't know how something so simple could turn out to be so complicated to do.

am I missing any prerequisites?  I figure if I can just hide the button using javascript that would be a start. Then I can figure out how to do it using a condition.

Hope to get more insight on how to make this possible.
0
 
LVL 6

Expert Comment

by:sodalitas
ID: 17901175
Is the javascript in the HEAD section?  The HEAD gets sent before the BODY, so if the script is in the HEAD and is not in a function, then it will attempt to run it right away and the div hasn't been loaded yet.  Try wrapping the code in a function like this in the HEAD:

function hideButton() {
  document.getElementById("hideButton").style.visibility = "hidden";
}

and put this script in the BODY just before the </body> tag,

<script lang=Javascript>
hideButton();
</script>

0
 
LVL 6

Expert Comment

by:sodalitas
ID: 17901187
For example, this code works:

<html>
<head>
<script lang=Javascript>
function toggleHide() {
      if (document.getElementById("hideButton").style.visibility == "hidden")
           document.getElementById("hideButton").style.visibility = "";
      else
           document.getElementById("hideButton").style.visibility = "hidden";
}
</script>
</head>
<body>
<div id="hideButton"><input type="button" id="hi" value="Hi" /></div>
<BR>
<input type="button" id="clickme" onclick="javascript:toggleHide();" value="Click Me" />
</body>
</html>
0
 

Author Comment

by:jayme9
ID: 17904716
The problem was my tab which is a hyperlink calling the js function:

<a href="#" ref="tcontent2" onclick="javascript:toggleHide();">Tab 2</a>

the js would not execute unless I took out 'ref' from above.  I have no clue why.  However, I need 'ref' since it makes reference to a js file allowing user to maintain tab persistance using session cookies.

So I guess I'm back at square one?

I've been thinking of taking this approach since the cookie approach doesn't seem to be working:

When/if DIV id="tcontent2" is being viewed then hide button Xbutton:

in js (below seems logical approach, but does not work, why?):

if (document.getElementById("tcontent2").style.visibility <> "hidden") {
//only when user is viewing content in tab2 hide this button
document.getElementById("Xbutton").style.visibility = "hidden";
}

Note: Div id="tcontent2" is visible when user clicks the Tab 2 hyperlink:

      <ul id="maintab" class="shadetabs">
        <li class="selected"><a href="#" rel="tcontent1">Main</a>
        <li><a href="#" rel="tcontent2">Capabilities</a>
        <li><a href="#" rel="tcontent3">Remarks</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button onclick="NewOrgWin();" style="WIDTH: 117px; HEIGHT: 24px"><font color="navy" size="2"><b>Create
        New Unit</b></font></button>&nbsp;<button name="Button_Revise" onclick="OrgWin();" id="Button_Revise" style="HEIGHT: 24px" {hideme}><font size="2" color="navy"><b>Revise</b></font></button></li>
 
      </ul>

Thank you for your patience.
0
 
LVL 6

Expert Comment

by:sodalitas
ID: 17906297
First thing that jumps out is a syntax problem, javascript uses != to mean not equal, not <>.
0
 

Author Comment

by:jayme9
ID: 17908586
I found out that there is an onclick event for the hyperlink tag that is being declared inside the js file.  This was over-riding my own onclick event I placed to hide the button.  Now I have to figure out how to execute 2 js functions for one onclick event.  I tried just placing the functions one after the other, but that didn't work.  Then I removed the "if" condition and the button disappeared.  This is a good first step in the right direction.  Now I must try to implement the "if"condition somehow:

//works without the if condition.  Don't know what's wrong with the if condition since I tried various ways using != "hidden" and using double equal signs and the one below:
if (document.getElementById("tcontent2").style.visibility = "none") {
//only when user is viewing content in tab2 hide this button
document.getElementById("Xbutton").style.visibility = "none";
}

=================================
I'm one step closer then I was before.

0
 
LVL 6

Accepted Solution

by:
sodalitas earned 500 total points
ID: 17909090
I would throw an alert line in just before the if condition to see what the value actually is:

alert(document.getElementById("tcontent2").style.visibility);

then when you test your different scenarios you will know what to check.

Also, you need to have double equal ==, if you only have one equal = it will assign it and return true if it was able to assign it, so in the if condition above you are not checking if the visibility = none, you are setting the visibility = none and then checking that that was successful.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

752 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