Solved

How to hide or display HTML elements using Javascript function

Posted on 2013-06-13
10
283 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 82

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
 
LVL 82

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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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 82

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 82

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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

AJAX ModalPopupExtender has a required property "TargetControlID" which may seem to be very confusing to new users. It means the server control that will be extended by the ModalPopup, for instance, if when you click a button, a ModalPopup displays,…
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.
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

746 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

15 Experts available now in Live!

Get 1:1 Help Now