Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to hide or display HTML elements using Javascript function

Posted on 2013-06-13
10
Medium Priority
?
297 Views
Last Modified: 2013-07-02
I have javascript in an asp.net-mvc view that checks the id of four buttons and, based on the value of a property in the controller, set the style attribute to visible or hidden. The code is not working. The buttons always display. I am not sure if my code is incorrect of if the data.PairResolved element is not being picked up. Here is my javascript.

    <script type="text/javascript">
        function unlinkresolve() {
            if (document.getElementById("unlink")) or(document.getElementById("resolve"));
            {
                if (this.data.PairResolved) { return element.setAttribute('style', "visibility: visible"); }
                else { return element.setAttribute('style', "visibility: hidden"); }
            }
        }

        function unlinkunresolve() {
            if (document.getElementById("unresolve")) or(document.getElementById("unlinkunresolve"));
            {
                if (!this.data.PairResolved) { return element.setAttribute('style', "visibility: visible"); }
                else { return element.setAttribute('style', "visibility: hidden"); }
            }
        }
    </script>    
   
    <button type="button" id="unlink">UnLink</button>
    <button type="button" id="resolve">Resolve</button>
    <button type="button" id="unresolve">UnResolve</button>
    <button type="button" id="unlinkunresolve">UnLink/UnResolve</button>
0
Comment
Question by:rawilken
[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
  • 5
  • 4
10 Comments
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39245351
You 'if' statements aren't working because the elements are always there whether they are visible or not.  This is a simple one that I use.  The 'parts' variable is a counter that is used to track the last state.  cpart() increments parts and checks to see if it is even or odd and calls either part0() or part1() as a result.
<script type="text/javascript">

var parts = 0;
function cpart() {
	parts++;
	if(parts % 2) part0();
	else part1();
	return
	}

function part0() {
	document.getElementById('pa').style.visibility = 'hidden';
	}

function part1() {
	document.getElementById('pa').style.visibility = 'visible';
	}
</script>

Open in new window

0
 

Author Comment

by:rawilken
ID: 39245866
You headed me in a new direction...here is what I came up with.

    <script type="text/javascript">
        function displaybuttons() {
            if (this.data.PairResolved) {
                document.getElementById('unlink').style.visibility = 'visible';
                document.getElementById('resolve').style.visibility = 'visible';
                document.getElementById('unresolve').style.visibility = 'hidden';
                document.getElementById('unlinkunresolve').style.visibility = 'hidden';
            }
            else {
                document.getElementById('unlink').style.visibility = 'hidden';
                document.getElementById('resolve').style.visibility = 'hidden';
                document.getElementById('unresolve').style.visibility = 'visible';
                document.getElementById('unlinkunresolve').style.visibility = 'visible';
            }
        }
    </script>
    <div onload="displaybuttons()" >   
        <button type="button" id="unlink">UnLink</button>
        <button type="button" id="resolve">Resolve</button>
        <button type="button" id="unresolve">UnResolve</button>
        <button type="button" id="unlinkunresolve">UnLink/UnResolve</button>
    </div>
0
 

Author Comment

by:rawilken
ID: 39245929
But it does not work!
0
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!

 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39246053
This...  "if (this.data.PairResolved)" doesn't mean anything.  In addition, whatever gets done, Only gets done 'onload', when the page is loaded.  For the 'buttons' to do anything, each of them has to have an 'onclick' event in their attributes.
0
 
LVL 19

Expert Comment

by:Albert Van Halen
ID: 39247498
You cannot use onload event on a div.
Use it on the body.
0
 

Author Comment

by:rawilken
ID: 39247590
I know the buttons need an onclick event. I have not started that part of the coding. I am trying to get the buttons to only appear based on a specific value of PairResolved.

I believe the problem now is that the javascript requires an event to load. I would want to place it in the onload event for the page, but this is asp.net-MVC and I do not know if and how to place that in the controller.

Here is the latest iteration. Unfortunately I have not resolved how to call the script. So if you have ideas on how to code this to be called in the controller it would be greatly appreciated. I will look into doing onclick events after this is resolved.

    <div>    
        <button type="button" id="unlink">UnLink</button>
        <button type="button" id="resolve">Resolve</button>
        <button type="button" id="unresolve">UnResolve</button>
        <button type="button" id="unlinkunresolve">UnLink &amp; UnResolve</button>
    </div>
    <script type="text/javascript">
        function displaybuttons() {
            if (data.PairResolved) {
                document.getElementById('unlink').style.visibility = 'visible';
                document.getElementById('resolve').style.visibility = 'visible';
                document.getElementById('unresolve').style.visibility = 'hidden';
                document.getElementById('unlinkunresolve').style.visibility = 'hidden';
            }
            else {
                document.getElementById('unlink').style.visibility = 'hidden';
                document.getElementById('resolve').style.visibility = 'hidden';
                document.getElementById('unresolve').style.visibility = 'visible';
                document.getElementById('unlinkunresolve').style.visibility = 'visible';
            }
        }
    </script>
0
 

Author Comment

by:rawilken
ID: 39247644
I learned that the body tag has an onload event.

<body onload="displaybuttons()">
        <h2>@Model.SummaryText</h2>

        <div>    
            <button type="button" id="unlink">UnLink</button>
            <button type="button" id="resolve">Resolve</button>
            <button type="button" id="unresolve">UnResolve</button>
            <button type="button" id="unlinkunresolve">UnLink &amp; UnResolve</button>
        </div>
        <script type="text/javascript">
            function displaybuttons() {
                if (data.PairResolved) {
                    document.getElementById('unlink').style.visibility = 'visible';
                    document.getElementById('resolve').style.visibility = 'visible';
                    document.getElementById('unresolve').style.visibility = 'hidden';
                    document.getElementById('unlinkunresolve').style.visibility = 'hidden';
                }
                else {
                    document.getElementById('unlink').style.visibility = 'hidden';
                    document.getElementById('resolve').style.visibility = 'hidden';
                    document.getElementById('unresolve').style.visibility = 'visible';
                    document.getElementById('unlinkunresolve').style.visibility = 'visible';
                }
            }
        </script>
    </body>
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39248387
'data.PairResolved' is still not a valid variable or object in the code you have posted.  At this point, it will merely cause an error.
0
 

Author Comment

by:rawilken
ID: 39248593
The data.PairResolved is supposed to check the bool value of a property in the controller for PairResolved. This property returns a bool value if the flag for these records is set to true. How else would I access this value?
0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 300 total points
ID: 39248858
The question is where is 'data.PairResolved' defined because it is clearly not in the code you posted.  If that is an ASP variable, then you need to copy it into a javascript variable.  ASP runs on the server and javascript runs in the browser.  They do not communicate unless you make it happen.  Something like this.
<script type="text/javascript">
            PairResolved = <%= data.PairResolved %>;
            function displaybuttons() {
                if (PairResolved) {
                    document.getElementById('unlink').style.visibility = 'visible';
                    document.getElementById('resolve').style.visibility = 'visible';
                    document.getElementById('unresolve').style.visibility = 'hidden';
                    document.getElementById('unlinkunresolve').style.visibility = 'hidden';
                }
                else {
                    document.getElementById('unlink').style.visibility = 'hidden';
                    document.getElementById('resolve').style.visibility = 'hidden';
                    document.getElementById('unresolve').style.visibility = 'visible';
                    document.getElementById('unlinkunresolve').style.visibility = 'visible';
                }
            }
        </script>

Open in new window


http://msdn.microsoft.com/en-us/library/vstudio/6dwsdcf5%28v=vs.100%29.aspx
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…

730 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