Solved

How to hide or display HTML elements using Javascript function

Posted on 2013-06-13
10
288 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
  • 5
  • 4
10 Comments
 
LVL 83

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
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.

 
LVL 83

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 83

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 83

Accepted Solution

by:
Dave Baldwin earned 100 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
SQL Login 17 48
Adware on IIS hosted asp.net website 1 27
Save ms data to server side. 19 42
transaction in asp.net, sql server 6 31
One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.
Windows 10 is mostly good. However the one thing that annoys me is how many clicks you have to do to dial a VPN connection. You have to go to settings from the start menu, (2 clicks), Network and Internet (1 click), Click VPN (another click) then fi…

813 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now