Solved

Classic 'hide a button' based on condition

Posted on 2006-11-08
11
474 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
  • 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
Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

828 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